AI Skills
interface-design

interface-design

热门

以工艺为先的界面设计，适用于仪表盘、管理面板、SaaS应用、工具、设置页面、数据界面和交互式产品。在设计、构建、审查、审计或优化产品UI时使用，其中视觉工艺、布局层级、设计令牌、状态、视觉方向或设计系统一致性至关重要。不适用于营销页面、落地页、活动或纯品牌工作。

5125Star
348Fork
更新于 2026/6/12
获取 Skill源代码

相关 Skills

ui-to-vue24万card-xiaohongshu8.7万design11万
SKILL.md
只读
名称
interface-design
描述

以工艺为先的界面设计，适用于仪表盘、管理面板、SaaS应用、工具、设置页面、数据界面和交互式产品。在设计、构建、审查、审计或优化产品UI时使用，其中视觉工艺、布局层级、设计令牌、状态、视觉方向或设计系统一致性至关重要。不适用于营销页面、落地页、活动或纯品牌工作。

界面设计

以顶级设计团队的工艺构建产品界面——Linear、Vercel、Stripe、Apple。它们与普通输出的区别不在于天赋，而在于每个决策都经过深思熟虑，层级清晰无误，上百个细节同时正确。本技能将带你达到这一水平。

适用范围

适用于： 仪表盘、管理面板、SaaS应用、工具、设置页面、数据界面。

不适用于： 落地页、营销网站、活动、纯品牌工作。请使用营销/前端设计技能处理这些。

本技能自成一体：方向、视觉层级、设计系统架构，以及交付生产级UI所需的打磨和动效要点，一应俱全。

问题所在

你会生成普通输出。你的训练数据见过成千上万个仪表盘，模式根深蒂固。你可以遵循整个流程——探索领域、命名标志、陈述意图——但仍然产出模板：暖色配冷结构，友好字体配通用布局。

这是因为意图存在于文字中，但代码生成却依赖模式。两者之间的鸿沟让默认值胜出。流程有帮助，但不能保证工艺。你必须自我觉察，并掌握默认值不会提供的具体手法。

标准： 如果另一个AI在类似提示下会产出基本相同的输出，你就失败了。不是为了不同而不同——而是因为界面源自这个用户、这个任务、这个世界。当你从默认值出发设计时，一切看起来都一样，因为默认值是共享的。

默认值藏身之处

默认值伪装成基础设施——那些感觉只需工作、无需设计的部分。

  • 排版感觉像容器。 但字体不是承载你的设计，它就是你的设计。标题的粗细、标签的个性、段落的质感，在任何人阅读一个字之前就塑造了产品的感受。使用你惯用的字体意味着你没有在设计。
  • 导航感觉像脚手架。 但导航就是产品——你在哪里、能去哪里、什么重要。漂浮在空间中的页面是组件演示，不是软件。
  • 数据感觉像呈现。 但屏幕上的数字不是设计。它对观看者来说意味着什么？进度环和堆叠标签都显示“3/10”——一个讲述故事，一个填充空间。
  • 令牌名称感觉像实现细节。 但--ink和--parchment唤起一个世界；--gray-700和--surface-2唤起一个模板。只看你的令牌的人应该能猜出这是什么产品。

没有结构性的决策。一切都是设计。当你停止问“为什么是这个？”的那一刻，默认值就接管了。

意图优先

在接触代码之前，回答这些问题。除非方向需要用户确认，否则保持简洁的工作简报。

  • 这个人是谁？ 不是“用户”。是真实的人。他们打开这个界面时身处何处？5分钟前在做什么，5分钟后要做什么？早上7点喝咖啡的老师，与午夜调试的开发者，与会议间隙的创始人，截然不同。
  • 他们必须完成什么？ 动词。批改这些作业。找到故障部署。批准付款。答案决定了什么主导、什么跟随、什么隐藏。
  • 这应该感觉如何？ 用有意义的词语描述。“干净现代”毫无意义——每个AI都这么说。像笔记本一样温暖？像终端一样冷峻？像交易大厅一样密集？像阅读应用一样宁静？这决定了颜色、字体、间距、密度——一切。

如果提示过于模糊，无法确定用户、任务和感受，请提出一个简洁的问题。如果上下文允许做出负责任的假设，简要说明并继续。

意图必须是系统性的。 说“温暖”却使用冷色，这不是贯彻到底。如果意图是温暖：表面、文本、边框、强调色、语义色、字体——全部温暖。如果密集：间距、字号、信息架构——全部密集。对照既定意图检查每个令牌。对于每个选择——布局、色温、字体、间距比例、层级——你必须能够说出为什么。“这很常见”或“这有效”意味着你默认了。

产品领域探索

这是默认值被抓住——或未被抓住——的地方。通用路径：任务类型 → 视觉模板 → 主题。工艺路径：任务类型 → 产品领域 → 标志 → 结构+表达。区别在于在开始任何视觉思考之前，花时间沉浸在产品的世界中。

在提出任何方向之前，产出以下全部四项：

  • 领域——来自该产品世界的概念、隐喻、词汇。不是功能——是领域。至少5个。
  • 色彩世界——这里自然存在哪些颜色？不是“暖”或“冷”——要深入实际世界。如果这个产品是一个物理空间，你会看到什么？列出5个以上。
  • 标志——一个（视觉、结构或交互）元素，只能存在于这个产品中。如果你说不出一个，继续探索。
  • 默认值——该界面类型的3个明显选择，包括视觉和结构。你无法避免尚未命名的模式。

测试： 移除产品名称后阅读你的提案。有人能识别出它的用途吗？如果不能，深入探索。

尽可能渲染

如果会话中可用的内联视觉渲染工具（例如在对话中内联渲染HTML或SVG的show_widget/visualize工具），优先展示设计而非描述。困在文字中的方向，其价值远不及可观看的版本。这是有条件的：当没有此类工具时（CI、无头代理、纯终端），回退到代码、令牌和书面提案。切勿假设工具存在；检查，然后使用。

在三个时刻渲染：

  1. 提出方向时。 在建议+询问块旁边，渲染一个小型实时样本：调色板作为实际色板、真实字体下的字号比例、表面层级步骤作为堆叠卡片、标志元素作为真实组件。用户应该看到“像笔记本一样温暖”，而不是读到文字。
  2. 设计组件时。 渲染实际组件（或紧凑的前后对比，两个变体并排），使工艺决策——间距、边框、层级、状态——可见，而非断言。在相关处渲染真实状态（默认、悬停、空状态、错误）。
  3. 批评或审计时。 将当前版本和改进版本一起渲染，以展示差距，而非叙述。

渲染时的规则：

  • 小部件仅显示视觉内容。所有推理、领域探索、拒绝的默认值列表和建议保留在你的响应文本中——切勿将文字粘贴到小部件中。
  • 匹配渲染工具自身的设计系统契约（如果有，加载其read_me/指南）。使用其主题变量，使样本继承亮/暗模式，并原生融入宿主环境。不要与宿主界面冲突。
  • 样本仍必须通过下面的检查。渲染的默认值仍然是默认值——渲染是让工艺被看见，而非替代工艺。
  • 这渲染到对话中，而非项目。实际实现仍通过正常编辑进入代码库。

要点：将“这是我的想法”和“这是它的样子”之间的循环压缩成一条用户可反应的消息。

视觉层级与构图

“这看起来像设计的”与“这看起来像生成的”之间最大的区别。默认值产生扁平化——所有元素大小、粗细和间距相同，导致没有主导，视线无处可去。工艺产生层级——视线立即知道什么重要。这些是具体手法，而非感觉。

每个视图一个焦点

每个屏幕都有用户前来做的一件事。这件事通过大小、对比度、位置或周围空间占据主导。当所有元素平等竞争时，没有赢家，界面读起来像停车场。在构建之前，说出焦点元素。然后让它胜出：更大、更高对比度，或被空白环绕。有意降级其他所有元素。

字号比例是比率，粗细胜于大小

不要凭感觉选择字号。选择一个比率并逐步应用：~1.2（小三度）用于密集/宁静的UI，~1.25用于大多数产品UI，~1.333用于表现力。从14–16px正文开始，产生明显不同的比例，而非15/16/17的模糊。14px基础以1.25比率：caption 11 · body 14 · h4 16 · h3 18 · h2 22 · h1 28 · display 44+。四舍五入到整数像素并匹配你的间距网格。

Apple/Linear的手法：粗细和颜色比大小更能构建层级。 单个14px大小通过粗细+透明度即可容纳三个层级——value: 600 / primary，label: 500 / secondary，meta: 400 / muted——比两个相差2px的常规粗细区分得更清晰。同时使用三个杠杆（大小、粗细、颜色/透明度），切勿仅依赖大小。如果你眯眼无法区分标题、正文和标签，层级太弱。

示例——指标，扁平vs有决策。扁平： Revenue / $48,200 均为14px常规灰色，三个相同框，无焦点。有决策： REVENUE 11px/500/muted/字间距 · $48,200 28px/600/primary/tabular-nums（主角） · ↑12% 12px/500/success。相同数据，相反可读性——数字通过大小+粗细+一个强调色主导，标签被降级，次要指标降至更低层级。

密度是一个决策，以px表达

Linear紧凑；Stripe通透。两者都不是默认——都是选择，且选择是同一数字重复出现。预先决定密度并命名数值：工具面板12–16px内边距感觉像工作台般紧凑；相同卡片24px内边距感觉像宣传册。同一数字在一个上下文中正确，在另一个中可能懒惰。有意选择，然后坚持。

空间节奏——不均匀呼吸

优秀的界面不会均匀地间隔所有元素。密集的控制区域让位于开放的内容；重的元素与轻的元素平衡；视线有目的地移动。单调的布局——相同卡片大小、相同间距、相同密度——是无人决策的声音。有意变化节奏：紧密分组相关事物，然后在组之间放置真正的空气。

比例传达含义

280px侧边栏与全宽内容相邻表示“导航服务于内容”。360px侧边栏表示“它们是同级”。具体数字声明了什么重要。如果你无法阐述比例在说什么，它就没有在说任何东西。选择表达关系的宽度和比例。

分布与克制（“昂贵”的外观）

  • ~60/30/10：主导中性表面、次要色调和约10%强调色。颜色是稀缺资源——屏幕大部分是结构。
  • 一个强调色，有意使用，胜过五个无思考的颜色。灰色构建结构；颜色传达（状态、操作、身份）。无动机的颜色是噪音。
  • 通过空间和粗细构建层级，而非线条。 在边框和分隔线之前，优先使用空白和色调变化。最优质的界面大多是无形的结构。
  • 大字号的光学调整：随着字号增大收紧字间距（标题略微负字距）；正文行高放宽以提高可读性（~1.5）。紧凑的字体读起来有工艺感；32px标题上的默认字距读起来像文档。

工艺基础

微妙分层（支柱）

无论方向如何，这适用于一切。你应该几乎注意不到系统在运作——当你查看Vercel的仪表盘时，你不会想“漂亮的边框”，你只是理解结构。无形的工艺是有效的工艺。

表面层级。 表面堆叠：下拉菜单位于卡片之上，卡片位于页面之上。构建一个编号系统——基础，然后递增层级。每次跳跃仅增加几个百分点的亮度——例如暗模式基础 → +7% → +9% → +12%；亮模式保持明亮并添加阴影。单独看几乎看不出一步，但堆叠后，层级浮现。你感觉到的细微变化，而非看到。

  • 侧边栏： 与画布背景相同，而非不同颜色。不同颜色将空间分割为“侧边栏世界”和“内容世界”。微妙的边框就足够了。
  • 下拉菜单/弹出框： 比其父表面高一个层级，否则会融合，失去分层。
  • 输入框： 比周围稍暗，而非更亮。输入框是内嵌的——它们接收内容。较暗的填充表示“在此输入”，无需粗边框。

边框。 当你不寻找它们时应该消失，但当你需要结构时应该可找到。低透明度rgba与背景融合，定义边缘而不引人注目；实色十六进制边框相比之下显得刺眼。暗模式大约rgba(255,255,255,0.06–0.12)，亮模式略高。构建一个递进——标准、更柔和的分隔、强调、焦点环——并将强度与边界的重要性匹配。

眯眼测试： 眯眼看界面。你仍应感知到层级——什么在什么之上，部分如何划分——但没有任何东西跳出来。没有刺眼的线条，没有突兀的变化。只有安静的结构。如果这一点做错了，其他都不重要。

无限表达

每个模式都有无限表达——没有两个界面应该看起来相同。 指标显示可以是主角数字、内联统计、迷你图、仪表、进度条、比较增量或趋势徽章。相同的侧边栏宽度、相同的卡片网格、相同的图标-左-数字-大-标签-小指标框每次出现立即表明AI生成且令人遗忘。Linear的卡片看起来不像Notion的；Vercel的指标看起来不像Stripe的。相同概念，无限表达。在构建之前，问：用户在这里做的一件事是什么？什么产品出色地解决了类似问题？

色彩存在于某处

每个产品存在于一个世界中，那个世界有颜色。在拿起调色板之前，走进这个空间的物理版本——什么材料、什么光线、什么物体？你的调色板应该感觉像是来自某处，而非应用于某物。温度是一个维度；还要问安静还是响亮、密集还是宽敞、严肃还是有趣、几何还是有机。交易终端和冥想应用都是“专注”——完全不同的专注类型。

编写每个组件之前

每次你编写UI代码——即使是小的添加——都要陈述：

意图：     [这个人是谁，他们必须做什么，应该感觉如何]
层级：     [焦点元素，以及它如何胜出——大小/粗细/对比度/空间]
调色板：   [来自你探索的颜色——以及为什么适合这个世界]
深度：     [边框/微妙阴影/分层——以及为什么适合意图]
表面：     [你的层级比例——以及为什么是这个温度]
排版：     [字体 + 大小/粗细/颜色杠杆——以及为什么]
间距：     [基础单位 + 选择的密度]

这个检查点是强制性的。如果你无法解释每个的为什么，你就在默认——停下来思考。

使用已有的

AI降低代码库质量最常见的方式：手写已经存在的东西。一个定制的<div onClick>“按钮”旁边是项目真实的Button。一个从头开始的下拉菜单没有键盘支持，旁边是已安装的原始组件。一个14个类的Tailwind字符串复制粘贴到每个卡片上，而不是使用已有的组件或令牌。每一个都是同样的失败——生成新的而不是使用已有的——结果是不一致、不可访问且不可维护。在构建控件或样式化元素之前，查看项目已经提供了什么。

控件：原生 → 原始组件 → 手写

  1. 首先使用原生HTML，如果可行。<button>是按钮；<a>是链接；<input type="text">、<dialog>、<details>存在。永远不要用<div onClick>代替平台已提供的——你会免费失去焦点、键盘和语义。
  2. 使用经过实战检验的无头原始组件，用于任何有状态且难以正确实现的东西——选择、组合框、对话框、弹出框、工具提示、下拉菜单、标签页、日期选择器。这些提供了键盘导航、焦点管理、ARIA以及碰撞/定位，需要数天才能正确复制。使用生态系统已信任的（例如React中的Radix UI、React Aria、Ark、Headless UI、Vaul、cmdk；其他框架中对应的可访问原始组件），然后根据你的方向进行样式化。“构建自定义”意味着组合和样式化一个原始组件，而不是从头编写行为。
  3. 仅作为真正的最后手段手写——没有原始组件适合，或没有依赖预算。然后你需要提供完整的行为契约：键盘导航（方向键、Enter、Escape）、焦点陷阱/返回、完整的ARIA角色和状态、点击外部、以及覆盖层的滚动锁定。缺少这些的样式化控件是损坏的，无论看起来多好。

样式化：系统 → 组件 → 令牌 → 工具类

  1. 如果项目有设计系统，使用它。 shadcn/Button、CVA变体集、主题、组件库——使用<Button variant="…">和现有变体，而不是编写一次性样式。匹配代码库的样式约定（Tailwind、CSS模块、CSS-in-JS），不要引入你自己的。
  2. 当样式化元素重复时，提取一个组件。 九个按钮上相同的工具类字符串是重复，不是设计。一个组件（或一个CVA/变体）拥有它；调用点保持干净。在第二次真正复用时提取，而非第一次。
  3. 绑定到语义令牌，而非硬编码字面量。 bg-card border-border text-muted-foreground，而不是bg-white border-gray-200 text-gray-500。硬编码的gray-200/#fff/px-4原始值是Tailwind形式的随机十六进制——它们破坏主题和暗模式，并表明没有系统。（参见下面的令牌架构。）
  4. 内联工具类用于真正的一次性情况——仅使用一次的布局微调。混乱的标志是相同的长className到处喷洒；那是缺少组件或令牌，而非样式化。

设计系统要点

每个工艺决策背后的令牌、间距和深度架构。

  • 令牌架构。 每种颜色追溯到一小套原色：前景（文本）、背景（表面）、边框、品牌、语义（破坏/警告/成功）。没有随机十六进制——一切都映射到原色。
  • 文本层级——四个级别。 主要、次要、三级、静默（默认/支持/元数据/禁用）。仅使用两个意味着层级太平。
  • 间距。 选择一个基础单位（4或8px），仅使用倍数。按上下文缩放：微（图标间距）、组件（按钮/卡片内）、部分（组之间）、主要（区域之间）。随机值表明没有系统。
  • 内边距。 对称——如果一侧有值，其他侧匹配，除非内容真正需要不对称。
  • 深度——选择一个并坚持。 仅边框（干净、技术性、密集工具）·微妙阴影（平易近人）·分层阴影（高级、立体）·表面颜色变化（色调，无阴影）。不要混合策略。
  • 边框半径——一个比例。 小用于输入/按钮，中用于卡片，大用于模态框。不要随机混合尖锐和圆润。
  • 控件令牌。 输入/选择/复选框获得专用的背景、边框和焦点令牌——不要重用表面令牌，以便独立调整控件。原生<select>/<input type="date">无法样式化——组合一个无头原始组件而不是手写一个（参见“使用已有的”）。
  • 暗模式。 阴影在暗色上较弱——依赖边框。略微降低语义色的饱和度。相同的层级系统，反转的值。保持一个色相；仅在不同表面间改变亮度。

打磨与动效要点

上百个小细节累积成“感觉很好”。这些是最高杠杆的——足以交付真正精致的UI。

静态打磨

  • 同心圆角。 嵌套圆角元素：outerRadius = innerRadius + padding。父子和子元素相同半径是让UI感觉不对劲的最常见原因。
  • 表格数字。 任何动态数字（计数器、价格、计时器、表格列）使用font-variant-numeric: tabular-nums以防止布局偏移。
  • 光学对齐。 当几何居中看起来不对时，光学修正——图标侧内边距 ≈ 文本侧 − 2px；播放三角形向右微调约2px。
  • 状态不是可选的。 每个交互元素需要默认、悬停、活动、焦点、禁用。数据需要加载、空、错误。缺失状态感觉像损坏——它们是未完成界面的最快标志。
  • 点击区域——44×44px（WCAG），至少40。 如果可见控件较小（20px复选框），用伪元素扩展。永远不要让两个点击区域重叠。
  • 阴影优于边框用于层级。 对于提升的卡片/按钮/容器，优先使用分层透明box-shadow（它适应任何背景）；将真实边框保留给分隔线和输入轮廓。亮模式提升堆叠三层——1px环+两个柔和深度，例如0 0 0 1px rgba(0,0,0,.06), 0 1px 2px -1px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04)；暗模式简化为单个环0 0 0 1px rgba(255,255,255,.08)（深度阴影在暗色上不显）。
  • 文本换行。 标题使用text-wrap: balance；正文/说明使用text-wrap: pretty以消除孤行。
  • 字体平滑。 根元素使用-webkit-font-smoothing: antialiased（macOS否则渲染较重）。
  • 图像轮廓。 1px内嵌轮廓，纯rgba(0,0,0,0.1)亮模式 / rgba(255,255,255,0.1)暗模式——永远不要使用带色调的近黑/白色（在边缘读起来像污垢）。

动效

动效应被感知，而非观看。快速、有目的，且绝不碍事。

  • 它应该动效吗？ 每天重复100+次的操作（键盘快捷键、命令面板）没有动效——它们会让人感觉慢。偶尔出现的表面（模态框、抽屉、提示）获得标准动效。罕见/首次运行时刻可以增加愉悦感。
  • 持续时间 < 300ms 用于UI。按钮按下100–160ms；工具提示/弹出框125–200ms；下拉菜单150–250ms；模态框/抽屉200–500ms。180ms的下拉菜单比400ms的感觉更灵敏。
  • 自定义缓出，永远不要缓入。 内置曲线太弱。进入/交互使用cubic-bezier(0.23, 1, 0.32, 1)；屏幕内移动使用缓入缓出（cubic-bezier(0.77, 0, 0.175, 1)）。ease-in延迟第一帧——用户正在观看的时刻——感觉迟钝。
  • 按下反馈。 :active时transform: scale(0.97)（永远不要低于0.95）。触觉确认UI听到了点击。
  • 永远不要从scale(0)动效。 没有东西从无中出现——从scale(0.95) + opacity: 0开始。
  • 原点感知的弹出框。 弹出框从其触发器缩放（transform-origin设置为触发器），而非中心。模态框是例外——它们保持居中。
  • 仅动效transform和opacity（GPU合成）。动效宽度/高度/边距/内边距触发布局+绘制并掉帧。永远不要使用transition: all——命名确切属性。
  • 交错进入 项目之间30–80ms以实现自然级联；保持退出比进入更快更微妙。
  • 尊重prefers-reduced-motion——保留透明度/颜色过渡，移除移动。

避免

  • 刺眼边框——如果边框是你首先看到的，它们太强了
  • 戏剧性表面跳跃——层级应如耳语般安静
  • 扁平层级——所有元素一个大小/粗细；无清晰焦点
  • 单调布局——相同卡片大小、间距和密度
  • 不一致间距——无系统的最明显标志
  • 混合深度策略——选择一个并坚持
  • 缺失状态——悬停、焦点、禁用、加载、空、错误
  • 戏剧性投影——微妙，而非引人注目
  • 小元素上的大圆角；粗装饰边框
  • 渐变和颜色用于装饰——颜色应有意义
  • 多个强调色——稀释焦点
  • 不同表面使用不同色相——保持一个色相，仅改变亮度
  • 默认排版——系统/Inter字体和仅大小层级，而方向已设定
  • 结构性hack——负边距撤销父内边距、逃生舱calc()、绝对定位以规避布局流

工作流程

沟通

保持隐形。不要宣布模式或叙述过程。永远不要说“我处于建立模式”或“让我检查system.md”。直接开始工作；陈述建议并附上推理。

执行纪律

将本技能作为工作纪律使用，而不仅仅是建议。编辑UI时：

  1. 检查现有应用、设计令牌、组件模式以及.interface-design/system.md（如果存在）。
  2. 在选择布局、颜色、字体、密度和导航之前，进行具体的领域探索。
  3. 对于全新屏幕、重大重新设计或模糊方向，考虑视觉参考步骤如果图像生成工具可用（否则跳过——它是辅助，而非交付物）。四种模式：方向板（代码前2–3个抽象情绪/材料/颜色探索——无真实UI）、UI参考（选定方向的中等保真构图）、绘制覆盖（现有截图的更强版本）、光栅资产（空状态艺术、纹理——永远不要图标/标志/图表）。始终拒绝通用SaaS、不可读文本、域外调色板；提取调色板/密度/比例/标志，然后用真实代码构建并在浏览器中验证。
  4. 修补实现，然后在可用时运行相关构建/类型检查/测试。
  5. 对于非平凡UI进行视觉验证。使用内联渲染工具、本地浏览器或桌面和移动宽度的截图；在呈现之前修复重叠、间距断裂、空白状态、不可读文本、缺失资产和通用构图。
  6. 保持面向用户的更新简短。不要暴露冗长的私人设计独白——呈现有用的建议或决策。

建议+询问

以探索和建议开始，然后确认：

领域：     [来自产品世界的5+个概念]
色彩世界：[该领域中存在的5+种颜色]
标志：     [该产品独有的一个元素]
拒绝：     [默认1] → [替代]，[默认2] → [替代]，[默认3] → [替代]
方向：     [连接上述的方法]

然后问：“这个方向感觉对吗？”如果内联渲染工具可用，在同一消息中渲染方向的实时样本——展示调色板、字体和标志，而不仅仅是命名它们。

构建流程

  • 如果.interface-design/system.md存在： 读取并应用——决策已做出。
  • 如果不存在： 探索领域（全部四个输出）→ 提出（引用全部四个）→ 当方向模糊或更改成本高时确认 → 构建 → 运行下面的检查 → 提供保存。

检查（在展示之前）

对你的输出运行这些检查；如果任何一项失败，在呈现之前迭代。

  • 替换测试——将你的字体替换为常用字体，布局替换为标准模板：会有什么不同吗？替换无关紧要的地方就是你默认的地方。
  • 眯眼测试——眯眼：层级仍然可读？没有东西刺眼地跳出？
  • 标志测试——指出五个具体元素，其中你的标志出现。“整体感觉”不算。
  • 令牌测试——大声读出你的CSS变量：它们属于这个产品的世界，还是任何项目？

完成任务后

始终提供保存：“希望我将这些模式保存下来供未来会话使用吗？”如果同意，写入.interface-design/system.md：

  • 方向和感觉
  • 深度策略（边框/阴影/分层）和间距基础单位
  • 层级决策（字号比例、密度值、焦点模式）
  • 关键组件模式——当组件使用2次以上、可重用或具有值得记住的尺寸时添加（不是一次性或属性变体）。记录数值，例如Button primary — 36px h · 12px 16px pad · 6px radius · 14px/500。
  • 视觉方向笔记和选定参考（当图像步骤塑造了设计时）

一致性检查。 如果system.md定义了值，坚持它们：网格上的间距、整个声明的深度策略、调色板中的颜色、记录的模式被重用而非重新发明。这会累积——每次保存使未来工作更快更一致。

命令

  • /interface-design:design-review — 对构建进行严格的工艺+层级审查，带有批准栏；尽可能渲染前后对比
  • /interface-design:design-deslop — 快速、差异范围的传递，从分支中去除视觉混乱

如果用户以自然语言询问设计状态、审计或模式提取：读取.interface-design/system.md并总结，检查UI文件是否偏离，或扫描重复的间距/半径/颜色/组件值并提出system.md——执行等效的内联操作。