design-system-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design System Creator

设计系统创建器

Create a design system anchored in the real identity of the subject — not in design trends. Every color, font, and component exists for a functional reason. The deliverable is a structured markdown document directly usable by a developer or AI agent for implementation.

创建基于项目主体真实特征、而非设计趋势的设计系统。每一种颜色、字体、组件的存在都有其功能层面的原因。交付物为结构化的markdown文档，可供开发者或AI Agent直接用于落地实现。

Required Inputs

所需输入

Before starting, you need to understand the project. Ask the necessary questions to obtain:

The subject — Who or what? (a brand, a product, a person, a company, a concept)
The concrete activity — What does it do in the real world? What materials, tools, environments, gestures?
The audience — Who visits/uses it? (consumers, professionals, both? what level of familiarity?)
The positioning — High-end, accessible, technical, playful, institutional?
The constraints — Platform (web, mobile, Shopify, React...), primary content (photos, text, data, video), key features (e-commerce, portfolio, dashboard, blog...)
What the user does NOT like — Asking for examples of sites/styles they find bad or generic is often more revealing than asking what they like.

Don't start designing until you have these answers. If the user provides everything at once, perfect. Otherwise, ask the missing questions.

If the user only needs a subset (e.g., just colors, or just typography), the 6 steps can be scoped accordingly. But always start with Step 1 (anchoring) — even partial deliverables must be grounded.

开始之前，你需要先了解项目。询问必要问题以获取以下信息：

项目主体 —— 是谁/是什么？（品牌、产品、个人、公司、概念）
具体业务 —— 它在现实世界中提供什么服务？涉及哪些材料、工具、场景、操作？
目标受众 —— 谁会访问/使用它？（消费者、专业人士、两者皆有？熟悉程度如何？）
产品定位 —— 高端、亲民、技术向、趣味性、机构类？
约束条件 —— 平台（web、移动端、Shopify、React...）、核心内容（照片、文本、数据、视频）、核心功能（电商、作品集、仪表盘、博客...）
用户不喜欢的内容 —— 询问用户觉得糟糕或千篇一律的网站/风格案例，往往比询问他们喜欢什么更有参考价值。

在获得这些答案前不要开始设计。如果用户一次性提供了全部信息最好，否则询问缺失的部分。

如果用户只需要部分产出（比如仅需配色、或仅需排版），可以对应调整6个步骤的范围。但永远从第一步（锚点设定）开始——哪怕是部分交付物也必须有落地依据。

Method — 6 Sequential Steps

方法 —— 6个连续步骤

Step 1 — Find the Real Anchoring

步骤1 —— 找到真实锚点

This is the most important step. Everything else flows from it.

Ask yourself: what makes this project unique in the physical or conceptual world? Not "what style would look nice" but "if I closed my eyes and thought about this subject, what materials, textures, lights, sounds, temperatures would I perceive?"

Anchoring examples:

An artisan zinc worker — the metals themselves (grey-blue zinc, orange copper, golden brass), workshop light, patina
A law firm — vellum paper, black ink, leather bindings, dark wood bookshelves
A meditation app — stone, water, fog, dawn light
A SaaS analytics platform — the grid, the electrical signal, the signal/noise contrast, the screen in the dark
A Japanese restaurant — light wood, ceramics, emptiness (ma), black/white contrast
A bike brand — asphalt, aluminum, speed, wind

The anchoring must be specific to the subject. If you can swap the project name for another in the same industry and the anchoring still holds, it's too generic. "Elegance and modernity" is not an anchoring. "The grey-blue of zinc that patinas over time" is.

Formulate the anchoring in one sentence: "The design system is anchored in [concrete anchoring]."

这是最重要的一步，后续所有内容都以此为基础。

问自己：这个项目在实体或概念层面的独特性是什么？不是「什么风格看起来好看」，而是「如果我闭上眼睛想到这个主体，会感知到哪些材料、纹理、光线、声音、温度？」

锚点示例：

手工锌艺工匠 —— 金属本身（灰蓝色锌、橙色铜、金色黄铜）、工作室光线、氧化层
律师事务所 —— 羊皮纸、黑墨水、皮革装订本、深色木质书架
冥想应用 —— 石头、水、雾、黎明的光线
SaaS分析平台 —— 网格、电信号、信噪比对比、黑暗中的屏幕
日料店 —— 浅木、陶瓷、留白（ma）、黑白对比
自行车品牌 —— 沥青、铝合金、速度、风

锚点必须是主体特有的。如果你把项目名称换成同行业的另一个项目，锚点仍然成立，说明它太泛了。「优雅现代」不是锚点，「随着时间推移会氧化的灰蓝色锌」才是。

用一句话表述锚点：「本设计系统锚定于[具体锚点]。」

Step 2 — Extract the Palette

步骤2 —— 提取调色板

From the anchoring, extract real colors. Not colors picked from a trend tool — colors that physically exist in the subject's universe.

Required palette structure:

Foundation (4-5 neutral colors):

A dark (primary background or primary text)
A surface (cards, elevated blocks)
A border (separators, subtle outlines)
A light (alternate background or text on dark background)
An optional off-white/paper (secondary background)

Rule: no pure white (#FFFFFF) or pure black (#000000) unless the anchoring explicitly justifies it (e.g., a brand whose identity is absolute black/white contrast). Neutrals must have a temperature (warm or cool) consistent with the anchoring.

Accent families (2-3 families, 3 stops each): Each family has 3 variants: dark (pressed/active), medium (default), light (hover/luminous). Each family has a unique functional role:

Action family — CTAs, links, buttons, everything interactive. This is the most visible color. There must be only one.
Structure family (optional) — Secondary elements, tertiary backgrounds, inactive icons. More subdued than action.
Distinction family (optional) — Reserved for ONE type of premium/rare element (badge, label, special status). Used sparingly. If it is everywhere, it distinguishes nothing.

Absolute rule: every color has a job. If you can't say in one sentence "this color is used for [X]", remove it.

Deliver the palette as CSS tokens:

--color-[semantic-name]: #hex;

从锚点中提取真实存在的颜色，不是从趋势工具里选的颜色，而是真实存在于主体所处场景中的颜色。

必填调色板结构：

基础色（4-5种中性色）：

深色（主背景或主文本）
表面色（卡片、上浮模块）
边框色（分隔线、细微轮廓）
浅色（替代背景或深色背景上的文本）
可选米白/纸色（次级背景）

规则：除非锚点明确支持，否则不要使用纯白（#FFFFFF）或纯黑（#000000）。中性色必须具备与锚点一致的色温（暖或冷）。

强调色系列（2-3个系列，每个系列3个色阶）： 每个系列有3种变体：深色（按下/激活态）、中色（默认态）、浅色（hover/高亮态）。每个系列都有唯一的功能角色：

操作系列 —— CTAs、链接、按钮等所有交互元素，是辨识度最高的颜色，只能有1个。
结构系列（可选） —— 次级元素、三级背景、未激活图标，比操作系列更柔和。
区分系列（可选） —— 仅用于1种高级/稀有元素（徽章、标签、特殊状态），要谨慎使用。如果到处都用，就失去了区分意义。

绝对规则：每种颜色都有其用途。如果你不能用一句话说明「这个颜色用于[X]」，就删掉它。

以CSS tokens形式交付调色板：

--color-[semantic-name]: #hex;

Step 3 — Choose the Typography

步骤3 —— 选择排版方案

Find a font pair that creates intentional contrast.

Display font (headings, taglines):

Must have character — it should be recognizable
Serif, slab, display sans-serif, monospace display... anything goes depending on the anchoring
Elimination criterion: if it's the first font that comes to mind for this type of project, it's probably overused. Dig deeper.

Body font (running text, nav, buttons, forms):

Must fade into the background — it shouldn't be noticed
Readable at 14-16px, good screen legibility
Sans-serif in 90% of cases

Fonts to avoid unless strongly justified: Inter, Roboto, Arial, system fonts (too generic), Playfair Display, Cormorant Garamond (overused in "artisan/luxury"), Space Grotesk (overused in "tech/startup").

Define usage rules:

Which font for what (display NEVER goes to body, body NEVER goes to headings)
Allowed weights (limit to 2-3 max)
Italic usage (if allowed, under what conditions)
Line-height per usage (tight for headings ~1.1-1.2, airy for body ~1.6-1.7)

Deliver as tokens:

--font-display: 'Font Name', category;
--font-body: 'Font Name', category;

Plus a complete typographic scale with responsive sizes (use

clamp()

找到一组能形成明确对比的字体搭配。

展示字体（标题、标语）：

必须有辨识度，让人能记住
衬线、粗衬线、展示型无衬线、等宽展示字体...根据锚点任意选择
淘汰标准：如果它是你想到这类项目时第一个冒出来的字体，大概率已经被滥用了，再深挖一下。

正文字体（正文文本、导航、按钮、表单）：

要能融入背景，不引人注意
14-16px下可读，屏幕显示效果好
90%的场景下用无衬线字体

除非有充分理由否则避免使用的字体：Inter、Roboto、Arial、系统字体（太通用）、Playfair Display、Cormorant Garamond（在「手工/奢侈品」类项目中被滥用）、Space Grotesk（在「科技/创业公司」类项目中被滥用）。

定义使用规则：

哪种字体用于什么场景（展示字体绝对不用作正文，正文字体绝对不用作标题）
允许使用的字重（最多限制在2-3种）
斜体使用规则（如果允许，说明适用场景）
不同场景的行高（标题紧凑~~1.1-1.2，正文宽松~~1.6-1.7）

以tokens形式交付：

--font-display: 'Font Name', category;
--font-body: 'Font Name', category;

另外还要提供带响应式字号的完整排版体系（使用

clamp()

）。

Step 4 — Set the Complete Tokens

步骤4 —— 设置完整tokens

Beyond colors and typography, define:

Spacing — a scale based on a multiple (4px or 8px):

--space-xs to --space-5xl

Border radii — consistent with the identity:

Sharp corners = precision, rigor, technical
Soft rounds = warmth, accessibility
Pill (100px) = modern, organic
No inconsistent mixing — pick a direction and commit

Transitions — one duration per type:

--transition-fast: 0.2s ease;   /* hover, focus */
--transition-medium: 0.4s ease; /* open/close */
--transition-slow: 0.6s ease;   /* scroll reveal */

Breakpoints — for responsive:

mobile / tablet / desktop / wide

Deliver a complete, copy-pasteable

:root

block.

除了颜色和排版，还要定义：

间距 —— 基于倍数（4px或8px）的体系：

--space-xs to --space-5xl

圆角 —— 与产品定位保持一致：

尖角 = 精准、严谨、技术向
小圆角 = 温暖、亲民
药丸形（100px）= 现代、有机
不要无理由混合使用，选一个方向坚持下去

过渡效果 —— 每种类型对应一个时长：

--transition-fast: 0.2s ease;   /* hover, focus */
--transition-medium: 0.4s ease; /* open/close */
--transition-slow: 0.6s ease;   /* scroll reveal */

断点 —— 用于响应式：

mobile / tablet / desktop / wide

交付一份完整的、可直接复制粘贴的

:root

代码块。

Step 5 — Derive the Components

步骤5 —— 推导组件

Every component is justified by the project's identity. Don't copy generic UI patterns.

Required components to define:

Buttons (primary, secondary, text link) — shape, padding, typography, hover/active/focus states
Cards (if applicable) — background, border, radius, no shadow unless justified
Navigation — structure, scroll behavior, responsive
Forms (if applicable) — fields, labels, focus states
Images — treatment (filters or not), radius, overlay if text on top

For each component, provide the complete CSS with interactive states.

Rule: every component choice must be justifiable by the anchoring. "Why are the buttons pill-shaped?" — "Because the rounded/angular contrast reflects metalwork that is both fluid and structured." If you can't justify it, it's an arbitrary choice.

每个组件都要符合项目定位，不要复制通用UI模式。

必须定义的组件：

按钮（主按钮、次按钮、文本链接）—— 形状、内边距、排版、hover/active/focus状态
卡片（如果适用）—— 背景、边框、圆角、除非有理由否则不用阴影
导航 —— 结构、滚动行为、响应式
表单（如果适用）—— 输入框、标签、focus状态
图片 —— 处理方式（是否加滤镜）、圆角、如果上面有文本则加蒙层

为每个组件提供带交互状态的完整CSS代码。

规则：每个组件的选择都必须能通过锚点解释。「为什么按钮是药丸形？」——「因为圆角和棱角的对比对应金属工艺兼具流畅和结构化的特点。」如果你解释不了，说明这个选择是随意的。

Step 6 — Write the Absolute Rules

步骤6 —— 编写绝对规则

This is what transforms a palette into a language. Without rules, the design system disintegrates at the first developer (or AI agent) who implements it.

Write between 8 and 12 rules. Each rule is:

Binary — not "prefer warm tones" but "never use pure white, the lightest white is #F0EBE3"
Verifiable — you can look at any element on the site and say whether the rule is respected or not
Justified — each rule exists for a functional reason, not an aesthetic one

Typical rule categories:

Color + interactivity: "This color = interactive. If it is this color, it is clickable."
Color + rarity: "This color = reserved for [specific usage]. Nowhere else."
Extremes: "No pure white / no pure black" or "No medium gray — either light or dark"
Shadows: "No box-shadow" or "Shadow only on floating elements (modals, dropdowns)"
Images: "No CSS filters" or "All images in B&W except [exception]"
Typography: "Serif never goes to body" or "Maximum 2 font weights"
Animation: "Translate max Xpx" or "No animation on body text"
Accessibility: "The primary CTA is always visible" or "Minimum AA contrast on all text"

这是把调色板变成设计语言的关键。没有规则的话，第一个实现的开发者（或AI Agent）就会让设计系统分崩离析。

编写8-12条规则，每条规则要符合：

二元性 —— 不是「优先使用暖色调」，而是「绝对不要使用纯白，最浅的白色是#F0EBE3」
可验证 —— 你可以查看网站上的任意元素，判断是否符合规则
有依据 —— 每条规则都有功能层面的理由，不是单纯审美原因

典型规则类别：

颜色+交互：「这个颜色=可交互。只要是这个颜色，就可以点击。」
颜色+稀缺性：「这个颜色=仅用于[特定场景]，其他地方不得使用。」
极端值：「不允许用纯白/纯黑」或「不允许用中灰色，要么浅要么深」
阴影：「不允许用box-shadow」或「仅浮动元素（模态框、下拉菜单）可以用阴影」
图片：「不允许用CSS滤镜」或「除了[例外场景]所有图片都用黑白」
排版：「衬线字体绝对不用作正文」或「最多使用2种字重」
动画：「位移最多Xpx」或「正文文本不要加动画」
可访问性：「主CTA始终可见」或「所有文本对比度至少达到AA级」

Deliverable Format

交付格式

The deliverable is a structured markdown file:

markdown

undefined

交付物为结构化的markdown文件：

markdown

undefined

[Project Name] — Design System "[System Name]"

[项目名称] —— 设计系统「[系统名称]」

Philosophy

设计理念

[The anchoring in 3-4 sentences. Why these choices, where they come from.]

[3-4句话说明锚点，解释这些选择的原因和来源。]

Colors — Tokens

配色 —— Tokens

Foundation

基础色

[Tokens --color-xxx: #hex; + 1 sentence explaining each color's role]

[Tokens --color-xxx: #hex; + 1句话说明每种颜色的角色]

[Accent family 1 — e.g., Copper]

[强调色系列1 —— 例如：铜色]

[3 stops (default/hover/pressed) as tokens + unique functional role]

[3个色阶（默认/hover/按下）的tokens + 唯一功能角色]

[Accent family 2 if applicable — e.g., Zinc]

[强调色系列2 如适用 —— 例如：锌色]

[3 stops as tokens + unique functional role]

[3个色阶的tokens + 唯一功能角色]

[Accent family 3 if applicable — e.g., Brass]

[强调色系列3 如适用 —— 例如：黄铜色]

[3 stops as tokens + unique functional role — justify why a 3rd family is necessary]

[3个色阶的tokens + 唯一功能角色 —— 说明需要第3个系列的理由]

Semantics

语义色

[Error/success/warning/info tokens — may reuse existing families]

[错误/成功/警告/提示tokens —— 可复用现有系列]

Contrast Table

对比度表格

[验证网站上所有文本/背景组合的表格。格式： | 组合 | 对比度 | 状态 | | --color-texte on --color-fond | X.X:1 | AA 合格 / 不合格 | 最低要求：所有组合都满足accessibility-checklist.md第1部分的要求。]

Application Rules

应用规则

[How to use colors depending on dark/light background context. Which colors change between the two contexts, which stay the same.]

[根据深色/浅色背景上下文如何使用颜色。哪些颜色在两种上下文间会变化，哪些保持不变。]

Typography

排版

Fonts

字体

[Names + copy-pasteable @import line: @import url('https://fonts.googleapis.com/css2?family=...'); Include fallback: --font-display: 'Name', category;]

[字体名称 + 可复制的@import语句： @import url('https://fonts.googleapis.com/css2?family=...'); 包含 fallback: --font-display: 'Name', category;]

Typographic Scale

字号体系

[Tokens with clamp() for each level: display, h1, h2, h3, body, small, label Each level with: font-size, line-height, font-weight, letter-spacing if applicable]

[每个层级带clamp()的tokens： display, h1, h2, h3, body, small, label 每个层级包含：font-size, line-height, font-weight, 字间距（如适用）]

Application Rules

应用规则

[Which font for what (display = headings only, body = everything else). Allowed weights (max 3). Italic: if yes, under what conditions. Display NEVER goes to body. Body NEVER goes to headings.]

[字体适用场景（展示字体仅用于标题，正文字体用于其他所有内容）。允许的字重（最多3种）。斜体：如果允许，说明适用场景。展示字体绝对不用作正文。正文字体绝对不用作标题。]

Spacing

间距

[Complete scale xs -> 5xl with values.

Usage summary:

Micro (xs-sm): inside components
Small (md): between elements within a block
Medium (lg-xl): component padding
Large (2xl-3xl): between sections
Very large (4xl-5xl): structural breathing room]

[完整的xs -> 5xl间距体系及对应数值。

使用说明：

微间距（xs-sm）：组件内部
小间距（md）：模块内元素之间
中间距（lg-xl）：组件内边距
大间距（2xl-3xl）：区块之间
超大间距（4xl-5xl）：结构留白]

Components

组件

Buttons

按钮

[Complete CSS: primary, secondary, text link. Each variant with :hover, :active, :focus-visible, :disabled. Padding, typography, radius justified by the anchoring.]

[完整CSS：主按钮、次按钮、文本链接。每个变体包含:hover, :active, :focus-visible, :disabled状态。内边距、排版、圆角需通过锚点解释合理性。]

Cards

卡片

[Complete CSS: background, border, radius, padding, interactive states if applicable. Variant on dark background AND on light background.]

[完整CSS：背景、边框、圆角、内边距、交互状态（如适用）。包含深色背景和浅色背景下的变体。]

Navigation

Forms

表单

[Complete CSS: field, label, placeholder, focus, error. If the project has no forms, write "Not applicable" and justify.]

[完整CSS：输入框、标签、占位符、focus状态、错误状态。如果项目没有表单，写「不适用」并说明理由。]

Images

图片

[Default treatment: radius, recommended aspect-ratio. Overlay if text on top: gradient direction + opacity. CSS filters: yes/no, justified by the anchoring. Rule: photos of real content = never filtered.]

[默认处理方式：圆角、推荐宽高比。文本叠加时的蒙层：渐变方向+透明度。 CSS滤镜：是/否，通过锚点解释合理性。规则：真实内容的照片=绝对不加滤镜。]

Iconography

图标

[Single chosen source (Lucide, Phosphor, Tabler, Heroicons...) + justification. Single style: outline / filled / duotone. Stroke width if outline. Sizes on grid: --icon-sm (16px), --icon-md (20px), --icon-lg (24px), --icon-xl (32px). Color by context: in a button = button color, standalone = muted text, interactive = action.]

[单一选定来源（Lucide、Phosphor、Tabler、Heroicons...）+ 合理性说明。单一风格：轮廓/填充/双色调。如果是轮廓风格说明描边宽度。网格对齐尺寸：--icon-sm (16px), --icon-md (20px), --icon-lg (24px), --icon-xl (32px)。按上下文配色：按钮内图标=按钮颜色、独立图标=弱化文本色、可交互图标=操作色。]

Animations

动画

Principles

设计原则

[What gets animated and why. The three jobs: guide, confirm, create continuity.]

[什么元素需要动画以及原因。三个核心作用：引导、确认、创造连贯性。]

Speed Tokens

速度Tokens

[--transition-fast, --transition-medium, --transition-slow with duration + easing]

[--transition-fast, --transition-medium, --transition-slow 对应的时长+缓动函数]

Patterns

模式

[Ready CSS for:

Hover/focus (fast)
Menu/modal open/close (medium)
Scroll reveal (slow) — with JS IntersectionObserver
Page load hero — staggered sequence Each pattern justified by the anchoring: an artisan site does not move like a SaaS.]

[现成CSS：

Hover/focus（快）
菜单/模态框打开/关闭（中）
滚动显示（慢）—— 配合JS IntersectionObserver
首页加载 —— 错落序列每个模式都要通过锚点解释合理性：手工匠人网站的动效不能和SaaS网站一样。]

Responsive

响应式

Breakpoints

断点

[Exact values: mobile < 768px, tablet 768-1023px, desktop 1024-1439px, wide >= 1440px]

[精确数值：mobile < 768px, tablet 768-1023px, desktop 1024-1439px, wide >= 1440px]

Behavior per Breakpoint

各断点行为

[Summary table for each breakpoint: grid columns, section spacing, nav behavior, image sizing]

[各断点的汇总表：网格列数、区块间距、导航行为、图片尺寸]

Container

容器

[--container-max, --container-padding (with clamp for mobile)]

[--container-max, --container-padding（移动端用clamp适配）]

Accessibility

可访问性

Validated Contrasts

已验证对比度

[Recap of the contrast table from the Colors section — or reference to it. Confirmation that ALL pairs pass AA.]

[重述配色部分的对比度表格，或引用该表格。确认所有组合都通过AA级标准。]

Focus

Focus状态

[CSS for global :focus-visible. Variants if needed (dark background vs light background).]

[全局:focus-visible的CSS。如果需要包含深色/浅色背景的变体。]

Reduced Motion

减少动画偏好

[CSS block @media (prefers-reduced-motion: reduce) — mandatory, copy-pasteable.]

[CSS块 @media (prefers-reduced-motion: reduce) —— 必填，可直接复制。]

Touch Targets

点击热区

[Reminder: min 44x44px on all clickable elements. List of at-risk elements in this specific project.]

[提醒：所有可点击元素最小尺寸为44x44px。列出本项目中需要注意的高风险元素。]

Complete CSS Tokens — Copy-Paste

完整CSS Tokens —— 可直接复制

[Single COMPLETE :root block. Everything above condensed into one copy-pasteable block. Includes: colors, typography, spacing, radius, borders, shadows, transitions, layout, z-index, icons. No superfluous comments — just tokens with a role comment per line.]

[单一完整的:root代码块。把上述所有内容浓缩成一个可直接复制粘贴的块。包含：颜色、排版、间距、圆角、边框、阴影、过渡、布局、z-index、图标。无多余注释——每行仅保留token和功能说明注释。]

Theme Switching (if applicable)

主题切换（如适用）

If the project requires both light and dark modes, structure tokens using

[data-theme]

attributes:

css

:root, [data-theme="dark"] {
  /* dark tokens (default) */
}

[data-theme="light"] {
  /* light overrides */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* auto-detect for users without explicit preference */
  }
}

Define which tokens change between themes and which remain constant. The action color family typically stays the same; foundation colors invert.

如果项目需要同时支持明暗模式，使用

[data-theme]

属性组织tokens：

css

:root, [data-theme="dark"] {
  /* 深色tokens（默认） */
}

[data-theme="light"] {
  /* 浅色模式覆盖 */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* 无明确偏好的用户自动适配 */
  }
}

定义哪些token在主题切换时会变化，哪些保持不变。操作色系列通常保持不变；基础色会反转。

Absolute Rules

绝对规则

[8-12 numbered rules. Each rule is:

Binary (yes/no, never "prefer")
Verifiable (any element can be audited)
Justified (one sentence explaining why) Example categories: color+interactivity, color+rarity, extremes (white/black), shadows, images, typography, animation, accessibility.]

undefined

[8-12条编号规则。每条规则符合：

二元性（是/否，绝对不用「优先」这类表述）
可验证（任意元素都可审计）
有依据（一句话说明理由）示例类别：颜色+交互、颜色+稀缺性、极端值（白/黑）、阴影、图片、排版、动画、可访问性。]

undefined

Anti-Patterns — What This Skill NEVER Does

反模式 —— 本Skill绝对不会做的事

Start from a design trend instead of the real subject. No "let's do brutalist" or "let's do glassmorphism" without the anchoring justifying it.
Propose colors without a functional role. Every color has a job or it goes.
Use generic fonts (Inter, Roboto, Arial) unless the project explicitly demands absolute neutrality.
Deliver a palette without usage rules. Colors without rules are a Figma collecting dust.
Copy industry codes. "Lawyer site = navy blue + gold" is a template, not design. The anchoring must be specific to the client, not their industry.
Mix temperatures without reason. If the foundation is warm, cool accents must be justified (and vice versa).
Propose more than 3 accent families. More colors = less coherence. Constraint is a tool.

从设计趋势出发而非真实项目主体。没有锚点支撑的话，绝对不会说「我们做粗野主义风格」或者「我们做玻璃拟态风格」。
提供没有功能角色的颜色。 每种颜色都要有用途，否则就删掉。
使用通用字体（Inter、Roboto、Arial），除非项目明确要求绝对中立。
交付没有使用规则的调色板。 没有规则的颜色只是Figma里落灰的素材。
复制行业通用模板。「律师网站=藏蓝+金色」是模板，不是设计。锚点必须是客户特有的，而不是其行业通用的。
无理由混合色温。 如果基础色是暖色调，冷色强调色必须有合理依据（反之亦然）。
提供超过3个强调色系列。 颜色越多一致性越差，约束是有效的工具。

Creation Workflow

创建工作流

Collect inputs (ask questions if needed)
Propose the anchoring — validate it with the user before continuing
Propose 2-3 visual directions (moodboards via Visualizer if available) — the user picks one
Run through the 6 steps for the chosen direction
Deliver the complete markdown document
Iterate if the user wants adjustments

The moodboard in step 3 matters: show rather than describe. If a visualization tool is available (HTML widget, Visualizer, etc.), create a visual moodboard with the hero mockup, palette swatches, typography specimen, and guiding principles. The user must see before they validate.

If no visualization tool is available (no

visualize:show_widget

or similar), present the moodboard as:

An HTML file written to disk that the user can open in their browser
Or a structured comparison table in markdown showing: palette swatches (hex values), font names + specimen text, key rules, and a hero mockup description

收集输入（如有需要询问用户问题）
提议锚点——在继续之前先和用户确认
提供2-3个视觉方向（如果有Visualizer工具可以生成情绪板）——用户选择其中一个
针对选中的方向执行6个步骤
交付完整的markdown文档
如果用户需要调整则迭代优化

第3步的情绪板很重要：可视化展示比口头描述好。如果有可视化工具可用（HTML组件、Visualizer等），创建包含首页样例、调色板色卡、排版样例和指导原则的视觉情绪板。用户确认前必须能看到实际效果。

如果没有可用的可视化工具（没有

visualize:show_widget

之类的能力），可以用以下形式展示情绪板：

写入磁盘的HTML文件，用户可以在浏览器中打开
或者用markdown写结构化对比表，展示：调色板色卡（hex值）、字体名称+样例文本、核心规则、首页样例描述

Specificity Test

特异性测试

Before delivering, run every design choice through this filter: can you replace the project name with a competitor's name and have the design system still work? If yes, the anchoring is too generic. Go back to Step 1.

交付前，把所有设计选择过一遍这个测试：你能不能把项目名称换成竞品的名称，这套设计系统仍然适用？如果可以，说明锚点太通用了，回到第一步重新调整。

Reference Files

参考文件

The

references/

folder contains support material. Read the relevant file BEFORE the corresponding step, not all at once at the start.

File	When to read	Content
`references/anchoring-examples.md`	Step 1 — before formulating the anchoring	6 complete anchoring examples with thought process, red flags, and validation checklist
`references/font-pairings.md`	Step 3 — before choosing typography	20 pairs organized by universe (craft, architecture, gastronomy, tech, luxury, sport, wellness) with ready Google Fonts / Fontshare imports
`references/root-template.md`	Step 4 — before setting tokens	Complete CSS `:root` skeleton with all categories (colors, typography, spacing, radius, shadows, transitions, layout, z-index) and completeness checklist
`references/moodboard-template.md`	Step 3 — to create the visual moodboard	Ready HTML template for the Visualizer with variables to replace, showing palette + typography + hero + cards + rules in a single widget
`references/spacing-guide.md`	Step 4 — after the root-template	When to use which spacing token. Mapping micro (xs-sm) -> structural (4xl-5xl) with concrete examples per context
`references/component-patterns.md`	Step 5 — before deriving components	Complete CSS templates for buttons, cards, navigation, forms, images + iconography rules
`references/responsive-rules.md`	Step 5 — in parallel with components	Behavior per breakpoint, grid patterns, calibrated clamp(), responsive navigation, touch targets
`references/motion-principles.md`	Step 5 — after components	5 motion patterns (hover, open, scroll reveal, page load, smooth scroll) with ready CSS. No tool prescribed.
`references/accessibility-checklist.md`	All steps — continuous verification	WCAG AA contrast, visible focus, touch targets, reduced motion, accessible typography, HTML semantics

references/

文件夹包含支撑材料。在执行对应步骤前阅读相关文件，不要一开始就全部读完。

文件	阅读时机	内容
`references/anchoring-examples.md`	步骤1 —— 制定锚点之前	6个完整的锚点示例，包含思考过程、风险点和验证检查清单
`references/font-pairings.md`	步骤3 —— 选择排版之前	20组按场景分类的字体搭配（手工、建筑、美食、科技、奢侈品、运动、健康），包含现成的Google Fonts / Fontshare导入语句
`references/root-template.md`	步骤4 —— 设置tokens之前	完整的CSS `:root` 骨架，包含所有类别（颜色、排版、间距、圆角、阴影、过渡、布局、z-index）和完整性检查清单
`references/moodboard-template.md`	步骤3 —— 创建视觉情绪板时	适用于Visualizer的现成HTML模板，包含可替换变量，在单个组件中展示调色板+排版+首页+卡片+规则
`references/spacing-guide.md`	步骤4 —— 写完root模板之后	不同间距token的适用场景，从微间距（xs-sm）到结构间距（4xl-5xl）的对应场景示例
`references/component-patterns.md`	步骤5 —— 推导组件之前	按钮、卡片、导航、表单、图片的完整CSS模板，以及图标使用规则
`references/responsive-rules.md`	步骤5 —— 和组件开发并行	各断点行为、网格模式、校准后的clamp()、响应式导航、点击热区要求
`references/motion-principles.md`	步骤5 —— 组件开发完成后	5种动效模式（hover、打开、滚动显示、页面加载、平滑滚动）的现成CSS，无工具依赖
`references/accessibility-checklist.md`	所有步骤 —— 持续验证	WCAG AA对比度、可见focus状态、点击热区、减少动画适配、可访问排版、HTML语义要求