design-doctrine

技能：设计准则

步骤 0：工具包在这里吗？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 只有在出现 KIT_MISSING 时，才表示安装的只有技能文件夹，这是 npx skills add 的行为。请明确告知用户，并指引他们运行 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测你无法打开的文件内容。

插件根目录中的 CLAUDE.md 不会作为项目上下文加载，因此常驻说明放在这里。开始任何设计工作前，先阅读本文，然后加载适用于当前领域的规则文件。

验证协议——运行门禁，绝不妄称通过

1. 绝不陈述未经测量的数字。 任何对比度、 “符合 WCAG”或“100%”的说法，都必须来自运行门禁并报告其实际输出。如果尚未运行，请说“尚未验证”。
2. 验证每种状态，而不仅是静止状态。 node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark] 会测量默认、悬停和聚焦状态——按钮在静止状态下通过，悬停时仍可能失败。
3. 报告完成前运行一条命令： node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs。 报告实际的 N/N 行。结果必须全部通过。
4. 在构建过程中运行门禁，而不是等构建完成后再运行。 修复并重新运行，直到全部通过；失败期间绝不宣布成功。
5. 渲染并亲自检查。 即使门禁通过，UI 仍可能明显有问题。在两种主题下截取测试环境的屏幕截图，点击每个控件，并确认状态确实发生了变化。
6. 响应式也要通过门禁： node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_responsive.mjs <file|dir>： 从 280 到 951px 的宽度范围内不得出现水平溢出（包括 iPhone Duo），任何需要适配折叠屏折痕的页面都必须避开折痕。
7. 如实说明范围。 门禁证明的是客观正确性，无法证明审美。审美方面请运行 /critique，亲自检查作品，并从下方的审美预检开始，而不是从默认组件入手。
8. SKIPPED 不等于通过。 未安装浏览器时，渲染门禁会输出 SKIPPED 并以 0 退出，且不报告任何内容。运行单项渲染门禁时，请设置 DS_REQUIRE_BROWSER=1，使其变为 REQUIRED, FAILING，然后运行 npx playwright install chrome 修复，而不是移除该标记。

移动端优先是基础

基础样式就是手机布局。更宽的屏幕通过 min-width 逐层增强。max-width 并非禁用——它适用于真正需要的窄屏优化，或两个断点之间的范围——但桌面优先的样式表会假设基础布局针对宽屏，再事后补上移动端样式，这是错误的。

通过 ${CLAUDE_SKILL_DIR}/../../../scripts/verify_mobile_first.mjs 进行测量：移除所有 @media 和 @container 规则，并在 320px 宽度下渲染剩余样式。移动端优先的页面会通过，因为其基础样式本身就是手机布局。桌面优先的页面则无法适配。

两条绝不妥协的规则

绝不使用原生 <select>。 它会自行绘制箭头，紧贴控件边缘，没有留白；appearance: none 加上自定义箭头会与平台样式相冲突，而不是与系统保持一致。请使用 ${CLAUDE_SKILL_DIR}/../../../components/forms-advanced.md 中的 Listbox 或 Combobox 模式：使用一个按钮触发器来播报当前值，箭头与内边距之间使用设计令牌规定的间距，并完整支持键盘操作（按键搜索、方向键、Home/End、Escape，以及确实会切换可见内容的 aria-expanded）。放弃原生 select，就意味着无障碍支持不再是免费的，因此替代方案必须通过所有状态、键盘和 axe 检查，才能算合格。检查方式见 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_native_select.py。

卡片、警示框、Toast 或提示框的单侧边框绝不能着色：包括 border-left、border-right、border-top、border-bottom，以及逻辑属性形式的 border-inline-* 和 border-block-*。无论哪个方向，3-4px 的着色边条都是生成式 UI 的陈词滥调，不只是左侧如此：它用装饰来代替布局未能建立的层级关系。请使用四周完整的极细边框，或通过表面色和层级来区分；状态应使用真正的图标加文字来表达，绝不能只靠颜色。在渲染结果中，通过 ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs 检查单侧强调边框这一明显特征。

品味预检：编写任何标记之前

检查关卡无法看到这一部分，因此必须先做出判断，而不能等到问题显现。先将这段要求写入回复，再开始构建。先生成内容，才会做出看起来像生成内容的设计。

Domain:          fintech | editorial | dev-tool | healthcare | consumer | ...
Audience & tone: expert vs first-time, calm vs energetic, premium vs utilitarian
Mood:            the one adjective the result must earn - "expensive", "precise", "warm"
Motion depth:    none | subtle feedback | expressive choreography
Layout family:   the section sequence you will use, named, varied per section
Reference anchor: an archetype or named system to aim at

刻意打破以下每一项设计缺陷，而不是将它们当作起点。

• 三到四张权重完全相同的卡片。必须有一项内容居于主导地位。
• 所有内容都居中。请在真实网格中使用非对称布局。
• 反复使用相同的左侧文字、右侧图片布局。
• 仅仅加粗正文就充当标题。展示字体大小至少为正文字体的 2.5 倍，篇幅简短，行宽控制在 18-24ch。
• 每个框都加投影。大多数元素应采用扁平样式。
• 使用 #000 搭配 #fff。应使用主题中的近黑色搭配暖白色。
• 使用多个强调色。视觉重点应由中性色承担。
• 卡片、警示框、Toast 或提示框的单侧边框着色。应使用完整的极细边框或表面区分；状态通过图标加文字表达，绝不能只靠颜色。
• 在 UI 文案中使用破折号、营销套话（“提升”“无缝”“解锁”）、空洞的三段式表达、虚假的标签（“SECTION 01”、lorem ipsum）。

深度内容和完整的 Variance Mandate 见 ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md。对于整个页面或应用，请使用 design-screen，它会将此预检作为工作流的第 1 步。

绝对要求：任何输出中都不得出现 emoji，包括 UI、代码、JSON、文案、注释和提交消息。不得将其用作图标、项目符号、状态圆点或“润色”元素。Emoji 是机器生成内容最明显的标志。请使用 lucide 图标（内联 SVG，使用 currentColor）或纯文字。也不得使用 em dash 或 en dash：请改用冒号、逗号或括号。由 ${CLAUDE_SKILL_DIR}/../../../scripts/check_no_emoji.py 强制检查。

五条不可妥协原则

1. 按意图选择令牌。 选择含义与操作相符的令牌。 破坏性操作（Delete、Remove、Revoke）在每处都使用 action.destructive——触发操作和确认对话框都要使用。蓝色的 Delete 是 bug。通过 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_intent.mjs 衡量。
2. 一个主题，一个事实来源。 每个页面都通过应用根目录仅导入一次的 CSS 变量层，使用相同的 ${CLAUDE_SKILL_DIR}/../../../tokens/*.json 渲染。 不要为每个页面单独设置调色板，不要硬编码十六进制颜色、px 或时间。
3. 每个交互元素都要提供八种状态： 默认、悬停、焦点、激活、禁用、加载中（异步时）、错误（输入时）和选中（可选择时）。如果元素可选，第八种状态就不能省略。
4. 突出一个重点。 每个屏幕都要有视觉焦点，展示文字的字号至少是正文的 2.5 倍。四张同等大小的卡片会让视线无处落点，使屏幕看起来像自动生成的。
5. 输出必须完整。 不完整的输出就是有问题的输出。交付完整文件，不要使用占位内容。要求 N 个组件，就交付全部 N 个。

决策框架

用户需求优先，其次是无障碍性、一致性、美观性和开发者体验。绝不为了较低层级而牺牲较高层级。美观但无法无障碍使用，就是有问题；一致但令人困惑，就是错误的模式。

深入了解

在什么情况下阅读	文件
令牌、调色板、主题、深色模式以及任何颜色决策	${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md
字号比例、行长、4px 间距节奏	${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md
构建任何屏幕或组件、构图、空状态	${CLAUDE_SKILL_DIR}/../../../.claude/rules/components.md
审核或完成任何交互元素	${CLAUDE_SKILL_DIR}/../../../.claude/rules/accessibility.md
为 React、Next.js、SwiftUI 或任何适配器生成代码	${CLAUDE_SKILL_DIR}/../../../.claude/rules/frameworks.md
设计评审、原型设计、研究、交接	${CLAUDE_SKILL_DIR}/../../../.claude/rules/review-and-research.md
美学方向、动效、语气、治理、QA	${CLAUDE_SKILL_DIR}/../../../.claude/rules/brand-and-operations.md

然后选择适用于该任务的可运行技能：design-tokens、design-component、 design-code、design-review、a11y-audit、apply-aesthetic、brandkit、 image-to-code、redesign 等。先用 /grill-me 深入询问需求；用 /gate 验证结果；用 /critique 评判结果。