brand-system
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBrand Identity & Design System — Orchestrator
品牌识别与设计系统 — 协调器
Design — Step 1 of 2. Coordinates specialized agents to transform product artifacts into a complete brand identity and design system.
Core Question: "Does every visual decision trace back to who we are?"
设计环节——2步中的第1步。协调专业Agent将产品产出物转化为完整的品牌识别与设计系统。
核心问题: "每一项视觉决策是否都能追溯到品牌本身的定位?"
Critical Gates — Read First
关键门槛 — 请先阅读
- Do NOT choose colors or fonts before strategy. Visual-agent runs in parallel with strategy-agent but the orchestrator must verify coherence in the merge step. Visual choices without strategy justification get flagged by critic-agent.
- Do NOT dispatch Layer 2 before Layer 1 completes. Token-architect-agent needs visual-agent output. Component-token-agent needs token-architect-agent output. The chain is strict.
- Do NOT skip the critic's cross-element coherence check. Radius must map to archetype. Typography must match personality. Color must align with brand emotion. The critic checks the matrix that no individual agent can see.
- Stale upstream data (>30 days) produces generic archetypes. Recommend re-running before proceeding if artifact dates are old.
icp-research
- 切勿在策略确定前选择颜色或字体。 Visual-agent与strategy-agent并行运行,但协调器必须在合并步骤验证二者的一致性。没有策略支撑的视觉选择会被critic-agent标记。
- Layer 1完成前切勿调度Layer 2。 Token-architect-agent需要visual-agent的输出,Component-token-agent需要token-architect-agent的输出,流程链路是严格固定的。
- 切勿跳过评审员的跨元素一致性校验。 圆角数值必须匹配品牌原型,排版必须匹配品牌调性,色彩必须匹配品牌情感。评审员会检查单个Agent无法覆盖的交叉校验矩阵。
- 超过30天的上游过时数据会生成通用原型。 如果产出物日期过旧,建议先重新运行再继续流程。
icp-research
Inputs Required
所需输入
- Product description or PRD (what the product does, who it serves)
- Target audience profile (demographics, psychographics, context of use)
- Competitive context (who else serves this audience, how they're positioned)
- 产品描述或PRD(产品功能、服务人群)
- 目标受众画像(人口统计学特征、心理特征、使用场景)
- 竞争环境(同类服务提供商、其市场定位)
Output
输出
- (brand identity, voice, visual system, design tokens)
.agents/design/brand-system.md - Visual brand guideline artboards (if Paper MCP available)
- (品牌识别、调性、视觉系统、设计令牌)
.agents/design/brand-system.md - 视觉品牌指南画板(如果可用Paper MCP)
Quality Gate
质量门槛
Before delivering, the critic agent verifies:
- Every visual, verbal, and token decision traces back to strategy and archetype
- Values have real tradeoffs (not generic "innovation, quality, integrity")
- Voice chart has Do/Don't examples for every attribute
- All semantic tokens have both light and dark mode values
- Every token pair meets WCAG AA contrast (4.5:1 normal text, 3:1 large/UI)
- Background/foreground convention used consistently ()
bg-primary text-primary-foreground - One global value — all components derive from it
--radius - Cross-element coherence: radius maps to archetype (see ), type personality matches archetype (see
references/token-templates.md), color emotion aligns with brand personality (seereferences/typography-psychology.md), and imagery direction reflects the archetype's visual world. Flag any element that contradicts the others.references/color-emotion.md - AI slop check: run checklist against all visual outputs — 0-1 items is clean, 2-3 needs review, 4+ needs regeneration
references/ai-slop-detection.md
交付前,critic agent会校验以下项:
- 所有视觉、语言、令牌决策都可追溯到策略和品牌原型
- 价值观有真实的取舍(不是泛泛的"创新、质量、诚信"这类表述)
- 调性表每个属性都有"可/不可"示例
- 所有语义令牌都包含亮色和暗色模式值
- 所有令牌对都满足WCAG AA对比度要求(普通文本4.5:1,大字体/UI元素3:1)
- 背景/前景约定使用一致()
bg-primary text-primary-foreground - 全局唯一值——所有组件的圆角都派生自该值
--radius - 跨元素一致性:圆角匹配品牌原型(参考),字体调性匹配品牌原型(参考
references/token-templates.md),色彩情感匹配品牌个性(参考references/typography-psychology.md), imagery方向符合原型的视觉体系。标记所有相互矛盾的元素。references/color-emotion.md - AI滥造内容校验:对照检查所有视觉输出——0-1项为合格,2-3项需复核,4项及以上需要重新生成
references/ai-slop-detection.md
Chain Position
链路位置
Previous: none | Next:
user-flowRe-run triggers: After major product pivots, when entering new markets, after significant audience shifts, or annually for brand refresh.
Related skills (non-chain): (audience data for brand strategy), (consumes voice guidelines), (uses voice adjectives)
icp-researchcontent-createhumanize前置:无 | 后置:
user-flow重新触发场景: 产品重大转型后、进入新市场时、受众发生显著变化后,或每年品牌焕新时。
相关技能(非链路内): (为品牌策略提供受众数据)、(使用调性指南)、(使用调性形容词)
icp-researchcontent-createhumanizeSkill Deference
技能优先级
- Need audience research first? Run (from marketing-skills) — brand strategy without audience research produces generic archetypes.
icp-research - Need user flows after brand? Run next — it consumes design tokens and component context.
user-flow - Need marketing copy? Run or
content-create— they consume voice guidelines.copywriting
- 需要先做受众研究? 运行(来自marketing-skills)——没有受众研究支撑的品牌策略会生成通用原型。
icp-research - 品牌完成后需要用户流程? 接下来运行——它会使用设计令牌和组件上下文。
user-flow - 需要营销文案? 运行或
content-create——它们会使用调性指南。copywriting
Agent Manifest
Agent清单
| Agent | Layer | File | Focus |
|---|---|---|---|
| Strategy Agent | 1 (parallel) | | Purpose, mission, vision, values, positioning, competitive landscape |
| Personality Agent | 1 (parallel) | | Jungian archetype (70/30 blend), personality traits, emotional journey |
| Voice Agent | 1 (parallel) | | Voice chart, tone spectrum, messaging architecture, on-brand examples |
| Visual Agent | 1 (parallel) | | Logo, color system (OKLCH 60/30/10), typography, imagery |
| Token Architect Agent | 2 (sequential) | | 3-layer W3C token system, semantic map, radius-to-archetype |
| Component Token Agent | 2 (sequential) | | Button 6 variants, input specs, card specs, motion tokens |
| Accessibility Agent | 2 (sequential) | | WCAG AA contrast, touch targets, dark mode audit, focus states |
| Critic Agent | 2 (final) | | Cross-element coherence, token correctness, PASS/FAIL |
| Agent | 层级 | 文件 | 聚焦领域 |
|---|---|---|---|
| Strategy Agent | 1(并行) | | 目标、使命、愿景、价值观、定位、竞争格局 |
| Personality Agent | 1(并行) | | 荣格原型(70/30混合)、性格特质、情感旅程 |
| Voice Agent | 1(并行) | | 调性表、语气范围、 messaging架构、符合品牌的示例 |
| Visual Agent | 1(并行) | | Logo、色彩系统(OKLCH 60/30/10)、排版、 imagery |
| Token Architect Agent | 2(串行) | | 三层W3C令牌系统、语义映射、圆角-原型匹配 |
| Component Token Agent | 2(串行) | | 6种按钮变体、输入框规范、卡片规范、动效令牌 |
| Accessibility Agent | 2(串行) | | WCAG AA对比度、触摸目标、暗色模式审计、焦点状态 |
| Critic Agent | 2(最终) | | 跨元素一致性、令牌正确性、通过/不通过判定 |
Shared References (read by multiple agents)
共享参考文档(多个Agent会读取)
- — 12 Jungian archetypes with visual/verbal mappings
references/brand-archetypes.md - — Voice frameworks, tone dimensions, messaging architecture
references/brand-voice.md - — Logo systems, imagery, iconography, graphic elements
references/visual-identity.md - — Color psychology, OKLCH values, audience palettes
references/color-emotion.md - — Font personality mappings and pairing rules
references/typography-psychology.md - — Three-layer token system, semantic token map
references/token-architecture.md - — Primitive scales, radius-archetype mapping, mapping example
references/token-templates.md - — Component token map, button/input/card specs, motion tokens
references/component-tokens.md - — Extended UI component patterns with token consumption maps
references/component-patterns.md - — Accessibility baseline, dark mode rules, brand applications
references/implementation-rules.md - — Paper MCP artboard specs and workflow
references/artboard-generation.md - — Paper MCP HTML/CSS templates
references/paper-artboard-templates.md - — AI-generated design anti-patterns checklist
references/ai-slop-detection.md
- — 12种荣格原型的视觉/语言映射
references/brand-archetypes.md - — 调性框架、语气维度、messaging架构
references/brand-voice.md - — Logo系统、imagery、图标、图形元素
references/visual-identity.md - — 色彩心理学、OKLCH值、受众调色板
references/color-emotion.md - — 字体性格映射与配对规则
references/typography-psychology.md - — 三层令牌系统、语义令牌映射
references/token-architecture.md - — 基础刻度、圆角-原型映射、映射示例
references/token-templates.md - — 组件令牌映射、按钮/输入框/卡片规范、动效令牌
references/component-tokens.md - — 扩展UI组件模式与令牌使用映射
references/component-patterns.md - — 可访问性基线、暗色模式规则、品牌应用规范
references/implementation-rules.md - — Paper MCP画板规范与工作流
references/artboard-generation.md - — Paper MCP HTML/CSS模板
references/paper-artboard-templates.md - — AI生成设计反模式检查清单
references/ai-slop-detection.md
Routing Logic
路由逻辑
Mode Selection
模式选择
Ask: "Full brand system or quick brand for MVP?"
询问用户:"需要完整品牌系统还是MVP快速品牌方案?"
Route A: Quick Brand (MVP)
路径A:快速品牌(MVP)
When: MVP, early-stage, need to ship fast with basic brand foundations.
1. Pre-dispatch: Gather context (Step 0)
2. LAYER 1 — Dispatch IN PARALLEL:
- strategy-agent (purpose, values, positioning)
- visual-agent (color + typography only — logo deferred)
3. Dispatch: critic-agent (coherence check — strategy-to-visual only)
4. If FAIL → re-dispatch named agent(s) with feedback (max 2 cycles)
5. Deliver Quick Brand artifactQuick Brand scope: Purpose/mission/vision, core values, positioning, primary color + neutrals, display + body font, basic type hierarchy. Defers: archetype analysis, voice/tone system, messaging architecture, full visual identity, token architecture, component tokens, accessibility audit, dark mode, artboards.
Quick Brand output includes a note: "Run full brand-system when ready to build the design system."
适用场景: MVP、早期阶段,需要快速交付基础品牌框架。
1. 预调度:收集上下文(步骤0)
2. 第一层 — 并行调度:
- strategy-agent(目标、价值观、定位)
- visual-agent(仅色彩+排版——logo延后)
3. 调度:critic-agent(一致性校验——仅校验策略与视觉匹配度)
4. 如不通过 → 向对应Agent反馈问题重新调度(最多2轮)
5. 交付快速品牌产出物快速品牌范围: 目标/使命/愿景、核心价值观、定位、主色+中性色、标题+正文字体、基础排版层级。延后内容:原型分析、调性/语气系统、messaging架构、完整视觉识别、令牌架构、组件令牌、可访问性审计、暗色模式、画板。
快速品牌输出附带提示: "当你准备构建设计系统时,请运行完整brand-system流程。"
Route B: Full Brand System
路径B:完整品牌系统
When: Established product, full rebrand, comprehensive guidelines needed.
1. Pre-dispatch: Gather context (Step 0)
2. LAYER 1 — Dispatch IN PARALLEL:
- strategy-agent
- personality-agent
- voice-agent
- visual-agent
3. MERGE: Assemble Layer 1 outputs into brand identity sections
4. LAYER 2 — Dispatch SEQUENTIALLY:
- token-architect-agent (receives visual-agent + personality-agent output)
- component-token-agent (receives token-architect-agent output)
- accessibility-agent (receives token-architect + component-token outputs)
5. Dispatch: critic-agent (receives complete brand system)
6. If FAIL → re-dispatch named agent(s) with feedback (max 2 cycles)
7. Artboard generation (Step 9 — if Paper MCP available)
8. Deliver artifact适用场景: 成熟产品、全面品牌焕新、需要完整规范。
1. 预调度:收集上下文(步骤0)
2. 第一层 — 并行调度:
- strategy-agent
- personality-agent
- voice-agent
- visual-agent
3. 合并:将第一层输出组装为品牌识别板块
4. 第二层 — 按顺序串行调度:
- token-architect-agent(接收visual-agent + personality-agent输出)
- component-token-agent(接收token-architect-agent输出)
- accessibility-agent(接收token-architect + component-token输出)
5. 调度:critic-agent(接收完整品牌系统)
6. 如不通过 → 向对应Agent反馈问题重新调度(最多2轮)
7. 画板生成(步骤9——如果可用Paper MCP)
8. 交付产出物Step 0: Pre-Dispatch Context Gathering
步骤0:预调度上下文收集
Product Context Check
产品上下文检查
Check for and . If fields are older than 30 days, warn the user and recommend re-running upstream skills.
.agents/product-context.md.agents/mkt/icp-research.mddate检查是否存在和。如果字段超过30天,警告用户并建议重新运行上游技能。
.agents/product-context.md.agents/mkt/icp-research.mddateRequired Inputs — Interview If Missing
所需输入——缺失时需询问用户
- Product description or PRD
- Target audience profile
- Competitive context
- 产品描述或PRD
- 目标受众画像
- 竞争环境
Strongly Recommended
强烈建议提供
- Existing brand assets (logos, colors, fonts, past guidelines)
- Founder/team values and origin story
- Key differentiators
- 现有品牌资产(logo、色彩、字体、过往规范)
- 创始人/团队价值观与品牌起源故事
- 核心差异化优势
Helpful
有帮助的补充信息
- Admired brands (aspirational and anti-aspirational)
- Market positioning intent (premium, accessible, disruptive, trusted)
- 欣赏的品牌(向往的和排斥的)
- 市场定位意图(高端、亲民、颠覆性、可信赖)
Optional Artifacts
可选产出物
| Artifact | Source | Benefit |
|---|---|---|
| icp-research (from | Product positioning, audience, and voice adjectives — grounds brand strategy in audience research |
| icp-research (from | Audience personas, pain profiles, and VoC quotes — brand strategy without audience research produces generic archetypes |
Strongly recommended: Run (from marketing-skills) first if audience research hasn't been done.
icp-research| 产出物 | 来源 | 价值 |
|---|---|---|
| icp-research(来自 | 产品定位、受众、调性形容词——让品牌策略基于受众研究 |
| icp-research(来自 | 受众 persona、痛点画像、客户声音语录——没有受众研究的品牌策略会生成通用原型 |
强烈建议: 如果还没有做受众研究,先运行marketing-skills中的。
icp-researchContext to Pass to All Agents
传递给所有Agent的上下文
- Product: description, audience, competitive landscape
- Existing assets: any logos, colors, fonts, guidelines to preserve or evolve
- Positioning intent: premium, accessible, disruptive, trusted
- Upstream artifacts: excerpts from product-context.md and icp-research.md if available
Missing product details are not guessable — interview for them.
- 产品: 描述、受众、竞争格局
- 现有资产: 需要保留或迭代的logo、色彩、字体、规范
- 定位意图: 高端、亲民、颠覆性、可信赖
- 上游产出物: 如有product-context.md和icp-research.md,包含相关摘要
缺失的产品信息不可猜测——需要询问用户获取。
Dispatch Protocol
调度协议
How to spawn a sub-agent
如何生成子Agent
- Read the agent instruction file — include its FULL content in the Agent prompt
- Append the context (product, audience, competitive landscape, existing assets) after the instructions
- Resolve file paths to absolute: replace relative paths with absolute paths rooted at this skill's directory
- Pass upstream artifacts by content: the orchestrator reads files FIRST, then includes relevant excerpts in context. Sub-agents should NOT read artifact files directly.
.agents/ - If feedback exists (from critic FAIL), append with header "## Critic Feedback — Address Every Point"
- 读取 Agent指令文件——将完整内容包含在Agent提示词中
- 追加 上下文(产品、受众、竞争格局、现有资产)到指令之后
- 将文件路径解析为绝对路径: 将相对路径替换为基于本技能目录的绝对路径
- 按内容传递上游产出物: 协调器先读取文件,再将相关摘要包含到上下文中。子Agent不应直接读取产出物文件。
.agents/ - 如果存在反馈(来自critic的不通过判定),添加标题"## 评审反馈——需响应所有问题"后追加反馈内容。
Conventions
约定
- Source citation: When stating facts about brand psychology, color theory, or archetype effectiveness, cite the source. If from a web search, include the URL. If a fact cannot be attributed, flag it as .
[UNVERIFIED] - Context loaded: When producing the artifact, include which upstream artifacts were read and their versions/dates in the artifact body. This creates an audit trail for downstream skills.
- 来源引用: 陈述品牌心理学、色彩理论或原型有效性相关事实时,需要标注来源。如果来自网络搜索,包含URL。如果无法确认事实来源,标记为。
[UNVERIFIED] - 上下文加载记录: 生成产出物时,在正文中包含读取的上游产出物及其版本/日期。为下游技能提供审计追踪。
Single-agent fallback
单Agent降级方案
If multi-agent dispatch is unavailable, execute each agent's instructions sequentially in-context:
- Layer 1: define strategy, select archetype, write voice chart, design visual identity
- Layer 2: build token architecture, map component tokens, audit accessibility
- Final: evaluate with critic rubric, check cross-element coherence
如果无法调度多Agent,按顺序在上下文中执行每个Agent的指令:
- 第一层:定义策略、选择原型、撰写调性表、设计视觉识别
- 第二层:构建令牌架构、映射组件令牌、审计可访问性
- 最终:用评审规则评估,检查跨元素一致性
Layer 1: Parallel Foundation
第一层:并行基础构建
Spawn IN PARALLEL:
| Agent | Instruction File | Pass These Inputs | Reference Files |
|---|---|---|---|
| Strategy Agent | | brief (product + audience + competitors) | — |
| Personality Agent | | brief (product + audience) | |
| Voice Agent | | brief (product + audience) | |
| Visual Agent | | brief (product + audience + existing assets) | |
Wait for all to complete. Their outputs feed the merge step and Layer 2.
并行生成以下Agent:
| Agent | 指令文件 | 传递的输入 | 参考文件 |
|---|---|---|---|
| Strategy Agent | | 简报(产品 + 受众 + 竞品) | — |
| Personality Agent | | 简报(产品 + 受众) | |
| Voice Agent | | 简报(产品 + 受众) | |
| Visual Agent | | 简报(产品 + 受众 + 现有资产) | |
等待所有Agent完成,其输出用于合并步骤和第二层流程。
Merge Step
合并步骤
Assemble Layer 1 outputs into the artifact template:
| Section | Owner Agent |
|---|---|
| Part I: Strategy (purpose, values, positioning, landscape) | Strategy Agent |
| Part II: Personality (archetype, traits, emotional journey) | Personality Agent |
| Part II: Voice & Messaging (voice chart, tone, messaging, examples) | Voice Agent |
| Part III: Visual Identity (logo, color, typography, imagery) | Visual Agent |
Coherence check before Layer 2: Verify that the archetype selected by personality-agent aligns with the visual choices made by visual-agent. If they contradict (e.g., Caregiver archetype with sharp/aggressive typography), resolve before dispatching Layer 2.
将第一层输出组装到产出物模板中:
| 板块 | 负责Agent |
|---|---|
| 第一部分:策略(目标、价值观、定位、竞争格局) | Strategy Agent |
| 第二部分:品牌个性(原型、特质、情感旅程) | Personality Agent |
| 第二部分:调性与Messaging(调性表、语气、messaging、示例) | Voice Agent |
| 第三部分:视觉识别(logo、色彩、排版、imagery) | Visual Agent |
第二层前的一致性校验: 验证personality-agent选择的原型与visual-agent做出的视觉选择是否匹配。如果存在矛盾(例如照顾者原型搭配尖锐/攻击性的排版),在调度第二层前解决问题。
Layer 2: Sequential Chain
第二层:串行列队
Dispatch ONE AT A TIME, IN ORDER:
| Step | Agent | Instruction File | Receives |
|---|---|---|---|
| 1 | Token Architect Agent | | Visual-agent output (colors, fonts) + personality-agent output (archetype for radius) |
| 2 | Component Token Agent | | Token-architect-agent output (semantic token map) |
| 3 | Accessibility Agent | | Token-architect + component-token outputs |
| 4 | Critic Agent | | Complete assembled brand system |
严格按顺序逐个调度:
| 步骤 | Agent | 指令文件 | 接收输入 |
|---|---|---|---|
| 1 | Token Architect Agent | | Visual-agent输出(色彩、字体) + personality-agent输出(圆角匹配的原型) |
| 2 | Component Token Agent | | Token-architect-agent输出(语义令牌映射) |
| 3 | Accessibility Agent | | Token-architect + component-token输出 |
| 4 | Critic Agent | | 完整组装的品牌系统 |
Critic Gate
评审门槛
- PASS: Deliver the artifact. Proceed to artboard generation (Step 9) if Paper MCP available.
- FAIL: Re-dispatch named agent(s) with critic feedback. Max 2 rewrite cycles. After 2 failures, deliver with critic annotations and flag to user.
- 通过: 交付产出物。如果可用Paper MCP,进入画板生成步骤(步骤9)。
- 不通过: 向对应Agent传递评审反馈重新调度。最多2轮重写。2轮后仍不通过,附带评审注释交付并向用户标记问题。
Step 9: Visual Artboard Generation (Paper MCP)
步骤9:视觉画板生成(Paper MCP)
Render brand guidelines as 5 presentation-ready artboards if Paper MCP is available. Reference for complete specs, workflow, and prerequisites.
references/artboard-generation.mdAfter generating artboards, run the AI slop detection checklist (). Artboards are the highest-risk output for AI default patterns.
references/ai-slop-detection.mdArtboards: Color Palette | Typography System | Spacing & Tokens | UI Style Principles | Logo System
Skip this step if Paper MCP tools are unavailable.
如果可用Paper MCP,将品牌指南渲染为5个可直接用于演示的画板。参考获取完整规范、工作流和前置要求。
references/artboard-generation.md生成画板后,运行AI滥造内容检查清单()。画板是AI默认模式的高风险输出。
references/ai-slop-detection.md画板内容:调色板 | 排版系统 | 间距与令牌 | UI风格原则 | Logo系统
如果没有Paper MCP工具,跳过本步骤。
Artifact Template
产出物模板
Save to .
.agents/design/brand-system.mdOn re-run: rename existing artifact to and create new with incremented version.
brand-system.v[N].mdmarkdown
---
skill: brand-system
version: 1
date: {{today}}
status: draft
---保存到。
.agents/design/brand-system.md重新运行时:将现有产出物重命名为,创建版本号递增的新文件。
brand-system.v[N].mdmarkdown
---
skill: brand-system
version: 1
date: {{today}}
status: draft
---Brand System: [Brand Name]
品牌系统:[品牌名称]
Part I: Strategy
第一部分:策略
- Purpose, positioning, competitive landscape
- 目标、定位、竞争格局
Part II: Personality
第二部分:品牌个性
- Primary archetype, voice framework, messaging examples
- 主原型、调性框架、messaging示例
Part III: Visual Identity
第三部分:视觉识别
- Logo, color palette (OKLCH + hex), typography, imagery direction
- Logo、调色板(OKLCH + hex)、排版、imagery方向
Part IV: Design Tokens
第四部分:设计令牌
- Primitive scales, semantic map, component tokens (see references/)
- 基础刻度、语义映射、组件令牌(参考references/)
Part V: Implementation
第五部分:落地实施
- Accessibility, dark mode, brand applications (see references/)
---- 可访问性、暗色模式、品牌应用(参考references/)
---Worked Example (Condensed) — Route B: Full Brand System
示例(精简版)——路径B:完整品牌系统
Input: FinLit — a personal finance app for young professionals (22-30), positioned against intimidating banking apps.
输入: FinLit——面向22-30岁年轻专业人士的个人理财APP,定位与 intimidating的银行APP差异化竞争。
Step 0: Pre-Dispatch
步骤0:预调度
Product: personal finance app. Audience: young professionals 22-30. Competitors: traditional banking apps (Mint, bank mobile apps).
产品:个人理财APP。受众:22-30岁年轻专业人士。竞品:传统银行APP(Mint、银行移动端APP)。
Layer 1: Parallel Foundation
第一层:并行基础构建
All 4 agents dispatched in parallel:
- Strategy agent returns: Purpose "make finance empowering, not shameful." Positioning: "the only finance app that feels like a supportive friend." Values: transparency over comfort, simplicity over completeness, progress over perfection.
- Personality agent returns: Caregiver (70%) + Explorer (30%). Traits: encouraging but not patronizing, clear but not dumbed-down, warm but not saccharine.
- Voice agent returns: Voice chart with 3 attributes (straight-talking, encouraging, honest). Tagline: "Money, minus the shame." Boilerplate in 4 lengths.
- Visual agent returns: Primary warm teal /
oklch(0.65 0.15 180). Neutral base: Stone. Display: Plus Jakarta Sans. Body: Inter. Radius: 0.5rem (Caregiver). Imagery: real people, natural light, warm tones.#2cbaa0
4个Agent并行调度:
- Strategy agent输出:目标"让理财赋权于人,而不是让人感到羞耻"。定位:"唯一像支持型朋友的理财APP"。价值观:透明优先于舒适,简洁优先于完备,进步优先于完美。
- Personality agent输出:照顾者(70%)+ 探索者(30%)。特质:鼓励但不居高临下,清晰但不过于简化,温暖但不过于甜腻。
- Voice agent输出:3个属性的调性表(直白、鼓励、诚实)。 slogan:"理财,告别羞耻感"。4种长度的品牌介绍。
- Visual agent输出:主色暖青色/
oklch(0.65 0.15 180)。中性色基础:Stone。标题字体:Plus Jakarta Sans。正文字体:Inter。圆角:0.5rem(匹配照顾者原型)。Imagery:真实人物、自然光、暖色调。#2cbaa0
Merge
合并
Assembled into Parts I-III. Coherence check: Caregiver archetype aligns with warm teal (trust + growth), humanist-leaning typography (approachable), 0.5rem radius (soft). PASS — proceed to Layer 2.
组装为第一到第三部分。一致性校验:照顾者原型匹配暖青色(信任+成长)、偏人文主义的排版(亲和)、0.5rem圆角(柔和)。通过——进入第二层。
Layer 2: Sequential Chain
第二层:串行列队
- Token architect returns: Stone 50-950 neutral scale, teal 50-950 primary scale, , 19 semantic tokens with light + dark values.
--radius: 0.5rem - Component token returns: 6 button variants mapped to semantic tokens, input specs with blur validation, card specs, motion tokens (100-500ms).
- Accessibility returns: All token pairs pass 4.5:1. Dark mode surface hierarchy (stone.950 → stone.900 → stone.800). Primary shifts to teal.400 in dark mode. Touch targets ≥44px.
- Critic returns: PASS. Cross-element coherence verified. Radius matches Caregiver. Typography matches warmth. Color matches archetype. AI slop score: 1 item (clean).
- Token architect输出:Stone 50-950中性色阶、青色50-950主色色阶、、19个包含亮色/暗色值的语义令牌。
--radius: 0.5rem - Component token输出:6个映射到语义令牌的按钮变体、带模糊校验的输入框规范、卡片规范、动效令牌(100-500ms)。
- Accessibility输出:所有令牌对对比度达到4.5:1。暗色模式表面层级(stone.950 → stone.900 → stone.800)。暗色模式下主色切换为teal.400。触摸目标≥44px。
- Critic输出:通过。跨元素一致性验证完成。圆角匹配照顾者原型,排版匹配温暖调性,色彩匹配原型。AI滥造得分:1项(合格)。
Deliver
交付
Artifact saved to .
.agents/design/brand-system.md产出物保存到。
.agents/design/brand-system.mdWorked Example (Condensed) — Route A: Quick Brand
示例(精简版)——路径A:快速品牌
Input: TaskFlow — a new project management tool, pre-MVP, needs basic brand to start building.
输入: TaskFlow——全新项目管理工具,MVP前阶段,需要基础品牌支撑开发。
Step 0: Pre-Dispatch
步骤0:预调度
Product: project management tool. Audience: small team leads. Quick Brand selected.
产品:项目管理工具。受众:小团队负责人。选择快速品牌方案。
Layer 1: Parallel (reduced)
第一层:并行(精简版)
- Strategy agent returns: Purpose, values (clarity over complexity, speed over ceremony), positioning.
- Visual agent returns: Primary blue /
oklch(0.623 0.214 259). Neutral: Slate. Display: Inter. Body: Inter.#3b82f6
- Strategy agent输出:目标、价值观(清晰优先于复杂,速度优先于繁文缛节)、定位。
- Visual agent输出:主色蓝色/
oklch(0.623 0.214 259)。中性色:Slate。标题字体:Inter。正文字体:Inter。#3b82f6
Critic (reduced)
评审(精简版)
Checks strategy-to-visual coherence only. PASS.
仅校验策略与视觉一致性。通过。
Deliver
交付
Artifact saved with note: "Run full brand-system when ready to build the design system."
产出物保存并附带提示:"当你准备构建设计系统时,请运行完整brand-system流程。"
Anti-Patterns
反模式
Aesthetics without strategy — Picking colors or fonts because they "look nice" without tracing back to archetype and positioning. INSTEAD: Every visual choice must have a strategy justification in the change log.
Generic values — "Innovation, quality, integrity" have no tradeoff; they guide nothing. INSTEAD: Use "X over Y" format where Y is a legitimate alternative: "transparency over comfort."
Archetype confusion — Selecting contradictory archetypes (Outlaw + Ruler, Hero + Innocent). INSTEAD: Primary and secondary should complement each other; the secondary adds nuance, not contradiction.
Voice without examples — "We're friendly" is meaningless without a concrete error message example. INSTEAD: Every voice attribute has a Do and Don't example from a real brand context.
Token soup — Creating 40+ semantic tokens when ~20 covers an entire component library. INSTEAD: Keep the semantic layer tight. If you're inventing , the system is too granular.
--subtle-muted-foreground-altSkipping semantic layer — Components referencing primitives () instead of semantic tokens (). INSTEAD: Always reference semantic tokens. The three-layer chain is Primitive -> Semantic -> Component.
oklch(0.546...)var(--primary)Mismatched bg/fg pairs — is wrong; use . INSTEAD: Every semantic color role is a pair. Base = background. = text on that surface.
bg-primary text-primarybg-primary text-primary-foreground-foregroundDark mode as inversion — Simply swapping black/white produces unusable surfaces. INSTEAD: Deliberate surface hierarchy (background -> card -> popover), reduced saturation, shifted primary lightness.
Dispatching all agents for Quick Brand — Route A exists for MVPs. INSTEAD: Quick Brand uses only strategy + visual + critic. No archetype analysis, no tokens, no components.
没有策略支撑的美学——仅因为"好看"选择颜色或字体,不追溯到原型和定位。正确做法:所有视觉选择在变更日志中都要有策略支撑理由。
空泛的价值观——"创新、质量、诚信"这类表述没有取舍,无法提供指导。正确做法:使用"X优先于Y"的格式,Y是合理的替代选项:例如"透明优先于舒适"。
原型冲突——选择相互矛盾的原型(叛逆者+统治者、英雄+无辜者)。正确做法:主次原型互补,次原型补充细节,而不是产生矛盾。
没有示例的调性描述——"我们很友好"这类表述没有具体错误消息示例支撑毫无意义。正确做法:每个调性属性都有真实品牌场景下的可/不可示例。
令牌冗余:创建40+语义令牌,而实际上约20个就能覆盖整个组件库。正确做法:保持语义层精简。如果你需要创建这类令牌,说明系统粒度过细。
--subtle-muted-foreground-alt跳过语义层:组件直接引用基础值()而不是语义令牌()。正确做法:始终引用语义令牌。三层链路是基础层→语义层→组件层。
oklch(0.546...)var(--primary)背景/前景配对错误:是错误的,应使用。正确做法:每个语义颜色角色都是配对的。基础值=背景,=对应表面上的文本。
bg-primary text-primarybg-primary text-primary-foreground-foreground暗色模式简单反色:直接黑白交换会生成不可用的表面。正确做法:设计明确的表面层级(背景→卡片→弹出层)、降低饱和度、调整主色亮度。
快速品牌方案调度所有Agent:路径A是为MVP设计的。正确做法:快速品牌仅使用strategy + visual + critic,不需要原型分析、令牌、组件相关流程。
Agent Files
Agent文件
Sub-Agent Instructions (agents/)
子Agent指令(agents/)
- agents/strategy-agent.md — Purpose, mission, vision, values, positioning
- agents/personality-agent.md — Jungian archetype blend, personality traits, emotional journey
- agents/voice-agent.md — Voice chart, tone spectrum, messaging architecture
- agents/visual-agent.md — Logo, color system, typography, imagery
- agents/token-architect-agent.md — 3-layer W3C token system, semantic map
- agents/component-token-agent.md — Button variants, input/card specs, motion tokens
- agents/accessibility-agent.md — WCAG AA, dark mode, touch targets, focus states
- agents/critic-agent.md — Cross-element coherence, PASS/FAIL
- agents/strategy-agent.md — 目标、使命、愿景、价值观、定位
- agents/personality-agent.md — 荣格原型混合、性格特质、情感旅程
- agents/voice-agent.md — 调性表、语气范围、messaging架构
- agents/visual-agent.md — Logo、色彩系统、排版、imagery
- agents/token-architect-agent.md — 三层W3C令牌系统、语义映射
- agents/component-token-agent.md — 按钮变体、输入框/卡片规范、动效令牌
- agents/accessibility-agent.md — WCAG AA、暗色模式、触摸目标、焦点状态
- agents/critic-agent.md — 跨元素一致性、通过/不通过判定
Shared References (references/)
共享参考文档(references/)
- references/brand-archetypes.md — 12 Jungian archetypes with visual and verbal mappings
- references/brand-voice.md — Voice frameworks, tone dimensions, messaging architecture
- references/visual-identity.md — Logo systems, imagery direction, iconography, graphic elements
- references/token-architecture.md — Three-layer token system, semantic token map, neutral presets
- references/token-templates.md — Primitive scales, semantic token map, radius-archetype mapping, mapping example
- references/component-tokens.md — Component token map, button/input/card specs, motion tokens
- references/implementation-rules.md — Accessibility baseline, dark mode rules, brand applications
- references/artboard-generation.md — Paper MCP artboard specs and workflow
- references/typography-psychology.md — Font personality mappings and pairing rules
- references/color-emotion.md — Color psychology, OKLCH values, audience palettes
- references/component-patterns.md — Extended UI component patterns with token consumption maps
- references/paper-artboard-templates.md — Paper MCP HTML/CSS templates
- references/ai-slop-detection.md — AI-generated design anti-patterns checklist
- references/brand-archetypes.md — 12种荣格原型的视觉与语言映射
- references/brand-voice.md — 调性框架、语气维度、messaging架构
- references/visual-identity.md — Logo系统、imagery方向、图标、图形元素
- references/token-architecture.md — 三层令牌系统、语义令牌映射、中性色预设
- references/token-templates.md — 基础刻度、语义令牌映射、圆角-原型映射、映射示例
- references/component-tokens.md — 组件令牌映射、按钮/输入框/卡片规范、动效令牌
- references/implementation-rules.md — 可访问性基线、暗色模式规则、品牌应用规范
- references/artboard-generation.md — Paper MCP画板规范与工作流
- references/typography-psychology.md — 字体性格映射与配对规则
- references/color-emotion.md — 色彩心理学、OKLCH值、受众调色板
- references/component-patterns.md — 扩展UI组件模式与令牌使用映射
- references/paper-artboard-templates.md — Paper MCP HTML/CSS模板
- references/ai-slop-detection.md — AI生成设计反模式检查清单