design-reference — 成为参考而非模板的界面设计是做什么的？

一个界面只有当了解该领域的人认出它是为这个产品并由顶尖专家所制作时，才算成为参考。敌人的是默认值：任何模型为任何类似需求所产生的输出。

0. 项目规则

任何渲染作品的第一步——屏幕、组件、HTML 文档、Artifact、PDF、幻灯片、图表（cloud-diagram）、横幅——是扫描项目的设计系统，每个项目每会话一次：

python3 -I ~/.claude/skills/design-reference/scripts/sweep.py <root>         # 摘要
python3 -I ~/.claude/skills/design-reference/scripts/sweep.py <root> --css   # 输出 :root 包含 --ds-*

它会读取书面规范（DESIGN.md、docs/design*）、令牌（tailwind.config.*、包含 :root/@theme 的 CSS、*.tokens.json）、组件主题、package.json、components.json、Storybook 和 Figma 链接，并返回裁定：项目（作品佩戴其令牌）或中性（团队的统一中性调色板）。--css 输出 --ds-bg --ds-surface --ds-fg --ds-fg-2 --ds-accent --ds-border --ds-font-display --ds-font-body --ds-font-mono 以及暗色块；团队的模板读取这些变量。--json 返回完整发现。冲突优先级：规范 > 令牌 > 组件。每页一个系统。用一句话说明作品佩戴哪个系统以及在哪里找到它。客户或第三方的品牌：先询问。详细信息参见 references/design-system-sweep.md。

然后读取新屏幕将使用的共享组件。**已经承诺的需求和视觉世界胜过你的任何品味和这里的任何规则。**优化保留身份、复制和行为；重新设计替换整个视觉世界——永远不要打磨被丢弃的外观。项目自身的 .claude/skills/ 中的设计技能优先于此技能。

没有 DESIGN.md 的项目不一定是绿地项目：证据是代码和现有屏幕，而不是文件名。

1. 表面模式（决定后续所有内容）

根据请求的表面选择，而非产品：

模式	访客的成功	示例	规则
说服	决定并行动	Landing Page、定价、活动	注意力、证据、行动号召——设计就是产品
操作	完成任务	应用、仪表盘、管理、编辑器、设置	可扫描性、一致性、原生预期；品牌存在于细节中
阅读	理解某物	文档、文章、变更日志、帮助	面向理解的结构，然后是阅读舒适度
体验	身处作品之中	作品集、画廊、博物馆、展示	作品从首屏引领；界面退居幕后

工具的 Landing Page 是说服模式；时尚品牌的文档是阅读模式；博物馆导览是体验模式。

2. 方向先于代码（双重传递，必须执行）

传递 1——紧凑计划，在打开任何代码文件之前：

主题： 一句话：这是给谁的，这个屏幕的单一任务是什么，以及在这个这个主题的世界中（材料、工具、词汇、工艺品）什么能成为视觉选择。
颜色： 4-6 个命名值（十六进制或 oklch），带有每个颜色的语义角色。
字体： 2+ 角色——一个有特色的显示字体（谨慎使用），一个互补的正文字体，一个用于数据的实用字体（如果需要）。永远不要使用你会在任何其他项目上使用的配对。
布局： 一句话的概念 + ASCII 线框图。比较两个备选方案。
标志性元素： 屏幕会被记住的单个元素。所有大胆都放在那里；其余部分保持安静和自律。
动效： 一个精心编排的时刻，或者没有。说明是哪个。

传递 2——自我批判。 针对每个条目，问：“我会为另一个产品的类似需求产生这个吗？”如果会，那就是默认值，不是选择——重写它并说明改变了什么。只有在那之后才开始编码，从计划中推导出每种颜色和字体。

当今 AI 默认产生的三种外观：(1) 奶油色 #F4F1EA + 高对比度衬线体 + 赤陶色；(2) 近黑色 + 一种酸性强调色（石灰绿或朱红）；(3) 薄规则、零圆角、密集列的大报风格。如果需求要求它们，这些都是合法的。在自由轴上，不要将自由花在它们上。

如需样式、调色板和字体配对目录（带本地搜索），使用 ui-ux-pro-max (python3 scripts/search.py "<domain> <product>")；它是一个参考引擎，不是艺术总监——决定权仍在你手中。

3. 令牌是真相的来源

三层：原始 → 语义 → 组件。组件从不读取原始值或原始十六进制；它读取 --color-surface-raised，而不是 --gray-100。
格式：项目有流水线时使用 W3C DTCG 2025.10（tokens.json）；否则使用 :root 上的 CSS 自定义属性，以及在 @media (prefers-color-scheme: dark) 和 [data-theme] 中设置的暗色模式。
颜色尽可能使用 oklch；对比度应测量（APCA 或 WCAG），而不是估算。
暗色主题是亮度映射，而非反转。
完成后，如果项目没有 DESIGN.md，主动提供生成一个（YAML 中的令牌和每个值的理由，用散文形式说明）——这是确保下一会话与本会话一致的关键。

缩放、组件规范（变体、尺寸、状态及优先级、组件结构）以及关于 shadcn/Tailwind/暗色模式的说明：参见 references/tokens-and-components.md。生成 DTCG + CSS/Tailwind 中的完整系统：sumi:tokens。

4. 构建

技术栈和组件：项目的。shadcn/Tailwind → references/tokens-and-components.md 以及通过 context7 的实时文档；来自 Figma 的设计 → figma:figma-design-to-code（MCP）或项目自己的本地技能（例如 implement-from-figma、refactor-frontend-component）；写入 Figma → figma:figma-use。
原生移动端：在品牌之前，尊重平台（HIG / Material）。
云或基础设施架构图（AWS、OCI、GCP、Azure、Cloudflare）：始终使用 cloud-diagram。它是该任务的设计技能；复制其工具包（该技能 references 中的 template.html）并使用其 render.sh 进行度量。不要使用 mermaid、通用框或外部图像图标。
从一开始就使用真实内容：测试短、中、极长的文案；空状态；加载中；错误；无权限。Lorem 占位符是缺陷。
文案是设计材料：控件告诉用户会发生什么（"保存更改"，而不是"提交"）；从按钮到 toast 使用同一个动词；错误说明发生了什么以及如何退出；空状态是行动的邀请；使用主动语态和句子大小写。
CSS：注意自相冲突的特异性（.section × .cta），永远不要使用 transition: all，默认只使用 transform/opacity 进行动画。
浏览器表面也是设计：文本选择、插入符、滚动条、焦点、下划线偏移、表格数字。根据调色板主题化它们——这是页面被构建的最便宜标志。

产品 UI 执行伴侣

对于原生或响应式产品 UI，使用可用的 mobile-design-studio 技能作为唯一的可选设计伴侣：小型实现单元、移动端人体工程学（触摸目标、安全区域、键盘、文本缩放、返回）、状态/恢复检查和平台证据。design-reference 仍然是唯一的设计方向来源：重用其已批准的需求、令牌和组件；不要运行第二套品牌/方向流程或创建重复的令牌文件。仅读取当前单元所需的伴侣参考。它不是幻灯片、艺术、海报或云图的路径；那些保留其专用技能。

从选定技能的原始清单路径解析伴侣的目录，永远不要从生成的提示缓存或假设的 ~/.claude 安装中解析。如果伴侣缺失或仅手动，不要宣传或自动加载它；继续使用项目方法。项目技能和强制性的平台/Figma 先决条件（例如 Expo 概述、React Native 和 Figma design-to-code/use）仍然适用；它们不是可选的竞争性设计方向。保持两个设计技能的上限：此方法加一个伴侣，永远不要额外的 Sumi/UI 样式栈。

5. 质量底线（在结果中验证，而非意图中）

在编辑 UI 之前立即阅读 references/quality-floor.md。不可协商的点：

对比度 ≥ 4.5:1（文本），≥ 3:1（大号文本）；次要文本在彩色表面上时，应从该表面的自身色调中着色，永不使用灰色。
所有可交互元素上有可见焦点；永远不要在未提供替代方案的情况下移除轮廓。
触摸目标 ≥ 44×44（原生）/ 24×24 CSS px（Web），目标之间 8px。
尊重 prefers-reduced-motion；动画可中断；没有任何键盘触发的动画。
响应式到 320px，无水平滚动；全出血布局中的安全区域。
图像声明尺寸；字体使用 font-display；长列表虚拟化。
所有状态：悬停、激活、焦点、禁用、加载中、错误、空。
零个 emoji 作为图标；图标来自同一库、同一描边、同一重量。

在有限的轮次中检查，而非循环中： 构建整个东西，同时捕获桌面和移动端（如果有浏览器，通过截图），一次性修复所有内容，最多再确认一轮，然后停止。开放式 QA 花了所有人的钱却做得不如 sumi:audit 好。

6. 规则化动效（Emil Kowalski）

应该动吗？ 每天 100+ 次（快捷键、调色板）→ 永不。每天数十次（悬停、列表导航）→ 大幅减少。偶尔（模态框、抽屉、toast）→ 标准。很少（引导、庆祝）→ 可以令人愉悦。
一个声明的目的：空间连续性、状态指示、解释、反馈、避免硬切换。"看起来不错"不是频繁看到某物的理由。
缓动： 进入/退出 → 强缓出 cubic-bezier(0.23， 1, 0.32， 1)；屏幕上移动/变形 → 缓入缓出 cubic-bezier(0.77， 0, 0.175， 1)；悬停/颜色变化 → ease；持续运动 → linear；iOS 抽屉 → cubic-bezier(0.32， 0.72， 0, 1)。UI 中永远不要使用缓入。
持续时间： 按钮 100–160ms；工具提示 125–200ms；下拉 150–250ms；模态框/抽屉 200–500ms；UI 始终 < 300ms 市场营销除外。
没有任何东西凭空出现：scale(0.95) + opacity 0，而不是 scale(0)。弹出框从其触发器缩放（transform-origin）；模态框保持居中。:active 使用 scale(0.97)。每个部分使用相同的入场方式是反模式；一个精心编排的时刻不是。

7. 艺术、画布与创意工作

当请求是海报、封面、图形作品、生成艺术、3D 视觉或"没有 UI 需求的美丽事物"时，方法改变：首先是视觉哲学（1-2 个词命名的运动 + 4-6 段关于空间、颜色、材料、规模、节奏、构图），然后是执行。对主题的引用是微妙的——了解它的人能感受到，其他人看到的是精妙的作品。90% 视觉，10% 文字。没有东西离开边距，没有东西重叠。

表面	工具
静态 PNG/PDF（海报、艺术、封面）	`vendor/canvas-design`（Anthropic）
2D 生成艺术、流场、粒子	`vendor/algorithmic-art`（p5.js、可重复种子、滑块）
3D / 着色器 / 交互式场景	three.js（r160+）、GLSL `ShaderMaterial`；始终在拆卸时调用 `dispose()` 和移除监听器
社交媒体/广告/横幅/印刷作品	`references/identity-and-pieces.md`（尺寸、安全区域、行动号召）+ 以准确尺寸捕获的 HTML
幻灯片	`slides`
云架构图	`cloud-diagram`
品牌指南、调色板、标志规则	`references/identity-and-pieces.md`；品牌声音和文案 → `writing`
AI 生成的标志、图标、身份设计稿	`design`（claudekit：使用 API 的生成脚本，需要密钥）
无限画布上的并排变体	`superdesign` 插件（付费；需要登录——由所有者决定）
生成的图像/视频	`sumi:generate` 或配置的图像 MCP

永远不要复制可识别艺术家的作品；引用其影响，创作你自己的。字体：下载并自托管一个具有正确字符集的字体；"最接近"的系统字体是失败，而非后备方案。

8. 审计与修复现有内容

快速评分与顶级修复：sumi:roast。完整审计（启发式、认知、流程）：sumi:audit。WCAG 2.2 AA 可访问性：sumi:a11y。Web 检查清单（可访问性、表单、动效、排版、性能、国际化）：references/quality-floor.md 第 B 节，输出为 file:line。
修复生成的 UI 代码：sumi:fix。动效审查：使用 | 之前 | 之后 | 原因 | 表，每个发现一行。
永远不要在同一个会话中加载超过两个设计技能：描述会竞争，上下文膨胀而不会改善答案。

9. 交付

模式             [说服 | 操作 | 阅读 | 体验]
方向             [主题 · 命名调色板 · 字体配对 · 标志性元素 · 动效]
默认值           [你在自我批判中重写的内容及其原因]
令牌             [文件和层；DESIGN.md 已生成/更新？]
底线             [来自 §5 的每个检查项及测量值，而非

design-reference — 成为参考而非模板的界面设计