design-context

设计上下文

所有设计工作的基础技能。其他每项设计技能都会先检查此上下文。此技能会收集、存储并提供品牌形象、色彩系统、字体排印和设计偏好，确保生成的所有视觉内容风格统一且符合品牌调性。

上下文会保存到 .agents/design-context.md，以便在不同会话中重复使用。

---

第 1 步：检查现有上下文

收集新信息前，先检查是否已有设计上下文。

自动检测来源

按以下优先级顺序扫描代码库中的现有设计令牌：

1. .agents/design-context.md —— 之前保存的上下文（优先级最高）
2. tailwind.config.js / tailwind.config.ts —— theme.extend.colors、fontFamily、spacing（Tailwind v3）
3. CSS @theme 块 —— Tailwind v4 在 CSS 中定义令牌：@theme { --color-primary: ...; --font-sans: ...; }
4. CSS 自定义属性 —— :root 或 globals.css 中的 --color-primary、--font-heading 等。shadcn/ui 项目使用 --primary、--secondary、--accent、--muted、--destructive、--radius，通常采用裸 HSL 分量（222 47% 11%）或 oklch(...) —— 保存时转换为十六进制
5. package.json —— 项目名称、描述
6. 设计令牌文件 —— tokens.json（W3C DTCG $value/$type）、theme.js、design-system.*
7. 字体加载 —— next/font 导入、Google Fonts <link> 标签、@font-face 规则
8. 现有组件 —— 扫描重复出现的颜色值、字体栈和间距模式
9. manifest.json / site.webmanifest —— theme_color、name
10. 品牌素材 —— logo.svg、public/、assets/、brand/ 文件夹、网站图标
11. Figma 变量 —— 如果 Figma MCP 可用，从已连接的文件中获取变量

自动检测逻辑

扫描 Tailwind 配置时，提取：

colors.primary -> Brand primary color
colors.secondary -> Brand secondary color
colors.accent -> Accent color
fontFamily.sans -> Body font
fontFamily.heading or fontFamily.display -> Heading font

扫描 CSS 变量时，映射：

--color-primary, --primary -> Primary color
--color-secondary, --secondary -> Secondary color
--color-accent, --accent -> Accent color
--font-heading, --font-display -> Heading font
--font-body, --font-sans -> Body font
--radius, --border-radius -> Border radius preference

如果找到上下文，先展示给用户确认，再继续。

---

第 2 步：收集品牌形象

如果没有找到现有上下文，通过对话收集以下信息。自然地分组提问，不要直接丢出一份清单。

品牌核心

字段	说明	示例
品牌名称	官方名称	"Acme Studio"
标语	简短的品牌标语	"设计无界"
使命	一句话使命	"为创作者提供专业工具"
行业	主要行业/领域	"SaaS / 创意工具"

色彩系统

至少收集 4 组颜色，并以十六进制代码存储。

角色	用途	示例
主色	主要品牌色、CTA、关键 UI	#2563EB
浅主色	悬停状态、背景	#3B82F6
深主色	激活状态、浅色背景上的文字	#1D4ED8
辅助色	辅助颜色、次要操作	#7C3AED
强调色	高亮、徽章、通知	#F59E0B
中性色 50	最浅背景	#FAFAFA
中性色 100	卡片背景	#F5F5F5
中性色 200	边框、分隔线	#E5E5E5
中性色 500	占位文字	#737373
中性色 800	正文	#262626
中性色 900	标题	#171717
成功色	正向状态	#10B981
警告色	警示状态	#F59E0B
错误色	错误状态	#EF4444

字体排印

字段	说明	示例
标题字体	展示/标题字体	"Inter, sans-serif"
正文字体	正文字体	"Inter, sans-serif"
等宽字体	代码/技术字体	"JetBrains Mono, monospace"
基础字号	根字号	16px
比例系数	字体比例缩放系数	1.25（大三度）
标题字重	默认标题字重	700
正文字重	默认正文字重	400

字号比例参考

默认比例（Tailwind 手动调校的字号，基础值为 16px —— 大致但并非严格遵循 1.25 的比例）。如果用户需要真正的模块化比例，请改用 typography 技能计算：

xs:   12px / 0.75rem
sm:   14px / 0.875rem
base: 16px / 1rem
lg:   18px / 1.125rem
xl:   20px / 1.25rem
2xl:  24px / 1.5rem
3xl:  30px / 1.875rem
4xl:  36px / 2.25rem
5xl:  48px / 3rem
6xl:  60px / 3.75rem
7xl:  72px / 4.5rem

设计风格

从以下风格原型中确定主要风格：

风格	特征
极简	留白充足、配色克制、线条简洁、阴影微妙
大胆	色彩饱和、字体大、对比强烈、几何形状
活泼	色彩明亮、圆角、插画、语气轻松
企业风	网格结构、蓝灰配色、专业图像、正式
奢华	深色背景、金属点缀、衬线字体、精致细节
复古	复古配色、半色调纹理、衬线／粗衬线字体、暖色调
粗野主义	原始美感、高对比、等宽字体、非常规布局
自然风	大地色、自然纹理、流畅形状、暖中性色

受众与语气

字段	描述	示例
主要受众	谁会看到这些设计	“25–40 岁、精通技术的专业人士”
审美偏好	什么风格能引起他们共鸣	“简洁、现代、数据驱动”
语气	沟通风格	“专业又平易近人”
正式程度	1–5 级	3（均衡）

品牌标识

字段	描述	示例
Logo 描述	从视觉上描述 Logo	“以主蓝色呈现的几何 ‘A’ 标志”
Logo 用法	使用位置／方式	“左上角，最小高度 32px”
图标风格	偏好的图标风格	“描边式、2px 线宽、圆角端点”
Logo 文件	实际 Logo 文件路径	public/logo.svg、brand/logo-white.png
参考图片	用户喜欢的产品照片、过往设计	assets/product-hero.png

记录文件路径，而不只是描述。图像生成技能会将这些文件作为 --image 引用传入，相比文字描述，这样更能忠实复现 Logo 或产品。

品牌规则

字段	描述	示例
始终遵守	不可妥协的规则	“Logo 只放在白色或主色背景上”、“标题使用句首字母大写格式”
绝不使用	应避免的内容	“Logo 不使用渐变”、“不使用握手的图库照片”
语气示例	2–3 条真实标题或标语	“更快交付，睡得更香。”

平台偏好

平台	优先级	备注
Web	高／中／低	响应式，适配现代浏览器
移动端	高／中／低	适合触控，注意安全区域
印刷品	高／中／低	考虑 CMYK
社交媒体	高／中／低	使用各平台专属尺寸

---

第 3 步：保存上下文

使用此模板将收集到的上下文保存到 .agents/design-context.md：

# Design Context

## Brand Identity
- **Name:** [Brand Name]
- **Tagline:** [Tagline]
- **Mission:** [Mission]
- **Industry:** [Industry]

## Color System
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #XXXXXX | CTAs, key elements |
| Primary Light | #XXXXXX | Hover, backgrounds |
| Primary Dark | #XXXXXX | Active, dark text |
| Secondary | #XXXXXX | Supporting elements |
| Accent | #XXXXXX | Highlights, badges |
| Neutral 50 | #XXXXXX | Light backgrounds |
| Neutral 100 | #XXXXXX | Card backgrounds |
| Neutral 200 | #XXXXXX | Borders |
| Neutral 500 | #XXXXXX | Muted text |
| Neutral 800 | #XXXXXX | Body text |
| Neutral 900 | #XXXXXX | Headings |
| Success | #XXXXXX | Positive |
| Warning | #XXXXXX | Caution |
| Error | #XXXXXX | Error |

## Typography
- **Heading Font:** [Font stack]
- **Body Font:** [Font stack]
- **Mono Font:** [Font stack]
- **Base Size:** [size]
- **Scale Ratio:** [ratio]
- **Heading Weight:** [weight]
- **Body Weight:** [weight]

## Design Style
- **Primary Style:** [Style archetype]
- **Border Radius:** [value]
- **Shadow Style:** [subtle/medium/dramatic/none]
- **Spacing System:** [4px/8px base grid]

## Audience
- **Primary:** [Description]
- **Aesthetic:** [Preferences]
- **Tone:** [Tone description]

## Brand Marks
- **Logo:** [Description]
- **Logo Files:** [paths]
- **Reference Images:** [paths]
- **Icon Style:** [Description]

## Brand Rules
- **Always:** [rules]
- **Never:** [rules]
- **Voice samples:** [examples]

## Platform Priority
- Web: [priority]
- Mobile: [priority]
- Social: [priority]
- Print: [priority]

保存前验证

写入前检查配色，并将任何未通过的项目告知用户（不要悄悄更改其品牌色——应建议最接近且通过验证的色调）：

• Neutral 800 的正文文字在 Neutral 50 和白色背景上：>= 4.5:1
• 白色文字以 Primary 作为按钮背景：>= 4.5:1（若未通过，文字按钮使用 Primary Dark）
• 白色背景上的 Primary 链接文字：>= 4.5:1
• 白色背景上的 Neutral 500 占位符／弱化文字：若承载含义，则 >= 4.5:1
• 边框和焦点环（Neutral 200 仅用于装饰；焦点环与其背景的对比度需 >= 3:1）

请运行随附的检查器，而不是凭目测估算（<design-context> 指此技能所在目录）：

python <design-context>/scripts/contrast.py --context .agents/design-context.md   # all pairings above
python <design-context>/scripts/contrast.py "#737373" "#ffffff"                     # any single pair

任何项目未通过时，检查器会以退出码 1 结束，并为每项提供最接近的合格色调建议（色相和色度相同，调整亮度）。其他技能也可以用同样的方式检查任意前景色／背景色组合。

在文件顶部添加 Last updated: YYYY-MM-DD 一行以及检测来源（例如 “from tailwind.config.ts”），以便后续会话了解信息的新鲜度。

---

步骤 4：在其他技能中使用上下文

激活任何其他设计技能时，都必须：

1. 首先读取 .agents/design-context.md
2. 应用颜色系统——绝不使用任意颜色
3. 使用指定的字体排版——如有需要，通过 <link> 标签加载 Google Fonts
4. 匹配设计风格原型
5. 尊重语气和受众偏好

供其他技能使用的快速上下文片段

其他技能应在工作流开头加入此检查：

Before generating any visual:
1. Read .agents/design-context.md
2. Extract: primary color, secondary color, accent, heading font, body font, style archetype
3. If no context file exists, ask the user to run the design-context skill first,
   or use sensible defaults and note that output may not be on-brand

---

步骤 5：更新上下文

用户想要更新上下文时：

1. 读取现有的 .agents/design-context.md
2. 询问他们想更改什么
3. 仅更新已更改的字段
4. 确认更改内容
5. 保存更新后的文件

仅更改单个字段时，绝不要覆盖整个文件。

---

默认回退方案

如果未设置上下文，而用户仍想继续，请使用以下默认值：

Primary: #2563EB (blue-600)
Secondary: #7C3AED (violet-600)
Accent: #F59E0B (amber-500)
Neutral: Tailwind gray scale
Heading Font: Inter
Body Font: Inter
Success: #10B981 (fills/icons) / #047857 (text)
Warning: #F59E0B (fills/icons) / #B45309 (text)
Error:   #EF4444 (fills/icons) / #B91C1C (text)
Style: Minimal
Tone: Professional

较浅的语义色调作为白底上的文字时，无法达到 4.5:1 的对比度（2.5:1、2.2:1、3.8:1）——请将其用于背景、搭配深色文字的徽章和图标；文字请使用较深的色调。

请务必在输出中说明使用了默认值，并建议设置合适的设计上下文。

注意：到处使用 Inter 加 blue-600 是最常见的“AI 生成”风格。为海报、社交媒体图片、落地页等富有表现力的内容使用默认值时，请先问一个简短的问题：“有没有你喜欢的颜色、字体或网站风格？”，再使用默认值。