design 是做什么的？
打造那些看起来是经过精心选择，而非AI生成的界面。每个默认值都是一次被跳过的决策。本技能让每一个决策都充满目的性：首先撰写简报，然后构建到最低质量标准，最后对真实截图进行审查。
两种失败模式，第一种更糟：
- 通用化。 页面可属于其类别中的任何产品。它带有当前AI的默认风格，或者平淡无奇到无人记得。
- 杂乱无章。 每个元素都在表演。动效、渐变和装饰相互竞争，没有主次之分。
两种问题的解药都是一个强烈的想法，在一个位置表达，并置于一个严谨的系统中。节制不是目标，意图才是。
1. 选择模式
| 模式 | 使用场景 | 操作 |
|---|---|---|
| 构建(Build) | 新建页面、屏幕、组件、演示文稿或图片集 | 第2至5节 |
| 优化(Refine) | “让它更大胆、更安静、更简洁、更丰富多彩、更有活力” | 第6节 |
| 审查(Critique) | “审查这个”、“这个看起来对吗”、“打分” | references/critique.md |
| 打磨(Polish) | 在交付任何视觉内容之前 | 第7节 |
优化模式绝不重新设计。它保留品牌标识、文案以及请求之外的所有内容。如果请求需要重新设计，请明确说明并停止。切勿在两者之间妥协。
2. 首先加载上下文
- 读取仓库根目录下的
DESIGN.md、仓库的CLAUDE.md、现有令牌（global.css、tailwind.config.*、主题文件）以及.claude/image-generation/style.md。 - 简报优先。 当
DESIGN.md或用户指定了某个外观时，请严格遵循，即使该外观在“特征列表”中。以下规则仅管辖尚未做出的选择。 - 若无
DESIGN.md，请先探索仓库，然后最多提出三个关于持久事实的问题：谁在使用它、它必须实现什么目标、以及有何证据。切勿要求用户在抽象层面选择一种美学风格。相反，展示两个或三个选项。 - 将你了解到的内容写入
DESIGN.md，参考 references/design-md.md。后续会话不应再次询问。 - 一次更正就是一条固定规则。 当用户更正了一个视觉选择时，在同一轮对话中立即向
DESIGN.md添加一行“固定规则”。 - 仅使用手头的证据。 切勿捏造推荐信、客户标志、用户数量、指标或引用。标记占位数据，并列出供用户确认。
3. 编写简报（构建模式）
在编写代码之前，先在聊天中发布一份简短简报。这只需一分钟，却能防止产生通用化的结果。
-
设计阅读。 一行描述：“将此解读为面向[受众]的[界面]，处于[模式]模式，倾向于[方向]。”
-
界面模式。 每个界面选择一个模式，而非每个产品。开发者工具的落地页仍属于“说服”模式。
模式 界面 表达方式 变化 / 动效 / 密度 说服(Persuade) 落地页、定价、发布、作品集首页 一个宏大想法、真实图片、色块 7 / 6 / 3 操作(Operate) 应用、仪表盘、设置、管理后台 系统本身就是设计。无奇观 3 / 2 / 7 阅读(Read) 文档、文章、课程 字体承载页面 3 / 2 / 5 体验(Experience) 游戏、趣味学习、儿童、活动 角色、环境动效、幽默 8 / 8 / 4 三个拨盘取值范围为1到10。变化指从对称到大胆不对称。动效指从静态到电影级。密度指从画廊到驾驶舱。将语气词汇映射到它们：“极简”降低变化和密度，“花哨”或“活泼”提高动效，“密集”或“专业”提高密度。在
DESIGN.md中记录拨盘值。 -
场景句。 谁在何处并在何种光线下使用它。“一名夜班护士在昏暗的休息室里用手机查看排班表”决定了深色还是浅色。像“开发者工具意味着深色”这样的类别标签则不行。
-
理念句。 “[仅此主题拥有的事物]变成[一种视觉手段]。” 然后进行竞争对手测试：换用竞争对手的名称。如果句子仍然成立，说明理念过于通用。重写。
-
令牌。 四到六种命名颜色及一种颜色策略（references/color.md）。字体系列及其角色（references/typography.md）。一个布局概念，以一句话加一个ASCII线框图表示。动效级别。
-
论点（仅适用于说服模式）。 每个部分一个主张，并附有其证据。删除任何没有主张的部分。不要默认使用“英雄区、合作伙伴标志带、三个功能、行动号召”的套路。
-
对照特征列表检查。 对于简报中未涉及的每个维度，请阅读 references/tells.md。询问主题是否仅凭类别就能猜到，然后询问外观是否“类别+‘不寻常的外观’”就能猜到。如果任一答案是肯定的，请修改该部分，并说明改变了什么。
4. 构建到最低质量标准
将胆识集中在一个地方。让一个元素成为令人印象深刻的东西，保持其周围一切安静，并去除不为理念服务的装饰。当你剥离一个“特征”时，用真实的东西填充空间：尺度、图片、内容或色块。仅仅移除会导致页面空洞、单薄。
最低质量标准适用于每个界面，无需特意声明：
- 使用令牌，而非字面值。 颜色、字体、间距、圆角和动效作为
:root上的令牌存在。浅色和深色来自prefers-color-scheme，可通过data-theme覆盖。存在切换开关时，以用户选择为准。 - 对比度。 文本4.5:1，大文本、图标、控件和焦点环3:1。切勿在彩色背景上使用灰色文本。
- 字体。 最多两种字体系列。字号不超过五种。正文16px或更大，每行45到75个字符。标题在任何宽度下都能在两行内显示。
- 移动优先。 从320px宽度开始工作，16px间距，无横向滚动。点击目标为44px。输入框为16px以防止iOS缩放。切勿禁用缩放。
- 状态。 每个控件都有默认、悬停、焦点可见、激活、禁用、加载、错误和成功状态。每个异步区域都有加载、空和错误状态。
- 稳定性。 无布局偏移。动画或异步面板保持固定高度。网格中的卡片高度一致，底部固定。
- 切勿倾斜任何可点击元素。 倾斜仅用于装饰性印章和贴纸。
- 动效。 有目的、可中断、仅使用
transform和opacity，并且在prefers-reduced-motion下更轻柔。内容在不启用JavaScript的情况下可见。 - 图片。 采用统一风格的真实或生成艺术。角色和装饰艺术作为透明裁剪图输出，而非深色盒子。图片中不得嵌入文本。
- 文案。 简短、具体，并从用户角度撰写。视觉效果优于段落。
细节存在于参考文件中。仅读取任务所需的部分：
| 文件 | 涵盖内容 |
|---|---|
| references/typography.md | 选择字体、比例、尺度、显示字体、加载 |
| references/color.md | 颜色策略、OKLCH令牌、深色模式、对比度 |
| references/layout.md | 间距、框架、网格、层级、响应式和触摸 |
| references/motion.md | 是否动画、缓动、持续时间、性能、减少动效 |
| references/interaction.md | 状态、表单、最坏情况数据、感知速度 |
| references/copy.md | UX写作、错误、空状态、真实内容 |
| references/imagery.md | 艺术指导、生成艺术、照片、图标 |
| references/decks.md | 幻灯片演示和演讲 |
| references/tells.md | 过时的AI生成设计默认特征列表 |
5. 仔细审视
代码审查不是设计审查。渲染出来并审视。
- 运行页面并在375px和1440px处截图，对于在此处布局变化的页面还需在768px截图。当浅色和深色模式都存在时，截取两种模式的图。使用
playwright-cli、浏览器面板或会话可用的任何浏览器工具。 - 眯眼审视每张截图。主要元素、次要元素和组别应仍按此顺序清晰可辨。
- 寻找冲突：重叠、裁剪的横幅、不该换行却换行的文本、错位的图标、不均匀的网格、应该是2x2却出现3+1行的情况。
- 使用 references/critique.md 进行审查，按其修复顺序修复，并再次截图。三轮后停止，并报告遗留问题。
- 对于游戏和交互式作品，亲自体验。由子代理在移动宽度下进行游戏测试，能够发现阅读代码永远不会发现的问题。
- 保持开发服务器运行，并向用户提供URL。将最终截图放入PR：移动端和桌面端，浅色和深色模式。
当方向尚未确定时（例如字体、标志或调色板），请并排构建两到三个小型模型，让用户选择。然后构建被选中的方案。
6. 优化
每次优化都遵循相同的方法：评估当前状态，编写一句话的论点，在现有系统的词汇中应用它，截取屏幕截图，然后进行打磨。
| 请求 | 操作方式 |
|---|---|
| 更大胆 | 将目标提升到其相邻元素的信心水平：比例、重量、颜色承诺、图片。然后使其周围安静下来 |
| 更安静 | 一次去掉一个辅助元素。降低动效拨盘。将颜色合并为更少的角色 |
| 更简单 | 删除没有主张的部分。将文字减半。将段落变成一个视觉效果 |
| 更多色彩 | 在颜色策略阶梯上上移一步。切勿先添加第二种强调色 |
| 排版 | 根据 references/typography.md 重建比例和配对 |
| 布局 | 根据 references/layout.md 修复框架、左边距和节奏 |
| 添加动画 | 首先通过 references/motion.md 中的频率门槛。然后添加一个编排好的时刻 |
| 更清晰的文案 | 应用 references/copy.md |
| 响应式 | 优先为375px重新设计：单列、真实的点击目标、无内容被裁剪 |
| 强化 | 输入最坏情况数据，并添加 references/interaction.md 中缺失的状态 |
7. 发布清单
在宣布任何视觉工作完成之前，请执行以下检查：
-
DESIGN.md反映了所做的决策和任何进行的更正 - 375px和桌面端的截图（浅色和深色模式）显示无冲突或裁剪
- references/tells.md 中的任何内容均未出现，除非简报中明确指定
- 每个控件都有其状态，每个异步区域都有加载、空和错误状态
- 最坏情况数据渲染正常：长名称、零个和单个项目、大数字
- 键盘可访问所有元素，焦点可见，并且尊重减少动效设置
-
accessibility技能报告主要主题上没有严重违规 - 图片风格统一，适当剪裁，并使用
web-optimize进行优化 - 文案精简至用户所需内容，无任何捏造的证明
- 开发服务器正在运行，并且PR中包含了截图
相关技能
accessibility使用 axe-core 跨宽度、方案和主题审计 WCAG 2.2 AA 标准。image-generation通过锁定调色板的style.md生成艺术。background-removal进行裁剪。web-optimize用于输出。architecture在其 web 参考文档 中保存了站点的堆栈默认值。
致谢
本技能改写并整合了来自Anthropic的 frontend-design 技能（Apache-2.0）、Paul Bakaus的Impeccable（Apache-2.0）、Emil Kowalski的设计工程技能（MIT）以及Leonxlnx的 taste-skill（MIT）的理念。未复制任何文本。每个参考文件均注明其规则的来源。