Documentation
README
Web Design
Web 端视觉设计 SKILL。两阶段工作流:先出规范(DESIGN.md),再出代码。
DESIGN.md 是显式文件产物,保存到项目目录,可跨项目复用、可手动修改、可给其他工具消费。
核心流程
Phase A 理解需求(灵活输入)──→ Phase B 输出 DESIGN.md(用户确认)──→ Phase C 生成项目代码
启动时先检测(按优先级):
- 项目里已经有 DESIGN.md 了吗?→ 有则沿用/修改/重建
- 项目里有 PRD.md 吗?→ 有则进入 A4(PRD 驱动流程)
- 都没有 → 正常走 Phase A
Phase A: 理解需求
输入是灵活的,以下任意组合都行,不要强制用户走固定路径:
| 输入 | 处理方式 |
|---|---|
| 参考 URL | 抓取 HTML+CSS,提取 Token,motion audit |
| 截图 / 设计稿 | 从视觉提取气质、色温、密度、字体风格 |
| 关键词 / 描述 | "暗色克制衬线风格" → 从 style-seeds 匹配 Token |
| 品牌名 | "做成类似 Linear 的" → 先查 references/design-systems/,有则直接读取;无则抓取该网站 |
| 混合 | "参考这个 URL 但配色要暖一些" → 提取 + 覆盖 |
| PRD 文档 | 读取 PRD.md 的产品定位、页面结构、设计交接区 → 分析竞品风格 → 推导设计方向 |
A1. URL 分析(有参考 URL 时)
This is the opening of the README. Read the full README on GitHub.