Design Quality v2

一个用于创建和评估界面设计的全周期技能。对于现有界面，它会进行审计和打分。对于新界面，它会设定方向并确保工艺到位。对于有问题的界面，它会逐遍应用修复。

此版本使用专门的子代理进行“审查模式”和“修复模式”——尽可能并行处理，当某个维度得分 ≤ 5 时自动进行深度分析。

关卡 0：确定输入类型

在进行任何分析或创建之前，确定共享的内容。这会改变下游的一切。

共享内容	操作
截图/图片	进行视觉分析；记录无法确认的 CSS
HTML/CSS 源代码	读取样式；可进行完整审计
项目文件夹	首先使用 glob 匹配主要 CSS/组件文件；在打分前阅读
URL/实时页面	读取 DOM；如果浏览器可用，通过 DevTools 检查样式
Artifact 链接	读取 artifact；视为 HTML 源代码处理
仅文本描述	要求至少提供上述一种内容后再打分；描述缺失的内容

同时检测上下文类型——这会影响适用的启发式规则：

应用屏幕（工具、仪表盘、SaaS 产品）：密度起主导作用；标题较小；操作即为内容
页面（登陆页、营销页、编辑页）：有更多创意自由；英雄区域至关重要；分区和节奏

当不确定时，陈述你的假设并继续。

模式选择

从请求中检测模式——如有疑问，从审查开始：

请求类型	模式
“review”, “critique”, “audit”, “does this look AI-generated?”	review
“build”, “create”, “design this page”	create
“fix”, “improve”, “unslop”, “redesign”	fix (review → apply)
“polish”, “feels slightly off”, “almost there”	polish

如果项目根目录中存在 PROJECT_DESIGN.md 文件，请先阅读它。它包含已批准的方向、色板和 Signature——未经询问不要覆盖它。

代理架构

对于审查模式和修复模式，调度专门的子代理，而不是串行完成所有工作。这可以在更短的时间内产生更深度的分析。

何时使用代理

审查模式 对于任何真实的 UI 输入 → 始终并行调度 3 个审查代理
任何维度得分 ≤ 5 → 在评分卡之后自动调度匹配的深度分析代理
修复模式 → 每个批次调度一个专门的修复代理（批次 3 和 4 并行）
创建模式关卡 1 → 当已知产品 URL 或类别时，可选择调度一个方向研究代理

Fork 与全新代理

subagent_type: "fork" — 用于需要完整对话上下文（UI 输入、截图、代码）的审查和修复代理
Default (fresh) — 用于不需要对话历史的方向研究代理

代理提示文件

完整提示模板位于 references/agents/。调度时请参考它们——每个文件都包含该代理的指令和输出格式。

审查模式

进行审计、评分和优先级排序。未经询问不得更改代码。

步骤 0：调度 3 个并行审查代理

在进行任何分析之前，使用 Agent 工具在一条消息中调度所有三个代理。所有三个都是 fork——它们继承完整的对话上下文，包括 UI 输入。

代理 1 — AI痕迹审计员 提示模板：references/agents/review-slop.md 任务：AI痕迹审计、模板检查、可访问性、移动/触摸、性能快速检查。

代理 2 — 评分卡打分员 提示模板：references/agents/review-scorecard.md 任务：对全部 8 个维度进行 1–10 打分，并附上每个分数的理由。

代理 3 — 情感分析师 提示模板：references/agents/review-emotion.md 任务：对所有关键状态进行“感觉状态检查” + 峰终定律映射。

等待所有 3 个代理完成，然后进入步骤 1。

步骤 1：综合

将三个代理的输出合并为标准输出格式。去重出现在多个代理中的发现。如果代理对分数有分歧，使用较低的值并注明分歧。

## AI痕迹审计
[来自代理 1 — 每个发现附带位置和严重程度]

## 模板检查
[来自代理 1]

## 评分卡
产品契合度：    X/10   [来自代理 2 — 一行说明]
层次结构：      X/10
清晰度：        X/10
品味：          X/10
克制：          X/10
密度：          X/10
工艺：          X/10
响应式：        X/10
总分：          X/10

## 情感设计
[来自代理 3 — 感觉状态 + 峰终定律发现]

## 结论
最佳部分：
最差部分：
必须修复 (P0)：[如果有，否则填“无”]
快速改进 (P1)：[最多 3 个]

输出后，询问是否要应用任何修复。

步骤 2：自动深度分析

在显示评分卡后，检查每个维度。对于任何得分 ≤ 5 的维度，自动调度匹配的深度分析代理，无需等待被问及。

参见 references/agents/deepdive-dispatch.md 了解调度表和提示模板。

在调度前声明：“层次结构得分为 4 — 正在调度一个集中的视觉层次分析。”

深度分析映射：

维度/发现	调度的技能
层次结构 ≤ 5	`critique-visual-hierarchy` 技能
清晰度 ≤ 5（启示性）	`critique-affordance` 技能
清晰度 ≤ 5（密度）	`critique-information-density` 技能
工艺 ≤ 5（排版）	`critique-typography` 技能
工艺 ≤ 5（颜色）	`critique-color` 技能
工艺 ≤ 5（布局）	`critique-composition` 技能
品味 ≤ 5（感觉扁平）	`interfaces-that-feel` 技能
密度 ≤ 5	`critique-information-density` 技能
情感弧线问题	`peak-end-rule` 技能

创建模式

在编写任何 UI 之前，遵循以下顺序。每个步骤都是一个关卡——在继续之前停下来确认。

关卡 0：上下文类型

在继续之前声明应用哪种：

应用屏幕 — 工具、仪表盘、数据产品。密度、操作和状态起主导作用。
页面 — 登陆页、编辑页、营销页。构图、节奏和分区起主导作用。

关卡 1：产品研究代理（可选但推荐）

如果产品有 URL、名称或属于已知类别，在询问用户产品理解之前调度一个研究代理。这可以节省一次往返，并揭示用户可能忘记提及的特定领域约定。

提示模板：references/agents/direction-research.md

如果 URL 或类别未知，则跳过此步骤，直接询问用户。

检查项目根目录中是否存在现有的 PROJECT_DESIGN.md。如果存在，请阅读它——方向已设定；跳至关卡 3（构建）并应用记录的方向。

如果没有，则阅读或询问：产品的功能、目标用户、主要任务、现有内容、技术栈、现有品牌颜色、字体、组件。

询问：“我的理解是否正确，然后再设定设计方向？” 停下来。等待。

关卡 2：方向 + 设计刻度盘

从产品中推导出五条线——而非从趋势、作品集或看起来酷的事物中：

产品：它做什么以及为谁做，一句简单的话。
特点：2–3 个具体的词。例如 calm, exact, a little warm 或 fast, technical, playful。 “Clean, modern, sleek, minimal, premium” 被禁止——它们描述的是每个模板。
世界：产品自然所属的材料或场所。一个笔记应用：纸张和墨水。一个监控工具：仪器和夜班。一个旅行应用：地图和窗光。这会渲染中性色、强调色和视觉时刻。
时刻：屏幕上 1–2 个设计变得丰富且具体的地方。其他所有内容保持安静，以便这些时刻能立即被感知。
Signature：只有该产品会有的一个小细节，并持续重复。

展示 1–3 个方向。对于每个方向，显示三个设计刻度盘：

变化    ░░░░░░░░░░  1–10   (1 = 极简居中，10 = 大胆非对称)
动效    ░░░░░░░░░░  1–10   (1 = 静态，10 = 动画化)
密度    ░░░░░░░░░░  1–10   (1 = 宽敞/编辑风格，10 = 仪表盘/密集)

询问：“哪个方向？刻度盘是否正确，或者我应该调整任何一项？” 停下来。等待。

方向确认后，建议在项目根目录创建一个 PROJECT_DESIGN.md：

# PROJECT_DESIGN.md

## 方向：[名称]
产品：[一句话]
特点：[2–3 个词]
世界：[材料/场所]
时刻：[1–2 个具体位置]
Signature：[一个细节]

## 刻度盘
变化：X/10
动效：X/10
密度：X/10

## 色板
画布：[token + hex]
强调色：[token + hex]
文字主要：[token + hex]
文字静音：[token + hex]

## 排版
显示字体：[字体名称 + 字重]
正文字体：[字体名称 + 字重]
等宽字体：[字体名称]（如适用）

## 圆角半径：[值]px

设计原则

方向确认后，按此顺序应用（前面的批次会影响后面的批次）：

间距 — 首先确立

8px 网格。所有边距、内边距、间距：4 或 8 的倍数。（mt-[13px] → 修复它。）
相同元素 = 相同大小。所有列表行共享一个统一高度和间距。
空间显示分组：内部 < 外部。一个部分标签应更靠近其自身的项目，而不是上面的项目。
导航最密集：行高 32–36px，它们之间 2–4px。

颜色

一个中性色阶，向世界倾斜。背景、表面、边框、文字都来自该色阶。
一个强调色，很少使用：主要操作、选中状态或唯一重要的数字。
三种文字角色：主要、次要、静音。永远不要用十种略有不同的灰色。
禁止：表面上的色相渐变、渐变文字、彩色发光、彩色阴影、径向色斑、霓虹边框。
强调色上带有文字：≥ 4.5:1 对比度。
对于新的颜色令牌，首选 OKLCH：oklch(L% C H)。

排版

将独特的展示字体与清晰的正文字体配对。最大化字重对比。
所有标题（h1–h3）使用 text-wrap: balance。正文和列表文字使用 text-wrap: pretty。
在 :root 或 html 上使用 -webkit-font-smoothing: antialiased。
正文字体最小 14px（首选 16px）。每页一个 h1。

组件

按钮：动词优先的标签。每个部分一个主要按钮。
不使用表情符号作为图标。使用一个图标库，一种描边粗细，仅使用 currentColor。
卡片：阴影或边框，不可同时使用。
空状态：插图 + 标题 + CTA。永远不要只有空。
加载状态：300ms 延迟后显示骨架屏（而非旋转器）。
模态框：X、取消和 Escape 键。锁定焦点。关闭时返回焦点。
所有模态框、抽屉和下拉菜单使用 overscroll-behavior: contain。
所有图标按钮需要 aria-label。所有表单输入需要关联的 <label>。

一个精美元素规则

每个屏幕获得一个经过精雕细琢的、丰富的元素。它周围的所有内容保持安静。

反通用护栏

如果设计在作品集截图中看起来令人印象深刻，但会使产品清晰度降低，则拒绝它。

构建后

运行审查模式（使用代理）。完成标准：无 P0 发现，总分 ≥ 7/10，产品契合度 ≥ 7/10。

修复模式

首先运行审查模式以获取评分卡。然后按批次顺序调度修复代理。

执行顺序：

批次 1、2 → 顺序执行（间距优先，然后是颜色）
批次 3 + 4 → 并行（图标和文案相互独立）
批次 5–10 → 顺序执行

参见 references/agents/fix-passes.md 了解每个批次的代理提示模板。

对于每个批次，声明代理正在做什么，并报告每个批次：哪些已更改，哪些仍需要注意。

批次顺序：

间距 — 8px 网格对齐、节奏、分组
颜色 — 移除AI痕迹，从中性色阶构建
图标 — 统一集、统一大小、统一描边、currentColor （与文案并行）
文案 — 删除表情符号标签，降低音调，使其符合产品特性 （与图标并行）
排版 — 层次、字重、text-wrap: balance、text-wrap: pretty、抗锯齿、tabular-nums
布局 — 对齐、密度
细节 — 同心圆角、阴影、边框
可访问性与触摸 — 焦点状态、aria-label、touch-action: manipulation、44px 目标、overscroll-behavior
视觉 — 空状态插图、图标一致性、图片宽高比。参见 references/passes-visuals.md
动效 — 最后一个批次，仅在增加意义的地方添加。参见 references/passes-motion.md

所有批次完成后：再次运行审查模式代理以验证。报告相对于原始评分卡的变化。

润色模式

适用于设计大多良好但感觉略有偏差的界面。

技巧：在浏览器 DevTools（动画面板）中将界面速度降至 10%，遍历所有状态：悬停、焦点、激活、加载、空。在 10% 速度下感觉不对劲的地方，就是在全速下微妙出错的地方。

参见 references/micro-polish.md 了解具体值。

快速检查清单：

交付前检查清单

在任何 UI 标记为完成之前：

不使用表情符号作为图标（使用 SVG：Heroicons/Lucide/Phosphor/Radix）
所有可点击元素使用 cursor-pointer
文字对比度 ≥ 4.5:1 (WCAG AA)
键盘导航焦点状态可见（使用 focus-visible，而非移除 outline）
每个图标按钮有 aria-label
每个表单输入关联了 <label>

RomuloRogerio/design-quality-v2

design-quality-v2 是什么？

在你喜欢的 AI 中提问

文档