Aitishiku.com📌 Skill 基础信息
- Skill 名称：web-design
- 简称：web-design
- 来源：社区第三方（作者：xiaopu-ai）
- 运行宿主：仅适用于 Claude-Code CLI 工具
- 核心定位：专攻 Web 端视觉设计，通过两阶段流程（先输出规范文档 DESIGN.md，再生成代码）快速生成符合 UI/UX 标准的网页，适用于 Landing Page、作品集、产品页等场景。
🧩 内部核心组成
子 Agent 集合
- 无独立子 Agent，采用模块化流程设计（Phase A/B/C）
斜杠命令
【无公开信息】
MCP 工具
【无公开信息】
模板文件
| 文件名称 | 功能简述 |
|---|---|
| design-md-template.md | DESIGN.md 输出模板（9 章节结构） |
| interaction-patterns.md | L1/L2/L3 三档交互代码库 |
| motion-library.md | 动画效果目录与风格推荐组合 |
| scroll-story-patterns.md | L3 电影级滚动叙事招式库 |
| style-seeds.md | 10 种预设风格种子 |
| scene-defaults.md | 7 种场景的布局组件基线 |
| text-decoration-rules.md | 文字装饰决策规则表 |
| icon-library.md | 图标库速查参考 |
| quality-checklist.md | 质量验收检查清单 |
| design-systems/*.md | 58 个品牌设计系统规范 |
Hooks 钩子
【无公开信息】
规则约束
- 设计规范必须输出 DESIGN.md 文件
- 严格遵守质量红线验收标准
- 动画效果数量与性能平衡规则
目录结构
web-design/
├── references/ # 参考文件库
│ ├── design-systems/ # 品牌设计系统
│ └── *.md # 各类模板文件
└── scripts/ # 辅助脚本
├── crawl_website.py # Playwright 爬虫
└── extract_design_tokens.py # Token 提取工具🛠 安装与启用方式
安装命令：
skills install --user xiaopu-ai/web-design前置依赖：
- Python 3 环境
- Playwright（用于 URL 爬取分析）
- Claude-Code CLI 运行环境
关键步骤：
- 通过安装命令获取 Skill
- 确保 Python 环境和 Playwright 就绪
- 在 Claude-Code CLI 中触发使用
📋 标准工作流
- 需求输入阶段（Phase A）
- 接受多种输入：PRD 文档、参考 URL、截图、关键词或混合输入
- 自动检测项目现有文件（DESIGN.md、PRD.md 优先级）
- 通过 URL 爬取、视觉分析或对话引导理解设计需求
- 规范生成阶段（Phase B）
- 必先生成 DESIGN.md 设计规范文档
- 包含 9 个标准章节：色彩、字体、组件、动效等
- 用户确认后保存至项目目录
- 代码生成阶段（Phase C）
- 基于 DESIGN.md 生成实际代码
- 收集具体页面内容需求
- 严格遵循设计规范实现
- 进行质量审计和参考物对齐检查
⚠️ 关键限制、缺陷、注意事项
平台限制：
- 仅支持 Claude-Code CLI，无法在其他 Agent 工具运行
- 依赖 Python 环境和 Playwright 爬虫能力
Token 消耗：
- 多阶段流程可能消耗较多 Token
- URL 爬取和代码生成阶段消耗较高
适合项目：
- Landing Page、作品集、产品介绍页等展示型网站
- 中小型 Web 项目视觉设计
- 需要快速产出设计规范和代码原型的场景
不适合项目：
- 后端逻辑、数据库相关开发
- 纯代码 Bug 修复
- 复杂业务系统或大型应用
已知坑点：
- Playwright 爬虫可能被目标网站反爬机制阻挡
- 动效实现需平衡视觉效果与性能消耗
- 中文排版有特殊要求（字体、行高等）
生产环境适用性：
- 可作为设计规范和原型生成工具
- 生成代码需要进一步优化和测试才能上生产
- 建议作为设计辅助工具而非最终交付工具
✅ 适用场景 & ❌ 不适合场景
✅ 适用场景
- 个人开发者：需要快速搭建个人作品集或博客网站
- 创业团队：需要快速产出产品 Landing Page 原型
- 设计师：希望将设计概念快速转化为可交互原型
- 前端开发者：需要参考现有网站设计风格实现类似效果
- 产品经理：有 PRD 文档需要快速可视化呈现
❌ 不适合场景
- 后端开发：需要数据库设计或 API 开发
- 复杂交互应用：需要复杂状态管理或业务逻辑
- 性能极致优化：对加载性能和运行时性能有极高要求
- 已有大型项目：仅需要局部修改或维护
- 非 Web 平台：移动端 App 或桌面应用开发
如何安装
skills install --user xiaopu-ai/web-design通用安装教程：在哪里输入上面的命令
上面的命令本质是在「终端 / 命令行」中调用技能管理器，把该 Skill 下载并注册到你的 AI 工具。各主流工具打开终端的位置不同，按下面操作即可：
- 打开工具自带的终端面板，或系统终端（macOS「终端」、Windows「PowerShell」、Linux「Terminal」）。
- 把上面的安装命令复制进去，回车运行，等待下载与注册完成。
- 重启或重新加载 AI 工具，让新安装的 Skill 被识别。
- 新建对话并触发：直接描述用途，或通过该工具的技能 / 斜杠菜单选中此 Skill。
Claude 桌面版（macOS / Windows）
桌面版没有内置命令行，Skill 需通过 Claude Code CLI 安装。打开系统终端，先执行 npm install -g @anthropic-ai/claude-code，再运行上面的安装命令；完成后完全退出并重新打开 Claude。
Claude Code（终端 CLI）
直接在项目目录的终端里运行上面的命令即可。也可先输入 claude 启动交互界面，再在对话中引用该 Skill（/ 斜杠菜单或直接描述用途）。
VS Code（含 GitHub Copilot）
打开终端面板：菜单「终端 → 新建终端」，或快捷键 Ctrl+`（macOS 为 ⌃+`）。在终端里运行上面的命令；装完后执行「重新加载窗口」（Ctrl+Shift+P → Reload Window），让 Copilot 等扩展识别新技能。
Cursor
底部「终端」面板（Ctrl+`）即是内置终端。粘贴运行上面的命令，完成后在命令面板执行「Reload Window」刷新，再开始对话。
Windsurf
底部「终端」面板运行命令；也可直接使用其内置 Agent 终端，在对话侧执行安装。
其他工具（ChatGPT、本地脚本等）
不支持本地终端的产品，可先在本机终端完成安装，再在对话中描述该 Skill 的能力让其调用；不同工具的命令格式请以其官方文档为准。
风险提示
自动扫描未发现高危命令、隐私抓取或数据外传行为。仍建议安装前快速浏览仓库代码。