网站设计 是做什么的？
每个项目都有自己的外观，基于其主题和真实参考。此技能决定了工作顺序和 此项目的文件；工艺来自其旁边安装的设计技能。
关卡
在 design/DESIGN.md → 设计输入 中的四行全部填写完毕之前，不得编写任何页面或组件代码。顺序是：每个输入都有一个来源，或“无”，由你填写。对现有设计进行小幅调整是唯一的例外（请参阅规则）。
1. 按此顺序收集输入
每一步都会读取前一步决定的内容。较早的输入始终优先于较晚的输入。
- 人类的参考资料和设计文档（最高优先级）。
- 阅读
design/DESIGN.md。如果已填写（颜色令牌有值），则以此为基础：转到步骤 3。 design/references/：读取每张图片一次，并将每张图片的一行写入 DESIGN.md → 参考 (文件 → 采用: … · 避免: …)。之后根据该文本工作。- 人类在对话中给你的链接、品牌指南、标志、颜色或字体，以及 PROJECT.md。
- 简介为空？在一条消息中向人类提出 3 个简短问题：它是什么以及为谁设计；三个词描述感觉； 他们喜欢或不喜欢的网站。将答案写入 DESIGN.md → 简介。
- 写入 设计输入 → 参考（你找到的内容，或“无”）。
- 阅读
- 如果步骤 1 没有提供设计语言：一个 awesome-design-md 基础。
{{run}} design:md list按类别打印目录，每个条目一行（--category <word>缩小范围）。 提出 2–3 个适合简介的选项，每个用一句话说明原因，然后让人类选择。{{run}} design:md use <名称>将其复制到design/DESIGN.md并附上致谢。将每个品牌名称、标志 和商标替换为此项目自己的。- 如果步骤 1 提供了设计语言，或者 DESIGN.md 已以某个条目开头（其标题声明），则跳过此步骤。
- 写入 设计输入 → 基础（该条目，或“无：基于人类的参考资料构建”）。
- 品味技能 (技能
design-taste-frontend)：艺术方向。- 为此页面运行其步骤 1–4（简介和主题清单、论点、方向、创意）。
- 当步骤 1–2 确定了颜色和字体时，使用
--keep palette,type处理，使其在设计语言内部规划构图、图像和 章节，而不是替换它。 - 将所选方向写入 DESIGN.md 的部分（主题、布局、组件），以及 设计输入 → 方向（方向 ID 和一行原因）。
- 满足此网站需求的真实网站。
- 在
references/project-types.md中打开你的项目类型部分（rg -n "^## " <file>），并且，针对 此页面需要的特定模式（定价、结账、文档、仪表板、引导流程…），查看references/inspiration.md中的图库。 - 在浏览器工具中研究 2–3 个针对这些模式的真实网站（层次结构、密度、它们如何解释事物）。 将每个网站的一行内容写入 DESIGN.md → 参考。
- 写入 设计输入 → 参考网站。
- 在
2. 构建
- 令牌： 将 DESIGN.md 的令牌映射到 {{#tanstack-start}}
src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}} (shadcn/ui 的--background、--primary、--radius…){{/shadcn}} 中的主题。组件中不得使用原始十六进制值。 - 构建 使用技能
frontend-design，遵循品味技能的方向表（其步骤 5–6）。 {{#shadcn}} 使用 shadcn/ui 组件（技能shadcn；{{dlx}} shadcn@latest add <组件>）。 {{/shadcn}} 组件和图标选择：references/libraries.md。 - 内容： 真实内容。要求提供，或编写具体的纯文本。不得使用 lorem ipsum、虚假标志、统计数据或 客户评价。让一件事令人难忘，并保持其余部分简洁。
- 基线： 从 360px 开始的响应式、可见焦点、
prefers-reduced-motion、WCAG 2.2 AA 对比度，以及空状态、 加载状态和错误状态。
3. 审查
- 品味技能的关卡和外观步骤（其步骤 7–8），在 390、768 和 1440px 处截图（技能
playwright-cli{{#next}}，或针对开发服务器的next-dev-loop{{/next}}）。 - 技能
web-design-guidelines用于可访问性和用户体验，技能writing-guidelines用于每段文案，以及 技能web-perf用于主要页面的加载性能。 - 修复前 3 个问题，然后在完成之前删除一个装饰。
规则
- 从参考资料中学习原则（层次结构、节奏、密度、字体、颜色）。切勿复制网站的布局、文本、 标志、插图或代码，也切勿发布其他品牌的名称、标志或商标。
- 人类的简介和参考资料优先于 awesome-design-md 基础，后者优先于品味技能的默认值，后者优先于你自己的品味。
- 对现有设计进行小幅视觉调整（间距、调色板内的颜色、一个组件）属于快速更改： 遵循 DESIGN.md，不重新运行输入。