design-brief

设计简报技能

将结构化设计简报解析为具体的 DESIGN.md 和可选的视觉预览。Agent，请严格遵循此工作流。

背景

此技能中的 8 个维度源自对 Open Design 附带的 71 个设计系统的分析。design-systems/ 中的每个 DESIGN.md 至少确定了：调色板、强调色、字体排版、展示字体、布局模型和组件样式。我们将这些内容提炼为 8 个相互独立的维度，涵盖设计师在落笔像素之前所做的决策。我们还加入了氛围和密度，因为这两项最容易在自然语言简报中引发歧义（“做得简洁”对不同的人来说含义各不相同）。

有意不在简报层面涵盖的维度：动画时长、响应式策略和无障碍对比度。这些由各个技能在模板层面强制执行（例如，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 值
“深色模式”、“深色主题”	调色板	monochrome_dark
“浅色”、“白色背景”	调色板	light_clean
“大地色系”、“暖色调”	调色板	earth_tones
“点缀色”、“鲜艳”	强调色	electric_blue（默认）或 coral
“微妙的强调色”	强调色	muted_sage（默认）或 slate
“简洁”、“极简”、“简单”	氛围	professional_minimal
“活泼”、“有趣”、“友好”	氛围	playful
“大胆”、“粗野主义”、“原始”	氛围	brutalist
“编辑风格”、“杂志风”	氛围	editorial
“宽敞”、“留白多”	密度	spacious
“紧凑”、“密集”、“信息丰富”	密度	compact
“Inter”、“系统字体”	字体排版	inter（默认）或 system_ui
“衬线字体”、“传统”	字体排版	georgia（默认）或 playfair
“等宽字体”、“代码风格”	字体排版	jetbrains_mono
“不要动画”、“静态”	排除项	animations
“不要渐变”	排除项	gradients
“不要图库照片”	排除项	stock_photos
“单页”	布局	single_column
“两列”、“侧边栏”	布局	two_column
“移动端优先”	响应式	mobile_first

当一个短语映射到多个维度时（例如，“简洁的深色落地页” → 氛围=professional_minimal + 调色板=monochrome_dark + 布局=single_column），请分别处理各个维度。当某个映射列出了多个值时，第一个为默认值；只有在上下文明确支持备选值时，Agent 才可以选择该值。

2. 验证维度

每份设计简报都必须确定以下 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 符号值 → 具体令牌解析

每个符号值都映射到具体设计令牌。编写 DESIGN.md 前，Agent 必须先解析这些值：

符号值	具体令牌
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 默认解析规则

如果未指定某个维度，则根据与情绪风格的兼容性选择默认值：

未指定的维度	默认规则
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

此技能根据解析后的简要需求维度，从头生成新的 DESIGN.md。如果工作目录中已存在 DESIGN.md，Agent 应询问用户是覆盖还是跳过。

按照 Open Design 的 9 个部分约定生成 DESIGN.md。所有颜色十六进制值、字体栈和间距值都必须来自第 2.1 节中解析出的令牌，不得采用解析表以外的值。

# [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"]

## 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]

## 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

## 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"]

## Layout Principles
- Max width: 1200px
- Grid: [resolved from layout]
- Section spacing: [resolved from density]
- Content padding: [resolved from density]

## Depth & 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]

## 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).

## 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

## Agent Prompt Guide
- 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}."]

4. 生成 brief-preview.html

创建一个 HTML 文件，用于直观呈现解析后的设计令牌。预览必须按顺序包含以下 4 个部分：

1. 调色板色块 — 横向排列一行矩形，每个矩形展示颜色部分中的一种颜色。标注其用途（背景、表面、文本、强调色）和十六进制代码。
2. 字体样例 — 使用声明的字号显示三个文本块，分别展示 Display、Body 和 Mono 字体。每个文本块使用示例句子（“The quick brown fox...”）。
3. 间距标尺 — 使用可视化标尺或堆叠条展示区块间距和内容内边距值，并标注其 px 值。
4. 组件预览 — 使用解析后的令牌渲染 2–3 个可交互组件（主按钮、含标题和正文的卡片、文本输入框）。这些组件应使用功能完整的 HTML/CSS，而非截图。

使用解析后的设计系统令牌（背景颜色、字体、间距）为预览本身设置样式。预览页面应具有设计系统文档页面的外观。

5. 报告未指定的维度

在输出末尾，列出用户未指定的维度以及应用的默认值，并说明选择每个默认值所依据的规则：

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)

这样保持透明，避免未明说的假设延续到最终设计中。