Web Design Skill
本 skill 把一次完整的 UI 设计任务拆成 4 个顺序阶段：
- 定方向（ui-ux-pro-max）：先确定目标用户、商业目标、视觉情绪、信息层级。
- 主力做图：根据页面类型，调用对应的子参考落地设计。
- 特殊插槽（二选一，必要时才用）：
- 时间特别紧 →taste：牺牲丰富度，保核心体验。
- 要长期不漂移 →design-system-guide：对齐设计系统、组件化、可维护。 - 最后验收（qa-checklist）：走查视觉、交互、文案、性能、无障碍。
5 个之外还有一个 项目经理模式：只分配任务，不产出设计稿。
1. 定方向（ui-ux-pro-max）
每次被触发后，先花 1-2 轮简短思考/提问，把方向定下来。必须覆盖以下 5 点，输出一份《方向 brief》（200-400 字）：
- 目标用户：谁用？他们当前最大的痛点是什么？
- 商业目标：这个页面要解决什么业务问题？（获客、转化、留存、降本、品牌）
- 页面类型：落地页 / 产品后台 / 商品页 / 移动端 / 其他？
- 视觉情绪：3 个关键词，例如「专业、轻盈、可信」「潮酷、紧凑、沉浸」。
- 信息层级：列出 3-5 个必须出现的核心模块，按优先级排序。
如果用户已经给出明确方向，可直接引用，不必重复提问。
2. 主力做图
根据方向 brief 中的页面类型，读取对应 reference：
- 落地页 →
references/landing-page.md - 产品后台 / dashboard / SaaS →
references/product-backend.md - 商品详情页 / 电商 →
references/product-page.md - 移动端 H5 / 小程序 / App →
references/mobile.md
每个 reference 都包含该类页面的设计原则、常见模块、质感要点、输出格式。读取后按规范执行。
3. 特殊插槽（必要时才用）
在动手前或动手过程中，如果出现以下信号，切换到对应插槽：
3.1 时间特别紧 → taste
触发信号：用户说“今晚要”“来不及了”“先出一版”“不要精致，能看就行”。
读取 references/taste.md，按“快而不糙”原则执行：
- 只保留 60% 核心信息。
- 使用成熟组件/版式，不创新。
- 颜色、字体、间距用安全默认值。
- 输出低保真或中保真原型，优先可用性。
3.2 要长期不漂移 → design-system-guide
触发信号：用户说“要长期维护”“设计系统”“以后还会扩展”“团队多人协作”“不要一次性”。
读取 references/design-system-guide.md，按“系统优先”原则执行：
- 先定义 token（颜色、字体、间距、圆角、阴影）。
- 组件化思考：哪些元素会复用？抽象为组件。
- 输出必须包含 Design Token 表 + 组件说明 + 页面标注。
4. 最后验收（qa-checklist）
设计稿完成后，必须走一遍 references/qa-checklist.md 的验收清单。把问题分为：
- P0 阻塞：必须修（如主 CTA 看不到、关键信息缺失、移动端无法操作）。
- P1 优化：强烈建议修（如对比度不足、图标风格不一致、加载体验差）。
- P2 加分：可以暂缓（如微交互动画、暗色模式、空状态插画）。
验收结论附在最终回复末尾，格式：
## 验收结论
- P0：0 项
- P1：2 项（1. 标题行高偏小；2. 按钮 hover 状态缺失）
- P2：1 项（可增加骨架屏）
5. 项目经理模式
触发信号：用户明确说“帮我排一下任务”“拆一下工作”“谁做什么”“给我个项目计划”。
规则：
- 不画任何页面、不输出任何视觉稿。
- 只输出任务清单，每项包含：任务名、负责人/角色、交付物、截止时间建议、依赖项。
- 默认按本 skill 的 4 阶段拆分任务。
输出格式
所有视觉稿/原型必须按以下格式输出：
# [页面名称]
## 方向 brief
（目标用户、商业目标、视觉情绪、信息层级）
## 页面结构
（模块清单 + 简要说明）
## 视觉稿
（HTML/CSS 代码 或 结构化描述；鼓励用单文件 HTML + Tailwind CSS）
## 设计说明
（关键决策、token、组件、交互状态）
## 验收结论
（P0/P1/P2 清单）
优先输出可直接在浏览器打开的单文件 HTML（使用 Tailwind CSS CDN），并保存到用户 workspace。
默认视觉规范
如无特殊说明，默认使用以下安全基线：
- 主字体：系统无衬线字体栈
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif - 正文：
text-base（16px），行高leading-relaxed（1.625） - 标题层级：h1
text-4xl font-bold，h2text-2xl font-semibold，h3text-lg font-medium - 主色：Indigo 600（
#4F46E5）；背景：Slate 50（#F8FAFC）；文字：Slate 900（#0F172A）/ Slate 500（#64748B） - 圆角：卡片
rounded-xl，按钮rounded-lg，小标签rounded-full - 间距：模块间
gap-8或py-16，内容区max-w-6xl mx-auto px-6 - 阴影：卡片
shadow-sm hover:shadow-md过渡
这些只是默认起点；遇到具体品牌或情绪要求时，应调整。
