Back to Details

design-screen

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: Design a screen

Skill：设计一个屏幕

Do this first, before anything else

首先执行此步骤，先做其他任何事情

Write the Brief Inference block into your reply now. Not after reading the rest of this file, not in your head, not "once the layout is clearer" - now, before any markup, any file, any tool call.
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
Fill in every line with a decision. 
Mood: clean
is not a decision; 
Mood: expensive
is. If you cannot name the mood and the layout family, you have not decided anything yet and whatever you generate will regress to the mean.
The stop condition: if you are about to write markup, create a file, or call a tool that produces UI, and this block is not already in your reply, stop and write it first. Measured on 2026-10-07, one run in three skipped it - the skill loaded, the block did not get written, and the result was a screen designed by nobody. This section is at the top of the file because it was previously below twenty-nine lines of background, and background is not an instruction.
Everything below is how to execute the decisions above.
Is the kit here? This skill reads files from the kit. Check once: 
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING
On 
KIT_MISSING
only the skill folders were installed, which is what 
npx skills add
does. Say so plainly, point the user at 
npx ux-ui-agent-skills init
or the plugin install, and stop. Do not guess the contents of a file you could not open.
立即在回复中写出 Brief Inference 区块。 不要等读完本文件的其余部分，不要在心里思考，也不要等到“布局更清晰之后”——现在就写，在任何标记、文件或工具调用之前。
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:\nexpensive
才是。如果你无法说出 mood 和 layout family，说明你还没有做出任何决定；无论生成什么，结果都会退化为平均值。
停止条件： 如果准备编写标记、创建文件或调用生成 UI 的工具，而这个区块尚未出现在回复中，就停下来并先写出它。2026-10-07 的测量显示，三次运行中有一次跳过了它——Skill 已加载，区块却没有写出，结果成了一块无人设计的屏幕。本节位于文件顶部，是因为它以前放在二十九行背景内容之下，而背景不是指令。
以下所有内容都用于执行上述决定。
工具包在吗？ 此 Skill 会从工具包中读取文件。检查一次： 
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING
如果显示 
KIT_MISSING
，说明只安装了 Skill 文件夹，而这正是 
npx skills add
所做的。直截了当地说明这一点，将用户引导至 
npx ux-ui-agent-skills init
或插件安装方式，然后停止。不要猜测你无法打开的文件内容。

Hand off instead, when the work is actually

改为转交（当实际工作属于以下情况）

The requestUse
A dashboard, terminal, console, or any screen whose job is many numbers at once
data-dashboard
An existing site or app to improve
redesign
A screenshot, mockup or reference image to match
image-to-code
One component's spec, not a screen
design-component
A brand foundation from scratch, before any screen
brandkit
Otherwise, continue.
请求使用
仪表盘、终端、控制台，或任何需要同时呈现大量数字的屏幕
data-dashboard
需要改进的现有网站或应用
redesign
需要匹配的截图、模型图或参考图
image-to-code
单个组件的规格，而非整个屏幕
design-component
屏幕设计之前从零建立品牌基础
brandkit
其他情况，继续执行。

1. Taste preflight

1. 品味预检

The block at the top of this file. If it is not in your reply yet, go back and write it before reading further - the rest of this skill executes decisions it assumes you have already made.
Full version and the reasoning: 
${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md
.
本文件顶部的区块。如果它尚未出现在回复中，请返回并先写出它，再继续阅读——此 Skill 的其余部分会执行它所假定你已经做出的决定。
完整版本及推理过程：
${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md
。

Banned defaults — break each one deliberately

禁用默认值——逐项刻意打破

These are the tells that make UI read as generated. They are defects, not starting points.
  • Three or four identical equal-weight cards. One thing leads: more size, more weight, or its own row. A grid of equals gives the eye nowhere to land.
  • Everything centered. Use asymmetry and a real grid. Center sparingly.
  • The same left-text / right-image row repeated. Vary composition per section.
  • Display type that is just bold body text. The largest heading is at least 2.5x the body size, short, on a wide measure (18-24ch).
  • Generic drop shadow on every box. Most things are flat; elevation is layered and rare.
  • Pure 
    #000
    on 
    #fff
    .     Off-black on warm-white, from the theme.
  • A rainbow of accents. One primary, one accent at most; neutrals carry it.
  • Emoji anywhere - icons, bullets, status dots, labels. Use lucide inline SVG with 
    currentColor
    , or plain words. This is a hard gate, not a preference.
  • Em-dashes in UI copy, marketing filler ("elevate", "seamless", "unlock"), hollow triads ("powerful, intuitive, beautiful"), fake labels ("SECTION 01", lorem ipsum). Say the concrete thing or say nothing.
  • A colored border on one side only of a card, alert, toast or callout. The tinted 3-4px strip is a generated-UI cliche. Full hairline border or surface separation, and status carried by a real icon plus text, never colour alone.
  • Cramped vertical rhythm. Generous macro-whitespace between sections.
以下特征会让 UI 看起来像是生成出来的。它们是缺陷，不是起点。
  • 三到四张完全相同、权重相同的卡片。 必须由一个元素主导：赋予更大尺寸、更大字重，或让它独占一行。网格中所有元素同等，会让视线无处落点。
  • 所有内容都居中。 使用不对称布局和真正的网格。少用居中。
  • 反复使用相同的左文右图行。 每个区块都应采用不同的构图。
  • 展示级字体只是加粗的正文。 最大标题至少要是正文的 2.5 倍，标题要简短，并使用较宽的行宽（18-24ch）。
  • 每个盒子都加通用投影。 大多数内容应保持平面；elevation 应分层且少量使用。
  • 在 
    #fff
    上使用纯 
    #000
    。     使用主题中的偏黑与暖白。
  • 彩虹式强调色。 最多使用一个主色和一个辅助色；其余视觉由中性色承担。
  • 任何位置使用 Emoji——图标、项目符号、状态点、标签均不可。使用带 
    currentColor
    的 lucide 内联 SVG，或纯文字。这是一项硬性门禁，不是偏好。
  • UI 文案中的英文破折号、营销填充词（“elevate”“seamless”“unlock”）、空洞三元组（“powerful, intuitive, beautiful”）、虚假标签（“SECTION 01”、lorem ipsum）。要么说清楚具体内容，要么什么都不说。
  • 卡片、alert、toast 或 callout 仅单侧使用彩色边框。 3-4px 的着色条是生成式 UI 的陈词滥调。使用完整的细线边框或表面区分，状态必须由真实图标加文字共同表达，绝不能仅靠颜色。
  • 垂直节奏过于拥挤。 各区块之间应有充足的大尺度留白。

2. Doctrine

2. 准则

Load 
design-doctrine
and follow it. The parts that decide this job: token by intent, one shared theme, the eight states on every interactive element, one thing leads, zero emoji, and never state a number you did not measure.
加载 
design-doctrine
并遵循它。决定本任务效果的关键包括：按意图分配 token、使用统一主题、为每个交互元素提供八种状态、突出一个主导元素、不使用 Emoji，并且绝不声明未经测量的数字。

3. Direction into tokens

3. 将方向转化为 token

Pick the reference anchor from 
${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md
or the library at 
${CLAUDE_SKILL_DIR}/../../../design-systems/library/
, then resolve it into tokens rather than styling screens directly. One CSS-variable layer, imported once. If a brand colour fails contrast, adjust it: taste serves tier 4 and never overrides accessibility.
Reference output to match for quality: 
${CLAUDE_SKILL_DIR}/../../../examples/showcase/
and 
${CLAUDE_SKILL_DIR}/../../../examples/templates/
.
从 
${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md
或 
${CLAUDE_SKILL_DIR}/../../../design-systems/library/
中选择参考锚点，然后将其解析为 token，而不是直接为屏幕编写样式。CSS 变量层级只导入一次。如果品牌色未通过对比度检查，就调整它：品味服务于 tier 4，永远不能凌驾于无障碍需求之上。
用于对标的质量参考输出： 
${CLAUDE_SKILL_DIR}/../../../examples/showcase/
和 
${CLAUDE_SKILL_DIR}/../../../examples/templates/
。

4. Build

4. 构建

Mobile is the base, not an afterthought: write the phone layout as the base styles and layer wider screens on with 
min-width
. 
max-width
is fine for a narrow refinement, never as the way mobile gets supported. Every value a token. Every interactive element ships all eight states. Content first, then the layout that serves it.
移动端是基础，不是事后补充：先编写手机布局作为基础样式，再通过 
min-width
叠加更宽屏幕的样式。
max-width
可用于狭窄场景的精细调整，但绝不能成为支持移动端的主要方式。每个值都使用 token。每个交互元素都要包含全部八种状态。先处理内容，再构建服务于内容的布局。

5. Gate — run it, never claim it

5. 门禁——执行它，不要声称通过

bash
node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs
Report the real 
N/N
line. For a single file, at minimum:
bash
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark]
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file> --scale=1.25
node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>
A render gate with no browser prints SKIPPED and exits 0. That is not a pass. Set 
DS_REQUIRE_BROWSER=1
when you run one on its own and intend to trust it.
bash
node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs
报告真实的 
N/N
结果行。对于单个文件，至少运行：
bash
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_states.mjs <file> [--dark]
node ${CLAUDE_SKILL_DIR}/../../../scripts/verify_responsive.mjs <file> --scale=1.25
node ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjs --strict <file>
node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs --strict <file>
没有浏览器的渲染门禁会输出 SKIPPED 并以 0 退出。这不算通过。单独运行某个渲染门禁并打算信任其结果时，设置 
DS_REQUIRE_BROWSER=1
。

6. Render and look

6. 渲染并亲自查看

Gates pass while a screen is still visibly broken. Screenshot it, look at every state, and click each control to confirm something actually changed.
即使门禁通过，屏幕仍可能在视觉上支离破碎。截取屏幕图像，查看每个状态，并点击每个控件，确认确实发生了变化。

7. Critic

7. Critic

Run 
/critique
. It is adversarial on purpose and it sees the work, not your reasoning. A passing gate is never evidence of taste.
运行 
/critique
。它会刻意采取对抗式审查，并且审视实际成果，而不是你的推理过程。门禁通过永远不能证明品味合格。

What you deliver

你需要交付的内容

The Brief Inference block, the files, the real gate output, and the critic's verdict. If a gate was not run, say which and why - an unmeasured result is reported as unmeasured, never as a pass.
Brief Inference 区块、相关文件、真实的门禁输出，以及 critic 的结论。如果某项门禁未运行，说明是哪一项及原因——未测量的结果必须报告为未测量，绝不能声称为通过。