design-screen

技能：设计屏幕

先做这件事，再做其他任何事

**现在就在回复中写出「简报推断」区块。**不要等读完本文，不要只在脑中构思，也不要等到“布局更清晰”之后再写。现在就写，在添加任何标记、文件或工具调用之前。

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", "brutal"
Motion depth:     none | subtle feedback | expressive choreography
Layout family:    the section sequence you will use, named, varied per section
Reference anchor: an archetype, or a named system - see step 3

每一行都要填写明确的决定。Mood: clean 不是决定；Mood: expensive 才是。如果你无法说出氛围和布局类型，就还没有做出任何决定，而你生成的内容只会退化成平庸的平均水平。

**停止条件：**如果你正要编写标记、创建文件或调用会生成 UI 的工具，而回复中还没有这个区块，请停下来，先写出它。2026-10-07 的测量结果显示，三次运行中有一次跳过了这一步：技能已加载，区块却没有写出来，最终屏幕仿佛无人设计。这个部分放在文件顶部，是因为它之前位于二十九行背景说明之后，而背景说明不是指令。

下面的内容会说明如何执行上述决定。

---

**工具包在这里吗？**此技能会读取工具包中的文件。检查一次： 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 或安装插件，然后停止。不要猜测你无法打开的文件内容。

以下情况应改用其他技能

请求	使用
仪表板、终端、控制台，或需要同时呈现大量数字的屏幕	data-dashboard
要改进现有网站或应用	redesign
要匹配的屏幕截图、模型图或参考图片	image-to-code
单个组件的规格，而非屏幕	design-component
在设计任何屏幕之前从零开始打造品牌基础	brandkit

其他情况请继续。

---

1. 品味预检

本文件顶部的区块。如果它还没有出现在你的回复中，请返回并先写出来，再继续阅读。此技能的其余部分会执行你已经做出的决定。

完整版本及其依据：${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md。

禁止采用的默认做法：逐一刻意打破

以下特征会让 UI 看起来像是自动生成的。它们是缺陷，不是起点。

• **三张或四张权重完全相同的卡片。**突出一个重点：放大尺寸、加重权重，或单独占一行。等权网格会让视线无处停留。
• **所有内容都居中。**使用非对称布局和真正的网格。谨慎使用居中。
• **反复使用相同的左侧文字、右侧图片布局。**每个区块都要变换构图。
• **只是加粗正文的展示字体。**最大字号的标题至少是正文字号的 2.5 倍，内容简短，并采用较宽的行宽（18-24ch）。
• **每个方框都加通用投影。**大多数元素应采用扁平设计；立体层次要少而精。
• **纯 #000 配 #fff。**使用主题中的暖白色和近黑色。
• **彩虹般丰富的强调色。**最多使用一个主色和一个强调色；以中性色为主。
• 任何地方都不要使用表情符号，包括图标、项目符号、状态点和标签。使用带 currentColor 的 lucide 内联 SVG，或直接使用文字。这是硬性要求，不是偏好。
• UI 文案中不要使用破折号，也不要使用营销套话（“提升”“无缝”“解锁”）、空洞的三段式表达（“强大、直观、美观”）或虚假标签（“SECTION 01”、lorem ipsum）。说具体内容，或者干脆不说。
• **卡片、提示框、Toast 或标注框只在一侧加彩色边框。**这种 3-4px 的着色条是自动生成 UI 的陈词滥调。使用完整的细线边框或表面分层；状态应通过真实图标和文字呈现，绝不能只靠颜色。
• **纵向间距过于局促。**区块之间应留出充足的整体留白。

---

2. 设计准则

加载 design-doctrine 并遵循它。决定这项工作的要点包括：按意图使用设计令牌、采用统一主题、为每个交互元素覆盖八种状态、突出一个重点、不使用表情符号，以及绝不声称未经测量的数字。

3. 将方向转化为令牌

从 ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md 中选择参考锚点，或选择一个命名系统（ node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name> 会获取其 规范并显示其位置），然后将其解析为令牌，而不是直接为屏幕设置样式。只用一层 CSS 变量，并且只导入一次。如果品牌色未通过对比度检查，就调整它：审美服务于第 4 层，绝不凌驾于无障碍要求之上。

用于对照品质的参考输出： ${CLAUDE_SKILL_DIR}/../../../examples/showcase/ 和 ${CLAUDE_SKILL_DIR}/../../../examples/templates/。

4. 构建

以移动端为基础，而不是事后补上：将手机布局写为基础样式，再通过 min-width 为更宽的屏幕叠加样式。可以使用 max-width 做窄范围微调，但绝不能以此作为支持移动端的方式。每个值都必须是令牌。每个交互元素都必须包含全部八种状态。先处理内容，再设计服务于内容的布局。

5. 门禁：实际运行，绝不虚报

node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs

报告真实的 N/N 行。对于单个文件，至少运行：

node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark]
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_responsive.mjs <file> --scale=1.25
DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file>
DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>

没有浏览器的渲染门禁会打印 SKIPPED 并以 0 退出。这不代表通过。单独运行门禁并打算信任结果时，请设置 DS_REQUIRE_BROWSER=1。

6. 渲染并检查

即使屏幕仍明显存在问题，门禁也可能通过。请截图检查每种状态，并点击每个控件，确认确实发生了变化。

7. 评审

运行 /critique。这是有意设置的对抗性评审，它检查的是实际成果，而非你的推理过程。门禁通过绝不能作为审美合格的证据。

---

交付内容

Brief Inference 区块、文件、真实的门禁输出，以及评审者的结论。如果没有运行某项门禁，请说明是哪项以及原因——未经测量的结果应如实报告为未经测量，绝不能说成通过。