Back to Details

design-brief

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Brief Skill

Design Brief 技能

Parse a structured design brief into a concrete DESIGN.md and optional visual preview. Agent, follow this workflow exactly.
将结构化设计 brief 解析为具体的DESIGN.md文件和可选的视觉预览。Agent请严格遵循此工作流程。

Background

背景

The 8 dimensions in this skill are derived from analysis of the 71 design systems bundled with Open Design. Every DESIGN.md in 
design-systems/
resolves at minimum: color palette, accent, typography, display font, layout model, and component style. We distilled these into 8 orthogonal dimensions that cover the decisions a designer makes before any pixel is placed. Mood and density were added because they are the two most common sources of ambiguity in natural language briefs ("make it clean" means different things to different people).
Dimensions intentionally excluded from the brief level: animation timing, responsive strategy, and accessibility contrast. These are enforced at the template level by individual skills (e.g., 
saas-landing
handles its own responsive logic), though the generated DESIGN.md includes sensible breakpoint defaults for downstream consumption.
本技能中的8个维度源自对Open Design附带的71个设计系统的分析。
design-systems/
目录下的每个DESIGN.md文件至少会明确以下内容：调色板、强调色、排版、展示字体、布局模型和组件样式。我们将这些提炼为8个独立维度，涵盖设计师在绘制任何像素前需要做出的所有决策。新增风格氛围（Mood）和密度（Density）维度，是因为它们是自然语言设计 brief 中最常见的歧义来源（比如“做得简洁些”对不同人含义不同）。
设计 brief 层级刻意排除的维度：动画时长、响应式策略和无障碍对比度。这些由各个独立技能在模板层面强制执行（例如
saas-landing
技能自行处理响应式逻辑），不过生成的DESIGN.md会包含合理的断点默认值供下游使用。

1. Accept input

1. 接受输入

The user provides a design brief in one of two formats:
用户提供的设计 brief 有两种格式：

Option A: I-Lang structured brief

选项A：I-Lang结构化设计 brief

[PLAN:@DESIGN|type=saas_landing]
  |palette=navy_and_white|accent=coral
  |typography=inter|display=space_grotesk
  |layout=single_column|max_width=1200px
  |mood=professional_minimal
  |density=spacious|section_gap=96px
  |hero=headline+subhead+cta
  |sections=features,pricing,testimonials,footer
  |exclude=animations,parallax,gradients
  |responsive=mobile_first
[PLAN:@DESIGN|type=saas_landing]
  |palette=navy_and_white|accent=coral
  |typography=inter|display=space_grotesk
  |layout=single_column|max_width=1200px
  |mood=professional_minimal
  |density=spacious|section_gap=96px
  |hero=headline+subhead+cta
  |sections=features,pricing,testimonials,footer
  |exclude=animations,parallax,gradients
  |responsive=mobile_first

Option B: Natural language

选项B：自然语言

"I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations."
If the user provides Option B, convert it to the structured format using the mapping table below, then proceed. Identify every dimension explicitly stated and flag dimensions that were left unspecified.
"我需要一个开发者工具的落地页。简洁、极简风格，支持深色模式。使用Inter字体。不要花哨的动画。"
如果用户提供选项B，需使用下方映射表将其转换为结构化格式，再继续执行流程。识别所有明确表述的维度，并标记未指定的维度。

Natural language → I-Lang mapping

自然语言 → I-Lang映射表

For each sentence in the natural language input, identify dimension keywords and map to the closest structured value:
Natural language phraseDimensionI-Lang value
"dark mode", "dark theme"palette
monochrome_dark
"light", "white background"palette
light_clean
"earthy", "warm tones"palette
earth_tones
"pop of color", "vibrant"accent
electric_blue
(default) or 
coral
"subtle accent"accent
muted_sage
(default) or 
slate
"clean", "minimal", "simple"mood
professional_minimal
"playful", "fun", "friendly"mood
playful
"bold", "brutalist", "raw"mood
brutalist
"editorial", "magazine-like"mood
editorial
"spacious", "lots of whitespace"density
spacious
"compact", "dense", "information-rich"density
compact
"Inter", "system font"typography
inter
(default) or 
system_ui
"serif", "traditional"typography
georgia
(default) or 
playfair
"monospace", "code-like"typography
jetbrains_mono
"no animations", "static"exclude
animations
"no gradients"exclude
gradients
"no stock photos"exclude
stock_photos
"single page"layout
single_column
"two columns", "sidebar"layout
two_column
"mobile first"responsive
mobile_first
When a phrase maps to multiple dimensions (e.g. "clean dark landing page" → mood=professional_minimal + palette=monochrome_dark + layout=single_column), resolve each dimension independently. When multiple values are listed for a single mapping, the first is the default; the agent may select the alternative only if surrounding context strongly favors it.
针对自然语言输入中的每一句话，识别维度关键词并映射到最接近的结构化值：
自然语言表述维度I-Lang值
"dark mode"、"dark theme"palette
monochrome_dark
"浅色"、"白色背景"palette
light_clean
"大地色系"、"暖色调"palette
earth_tones
"亮色点缀"、"充满活力"accent
electric_blue
（默认）或
coral
"柔和点缀色"accent
muted_sage
（默认）或
slate
"简洁"、"极简"、"简约"mood
professional_minimal
"活泼"、"有趣"、"友好"mood
playful
"大胆"、"粗野主义"、"原始风格"mood
brutalist
"编辑风格"、"杂志风"mood
editorial
"宽松"、"大量留白"density
spacious
"紧凑"、"密集"、"信息丰富"density
compact
"Inter"、"系统字体"typography
inter
（默认）或
system_ui
"衬线体"、"传统风格"typography
georgia
（默认）或
playfair
"等宽字体"、"代码风格"typography
jetbrains_mono
"无动画"、"静态"exclude
animations
"无渐变"exclude
gradients
"无库存图片"exclude
stock_photos
"单页"layout
single_column
"双栏"、"侧边栏"layout
two_column
"移动端优先"responsive
mobile_first
当一个表述映射到多个维度时（例如“简洁深色落地页”→ mood=professional_minimal + palette=monochrome_dark + layout=single_column），需独立解析每个维度。当单个映射列出多个值时，第一个为默认值；只有当上下文强烈支持时，Agent才可选择替代值。

2. Validate dimensions

2. 验证维度

Every design brief must resolve these 8 dimensions. If any are missing from the input, select sensible defaults using the rules in Section 2.2.
The values listed below form a closed vocabulary. Only values in this table have concrete token mappings in Section 2.1. If the user provides a value not listed here, the agent must prompt for clarification rather than guessing.
#DimensionKeyExample values
1Color palette
palette
navy_and_white, earth_tones, monochrome_dark, light_clean
2Accent color
accent
coral, electric_blue, emerald, muted_sage
3Body typography
typography
inter, system_ui, dm_sans, georgia
4Display typography
display
space_grotesk, clash_display, same_as_body, playfair
5Layout model
layout
single_column, two_column, asymmetric
6Mood
mood
professional_minimal, playful, brutalist, editorial
7Density
density
compact, balanced, spacious
8Constraints
exclude
animations, gradients, stock_photos, carousel
每个设计 brief 必须明确这8个维度。如果输入中缺少任何维度，需使用2.2节的规则选择合理的默认值。
下表列出的数值构成一个封闭词汇表。只有此表中的值在2.1节中有具体的令牌映射。如果用户提供表中未列出的值，Agent必须提示用户澄清，而非自行猜测。
#维度键示例值
1调色板
palette
navy_and_white, earth_tones, monochrome_dark, light_clean
2强调色
accent
coral, electric_blue, emerald, muted_sage
3正文排版
typography
inter, system_ui, dm_sans, georgia
4展示排版
display
space_grotesk, clash_display, same_as_body, playfair
5布局模型
layout
single_column, two_column, asymmetric
6风格氛围
mood
professional_minimal, playful, brutalist, editorial
7密度
density
compact, balanced, spacious
8约束条件
exclude
animations, gradients, stock_photos, carousel

2.1 Symbolic → concrete token resolution

2.1 符号值 → 具体令牌解析

Each symbolic value maps to concrete design tokens. The agent must resolve these before writing DESIGN.md:
Symbolic valueConcrete tokens
palette=navy_and_white
Background: #0F172A, Surface: #1E293B, Text: #F8FAFC, Secondary: #94A3B8
palette=monochrome_dark
Background: #09090B, Surface: #18181B, Text: #FAFAFA, Secondary: #A1A1AA
palette=light_clean
Background: #FFFFFF, Surface: #F8FAFC, Text: #0F172A, Secondary: #64748B
palette=earth_tones
Background: #FFFBEB, Surface: #FEF3C7, Text: #451A03, Secondary: #92400E
accent=coral
Accent: #F97316, Hover: #EA580C
accent=electric_blue
Accent: #3B82F6, Hover: #2563EB
accent=emerald
Accent: #10B981, Hover: #059669
accent=muted_sage
Accent: #84A98C, Hover: #6B8F73
accent=slate
Accent: #64748B, Hover: #475569
typography=inter
Body: Inter, 400, 1rem/1.6
typography=system_ui
Body: system-ui, 400, 1rem/1.6
typography=dm_sans
Body: DM Sans, 400, 1rem/1.6
typography=georgia
Body: Georgia, 400, 1.125rem/1.7
display=space_grotesk
Display: Space Grotesk, 700, clamp(2rem, 5vw, 3.5rem)
display=clash_display
Display: Clash Display, 700, clamp(2rem, 5vw, 3.5rem)
display=playfair
Display: Playfair Display, 700, clamp(2rem, 5vw, 3.5rem)
display=same_as_body
Display inherits body font family, weight 600
density=compact
Section spacing: 48px, Content padding: 16px/24px
density=balanced
Section spacing: 72px, Content padding: 24px/40px
density=spacious
Section spacing: 96px, Content padding: 24px/48px
Symbolic values not in this table are not valid. If the user provides an unrecognized value (e.g., 
palette=ocean_blue
), the agent must prompt for clarification: "I don't recognize 
palette=ocean_blue
. Did you mean 
navy_and_white
, 
monochrome_dark
, 
light_clean
, or 
earth_tones
?"
每个符号值都映射到具体的设计令牌。Agent在编写DESIGN.md前必须解析这些值：
符号值具体令牌
palette=navy_and_white
背景色: #0F172A, 表层色: #1E293B, 文本色: #F8FAFC, 次要文本色: #94A3B8
palette=monochrome_dark
背景色: #09090B, 表层色: #18181B, 文本色: #FAFAFA, 次要文本色: #A1A1AA
palette=light_clean
背景色: #FFFFFF, 表层色: #F8FAFC, 文本色: #0F172A, 次要文本色: #64748B
palette=earth_tones
背景色: #FFFBEB, 表层色: #FEF3C7, 文本色: #451A03, 次要文本色: #92400E
accent=coral
强调色: #F97316, 悬停色: #EA580C
accent=electric_blue
强调色: #3B82F6, 悬停色: #2563EB
accent=emerald
强调色: #10B981, 悬停色: #059669
accent=muted_sage
强调色: #84A98C, 悬停色: #6B8F73
accent=slate
强调色: #64748B, 悬停色: #475569
typography=inter
正文: Inter, 400, 1rem/1.6
typography=system_ui
正文: system-ui, 400, 1rem/1.6
typography=dm_sans
正文: DM Sans, 400, 1rem/1.6
typography=georgia
正文: Georgia, 400, 1.125rem/1.7
display=space_grotesk
展示字体: Space Grotesk, 700, clamp(2rem, 5vw, 3.5rem)
display=clash_display
展示字体: Clash Display, 700, clamp(2rem, 5vw, 3.5rem)
display=playfair
展示字体: Playfair Display, 700, clamp(2rem, 5vw, 3.5rem)
display=same_as_body
展示字体继承正文字体家族，字重600
density=compact
区块间距: 48px, 内容内边距: 16px/24px
density=balanced
区块间距: 72px, 内容内边距: 24px/40px
density=spacious
区块间距: 96px, 内容内边距: 24px/48px
不在此表中的符号值无效。如果用户提供未识别的值（例如
palette=ocean_blue
），Agent必须提示用户澄清：“我无法识别
palette=ocean_blue
。您是指
navy_and_white
、
monochrome_dark
、
light_clean
还是
earth_tones
？”

2.2 Default resolution rules

2.2 默认值解析规则

When a dimension is unspecified, defaults are selected based on mood compatibility:
Unspecified dimensionDefault rule
palette
If mood=editorial → 
light_clean
. If mood=brutalist → 
monochrome_dark
. Otherwise → 
light_clean
.
accent
If palette is dark → 
coral
. If palette is light → 
electric_blue
.
typography
Always → 
inter
(highest cross-platform legibility).
display
If mood=editorial → 
playfair
. If mood=brutalist → 
space_grotesk
. Otherwise → 
same_as_body
.
layout
Always → 
single_column
(safest responsive default).
mood
Always → 
professional_minimal
(least opinionated).
density
Always → 
balanced
.
exclude
Always → none (no constraints unless specified).
If mood is also unspecified, all defaults fall back to the safe neutral set: 
palette=light_clean
, 
accent=electric_blue
, 
typography=inter
, 
display=same_as_body
, 
layout=single_column
, 
mood=professional_minimal
, 
density=balanced
, 
exclude=none
.
当某个维度未指定时，需根据风格氛围的兼容性选择默认值：
未指定维度默认规则
palette
如果mood=editorial → 
light_clean
；如果mood=brutalist → 
monochrome_dark
；否则 → 
light_clean
accent
如果调色板为深色 → 
coral
；如果调色板为浅色 → 
electric_blue
typography
始终 → 
inter
（跨平台可读性最高）
display
如果mood=editorial → 
playfair
；如果mood=brutalist → 
space_grotesk
；否则 → 
same_as_body
layout
始终 → 
single_column
（最安全的响应式默认值）
mood
始终 → 
professional_minimal
（最中立无倾向）
density
始终 → 
balanced
exclude
始终 → none（除非指定，否则无约束）
如果风格氛围也未指定，所有默认值将回退到安全的中性组合：
palette=light_clean
、
accent=electric_blue
、
typography=inter
、
display=same_as_body
、
layout=single_column
、
mood=professional_minimal
、
density=balanced
、
exclude=none
。

3. Generate DESIGN.md

3. 生成DESIGN.md

This skill generates a new DESIGN.md from scratch based on the resolved brief dimensions. If a DESIGN.md already exists in the working directory, the agent should ask the user whether to overwrite or skip.
Produce a DESIGN.md following Open Design's 9-section convention. All color hex values, font stacks, and spacing values must come from the resolved tokens in Section 2.1 — do not invent values outside the resolution table.
markdown
undefined
本技能会根据解析后的设计 brief 维度从头生成新的DESIGN.md文件。如果工作目录中已存在DESIGN.md文件，Agent应询问用户是覆盖还是跳过。
遵循Open Design的9节规范生成DESIGN.md文件。所有颜色十六进制值、字体栈和间距值必须来自2.1节中解析后的令牌——不得使用解析表之外的自定义值。
markdown
undefined

[Project Name] Design System

[项目名称] 设计系统

Visual Theme & Atmosphere

视觉主题与氛围

  • Mood: [resolved from mood]
  • Feel: [derived from mood — e.g., professional_minimal → "Clean, confident, restrained"]
  • References: [if mood=editorial → "Magazine layouts, Monocle, Cereal"; if mood=brutalist → "Exposed structure, raw typography"]
  • 风格氛围: [从mood解析得到]
  • 质感: [从mood衍生，例如professional_minimal → "简洁、自信、克制"]
  • 参考案例: [如果mood=editorial → "杂志排版、Monocle、Cereal"; 如果mood=brutalist → "暴露结构、原始排版"]

Color Palette & Roles

调色板与角色

  • Background: [resolved from palette]
  • Surface: [resolved from palette]
  • Text primary: [resolved from palette]
  • Text secondary: [resolved from palette]
  • Accent: [resolved from accent]
  • Accent hover: [resolved from accent]
  • 背景色: [从palette解析得到]
  • 表层色: [从palette解析得到]
  • 主文本色: [从palette解析得到]
  • 次文本色: [从palette解析得到]
  • 强调色: [从accent解析得到]
  • 强调悬停色: [从accent解析得到]

Typography Rules

排版规则

  • Display: [resolved from display], 700, clamp(2rem, 5vw, 3.5rem)
  • Body: [resolved from typography], 400, 1rem/1.6
  • Mono: JetBrains Mono, 400, 0.875rem
  • 展示字体: [从display解析得到], 700, clamp(2rem, 5vw, 3.5rem)
  • 正文字体: [从typography解析得到], 400, 1rem/1.6
  • 等宽字体: JetBrains Mono, 400, 0.875rem

Component Stylings

组件样式

  • Buttons: [if mood=playful → "rounded-full", otherwise → "rounded-md"], accent bg, contrast text
  • Cards: surface bg, subtle border, 12px radius
  • Inputs: [if mood=brutalist → "thick border", otherwise → "transparent bg, bottom border"]
  • 按钮: [如果mood=playful → "rounded-full", 否则 → "rounded-md"], 强调色背景，对比色文本
  • 卡片: 表层色背景，细微边框，12px圆角
  • 输入框: [如果mood=brutalist → "粗边框", 否则 → "透明背景，底部边框"]

Layout Principles

布局原则

  • Max width: 1200px
  • Grid: [resolved from layout]
  • Section spacing: [resolved from density]
  • Content padding: [resolved from density]
  • 最大宽度: 1200px
  • 网格: [从layout解析得到]
  • 区块间距: [从density解析得到]
  • 内容内边距: [从density解析得到]

Depth & Elevation

层次与 elevation

  • Shadows: [if mood=brutalist → "hard 4px offset", if mood=professional_minimal → "none", otherwise → "subtle sm"]
  • Borders: 1px solid [derived from palette, 8% opacity of text color]
  • 阴影: [如果mood=brutalist → "4px硬偏移", 如果mood=professional_minimal → "无", 否则 → "细微阴影"]
  • 边框: 1px solid [从palette衍生，文本色8%透明度]

Do's and Don'ts

注意事项

  • DO use the declared color tokens exclusively.
  • DO maintain consistent section spacing.
  • DO ensure all text meets WCAG AA contrast ratio.
  • DON'T invent colors outside the palette.
  • DON'T add decorative shadows unless Depth & Elevation allows them.
  • DON'T use more than 2 display/body typefaces (monospace is a utility face for code and data — it does not count toward this limit).
  • 必须仅使用声明的颜色令牌。
  • 必须保持一致的区块间距。
  • 必须确保所有文本符合WCAG AA对比度标准。
  • 不得使用调色板之外的自定义颜色。
  • 除非层次与elevation部分允许，否则不得添加装饰性阴影。
  • 不得使用超过2种展示/正文字体（等宽字体是代码和数据的实用字体，不计入此限制）。

Responsive Behavior

响应式行为

  • Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
  • Mobile: single column, stack all sections vertically
  • Tablet: allow 2-column feature grids
  • Desktop: full layout with max-width constraint
  • Images: fluid, max-width 100%, maintain aspect ratio
  • 断点: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
  • 移动端: 单栏，所有区块垂直堆叠
  • 平板端: 允许双栏功能网格
  • 桌面端: 带最大宽度限制的完整布局
  • 图片: 流式布局，最大宽度100%，保持宽高比

Agent Prompt Guide

Agent提示指南

  • Do NOT invent colors outside this palette.
  • Do NOT add box-shadows unless specified above.
  • Accent color appears maximum 3 times per viewport.
  • All interactive elements need :focus-visible outline.
  • [if exclude contains items → list each as "Do NOT use {item}."]
undefined
  • 不得使用本调色板之外的颜色。
  • 除非上述指定，否则不得添加盒阴影。
  • 强调色在每个视口中最多出现3次。
  • 所有交互元素需要:focus-visible轮廓。
  • [如果exclude包含内容 → 列出每个项："不得使用{item}"]
undefined

4. Generate brief-preview.html

4. 生成brief-preview.html

Create a single HTML file that visually renders the resolved design tokens. The preview must contain these 4 sections in order:
  1. Color palette swatches — A horizontal row of rectangles, each showing one color from the Color section. Label each with its role (Background, Surface, Text, Accent) and hex code.
  2. Typography specimens — Three text blocks showing Display, Body, and Mono fonts at their declared sizes. Use a sample sentence ("The quick brown fox...") for each.
  3. Spacing ruler — A visual ruler or stacked bars showing section spacing and content padding values, labeled with their px values.
  4. Component preview — Render 2–3 live components (a primary button, a card with title/body, a text input) using the resolved tokens. These should be functional HTML/CSS, not screenshots.
Style the preview itself with the resolved design system tokens (background color, font, spacing). The preview should look like a design system documentation page.
创建一个HTML文件，可视化渲染解析后的设计令牌。预览必须按顺序包含以下4个部分：
  1. 调色板色板 — 水平排列的矩形，每个矩形显示颜色部分的一种颜色。标注每个颜色的角色（背景色、表层色、文本色、强调色）和十六进制代码。
  2. 排版样本 — 三个文本块，分别展示展示字体、正文字体和等宽字体的指定大小。每个文本块使用示例句子（"The quick brown fox jumps over the lazy dog..."）。
  3. 间距标尺 — 可视化标尺或堆叠条形图，展示区块间距和内容内边距的值，并标注其像素值。
  4. 组件预览 — 使用解析后的令牌渲染2-3个可交互组件（一个主按钮、一个带标题/正文的卡片、一个文本输入框）。这些应为可运行的HTML/CSS，而非截图。
使用解析后的设计系统令牌（背景色、字体、间距）为预览本身设置样式。预览应看起来像一个设计系统文档页面。

5. Report unspecified dimensions

5. 报告未指定维度

At the end of output, list any dimensions the user did not specify and the defaults that were applied, including the rule that selected each default:
Dimensions resolved from defaults:
- display: set to "same_as_body" (rule: mood=professional_minimal → same_as_body)
- density: set to "balanced" (rule: static fallback, no spacing preference given)
- exclude: set to "none" (rule: no constraints unless specified)
This transparency prevents silent assumptions from propagating into the final design.
在输出末尾，列出用户未指定的所有维度以及应用的默认值，包括选择每个默认值的规则：
通过默认值解析的维度:
- display: 设置为"same_as_body"（规则：mood=professional_minimal → same_as_body）
- density: 设置为"balanced"（规则：静态回退，未指定间距偏好）
- exclude: 设置为"none"（规则：除非指定，否则无约束）
这种透明度可防止隐性假设传播到最终设计中。