将基于 I-Lang 协议格式编写的结构化设计简报(design brief)解析为具体的设计规范(design spec)。通过要求明确指定调色板、字体排印、布局、风格氛围、元素密度和限制条件等维度,杜绝像“做高大上一点/专业一点”这类模糊需求带来的不确定性。 触发关键词:"design brief"、"create a design brief"、"ilang brief"、"structured brief"。
Design Brief Skill
将结构化的设计简报解析为具体的 DESIGN.md 及可选的视觉预览。Agent 请严格遵循以下工作流程。
背景
本 Skill 中的 8 个维度提炼自 Open Design 最初的 71 个设计系统样本目录;需要说明的是,71 只是研究样本量,并非当前内置系统的数量。在 design-systems/ 目录下的每个 DESIGN.md 依然至少包含以下决策解析:配色方案、强调色、正文字体、标题字体、布局模式和组件样式。我们将其浓缩为 8 个互相正交的维度,涵盖了设计师在落笔排版前需要做出的所有核心决策。之所以加入风格氛围(mood)和密度(density),是因为它们是自然语言简报中最容易产生歧义的两个来源(例如“做简洁点”对于不同的人来说含义千差万别)。
简报层级特意排除了以下维度:动画时长(animation timing)、响应式策略(responsive strategy)以及无障碍对比度(accessibility contrast)。这些规则由具体模板层级的 Skill 来强制落实(例如 saas-landing 会处理自身的响应式逻辑),不过生成的 DESIGN.md 仍会包含合理的默认断点供下游消费。
1. 接收输入
用户会通过以下两种格式之一提供设计简报:
方式 A:I-Lang 结构化简报
[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
方式 B:自然语言描述
"我需要一个开发者工具的落地页。干净、极简、暗黑模式。用 Inter 字体。不要花里胡哨的动画。"
若用户使用方式 B,请参照下方映射表将其转换为结构化格式,然后再继续执行。需要识别出所有明确给出的维度,并标出未指定的维度。
自然语言 → I-Lang 映射表
针对自然语言输入中的每一句话,识别出维度关键词并映射到最接近的结构化取值:
| 自然语言表述 | 对应维度 | I-Lang 取值 |
|---|---|---|
| "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(默认)或 coral |
| "subtle accent" | accent | muted_sage(默认)或 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(默认)或 system_ui |
| "serif", "traditional" | typography | georgia(默认)或 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 |
当短语跨越多个维度时(例如“clean dark landing page” → mood=professional_minimal + palette=monochrome_dark + layout=single_column),请独立解析各个维度。当单个映射中列出多个备选值时,第一个值即为默认选项;只有当上下文倾向性极强时,Agent 才可以选用备选项。
2. 校验维度
任何设计简报都必须解析这 8 个维度。如果输入中缺失了某维度,请根据 2.2 节的规则选取合理的默认值。
下方列出的取值构成了受限词汇表(closed vocabulary)。只有本表中的取值在 2.1 节中拥有具体的 Design Token 映射。如果用户提供了未在此列出的取值,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 抽象值 → 具体 Token 映射
每个抽象取值均映射到具体的 Design Token。在生成 DESIGN.md 之前,Agent 必须完成这些映射值的解析:
| 抽象取值 | 具体 Token 映射 |
|---|---|
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 继承正文字体系列,字重 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 默认解算规则
当未指定某个维度时,将根据与当前风格氛围(mood)的兼容性选取默认值:
| 未指定维度 | 默认解算规则 |
|---|---|
palette |
若 mood=editorial → light_clean;若 mood=brutalist → monochrome_dark;否则 → light_clean。 |
accent |
若 palette 为深色 → coral;若 palette 为浅色 → electric_blue。 |
typography |
始终 → inter(跨平台可读性最佳)。 |
display |
若 mood=editorial → playfair;若 mood=brutalist → space_grotesk;否则 → same_as_body。 |
layout |
始终 → single_column(最稳妥的响应式默认配置)。 |
mood |
始终 → professional_minimal(主观倾斜最少)。 |
density |
始终 → balanced。 |
exclude |
始终 → 无(未明确指定就不做限制)。 |
若风格氛围(mood)同样未指定,则所有默认值回退到中立安全配置集:palette=light_clean、accent=electric_blue、typography=inter、display=same_as_body、layout=single_column、mood=professional_minimal、density=balanced、exclude=none。
3. 生成 DESIGN.md
本 Skill 会根据解算后的简报维度从零生成全新的 DESIGN.md。如果当前工作目录中已存在 DESIGN.md,Agent 应询问用户是覆盖还是跳过。
请按照以下九个章节的大纲生成 DESIGN.md。该大纲继承自 Open Design 最初的上游基线,属于本 Skill 的轻量可移植输出,并非当前仓库包的 schema 结构。目前内置的完整安装包还会额外附带 manifest.json、tokens.css 及可选的丰富资源文件,但旧版以及用户手动安装的纯 DESIGN.md 内容依然保持兼容可读。所有的颜色 Hex 值、字体栈以及间距数值都必须来自于 2.1 节解算出的 Token,切勿捏造映射表之外的数值。
# [Project Name] Design System
## Visual Theme & Atmosphere
- Mood: [根据 mood 取值解算]
- Feel: [衍生自 mood — 例如:professional_minimal → "干净、自信、克制"]
- References: [若 mood=editorial → "杂志排版、Monocle、Cereal";若 mood=brutalist → "外露的结构、原始感字体排印"]
## Color Palette & Roles
- Background: [根据 palette 取值解算]
- Surface: [根据 palette 取值解算]
- Text primary: [根据 palette 取值解算]
- Text secondary: [根据 palette 取值解算]
- Accent: [根据 accent 取值解算]
- Accent hover: [根据 accent 取值解算]
## Typography Rules
- Display: [根据 display 取值解算], 700, clamp(2rem, 5vw, 3.5rem)
- Body: [根据 typography 取值解算], 400, 1rem/1.6
- Mono: JetBrains Mono, 400, 0.875rem
## Component Stylings
- Buttons: [若 mood=playful → "rounded-full",否则 → "rounded-md"], 强调色背景, 高对比度文本
- Cards: 卡片背景色, 微弱边框, 12px 圆角
- Inputs: [若 mood=brutalist → "粗边框",否则 → "透明背景,底部边框"]
## Layout Principles
- Max width: 1200px
- Grid: [根据 layout 取值解算]
- Section spacing: [根据 density 取值解算]
- Content padding: [根据 density 取值解算]
## Depth & Elevation
- Shadows: [若 mood=brutalist → "硬朗的 4px 偏移阴影",若 mood=professional_minimal → "无",否则 → "微弱 sm 阴影"]
- Borders: 1px 实线 [衍生自 palette,文本颜色 8% 不透明度]
## Do's and Don'ts
- 必须(DO)严格仅使用声明的颜色 Token。
- 必须(DO)保持统一的区块间距。
- 必须(DO)确保所有文本符合 WCAG AA 对比度标准。
- 严禁(DON'T)自创调色板之外的颜色。
- 严禁(DON'T)添加装饰性阴影,除非“Depth & Elevation”章节明确允许。
- 严禁(DON'T)使用超过 2 种标题/正文字体系列(等宽字体作为代码和数据的工具字体,不计入此限制)。
## Responsive Behavior
- Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
- Mobile: 单列布局,所有区块垂直堆叠
- Tablet: 允许 2 列特性的网格排版
- Desktop: 带有最大宽度限制的完整布局
- Images: 响应式流式缩放,最大宽度 100%,保持纵横比
## Agent Prompt Guide
- 切勿(Do NOT)自创本调色板之外的颜色。
- 切勿(Do NOT)添加盒阴影(box-shadow),除非上方已明确说明。
- Acce
<!-- truncated for translation batch; full body continues in source -->




