brand-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Brand 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
    icp-research
    before proceeding if artifact dates are old.
  • 切勿在策略确定前选择颜色或字体。 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

输出

  • .agents/design/brand-system.md
    (brand identity, voice, visual system, design tokens)
  • 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
    --radius
    value — all components derive from it
  • Cross-element coherence: radius maps to archetype (see
    references/token-templates.md
    ), type personality matches archetype (see
    references/typography-psychology.md
    ), color emotion aligns with brand personality (see
    references/color-emotion.md
    ), and imagery direction reflects the archetype's visual world. Flag any element that contradicts the others.
  • AI slop check: run
    references/ai-slop-detection.md
    checklist against all visual outputs — 0-1 items is clean, 2-3 needs review, 4+ needs regeneration
交付前,critic agent会校验以下项:
  • 所有视觉、语言、令牌决策都可追溯到策略和品牌原型
  • 价值观有真实的取舍(不是泛泛的"创新、质量、诚信"这类表述)
  • 调性表每个属性都有"可/不可"示例
  • 所有语义令牌都包含亮色和暗色模式值
  • 所有令牌对都满足WCAG AA对比度要求(普通文本4.5:1,大字体/UI元素3:1)
  • 背景/前景约定使用一致(
    bg-primary text-primary-foreground
  • 全局唯一
    --radius
    值——所有组件的圆角都派生自该值
  • 跨元素一致性:圆角匹配品牌原型(参考
    references/token-templates.md
    ),字体调性匹配品牌原型(参考
    references/typography-psychology.md
    ),色彩情感匹配品牌个性(参考
    references/color-emotion.md
    ), imagery方向符合原型的视觉体系。标记所有相互矛盾的元素。
  • AI滥造内容校验:对照
    references/ai-slop-detection.md
    检查所有视觉输出——0-1项为合格,2-3项需复核,4项及以上需要重新生成

Chain Position

链路位置

Previous: none | Next:
user-flow
Re-run triggers: After major product pivots, when entering new markets, after significant audience shifts, or annually for brand refresh.
Related skills (non-chain):
icp-research
(audience data for brand strategy),
content-create
(consumes voice guidelines),
humanize
(uses voice adjectives)
前置:无 | 后置:
user-flow
重新触发场景: 产品重大转型后、进入新市场时、受众发生显著变化后,或每年品牌焕新时。
相关技能(非链路内):
icp-research
(为品牌策略提供受众数据)、
content-create
(使用调性指南)、
humanize
(使用调性形容词)

Skill Deference

技能优先级

  • Need audience research first? Run
    icp-research
    (from marketing-skills) — brand strategy without audience research produces generic archetypes.
  • Need user flows after brand? Run
    user-flow
    next — it consumes design tokens and component context.
  • Need marketing copy? Run
    content-create
    or
    copywriting
    — they consume voice guidelines.

  • 需要先做受众研究? 运行
    icp-research
    (来自marketing-skills)——没有受众研究支撑的品牌策略会生成通用原型。
  • 品牌完成后需要用户流程? 接下来运行
    user-flow
    ——它会使用设计令牌和组件上下文。
  • 需要营销文案? 运行
    content-create
    copywriting
    ——它们会使用调性指南。

Agent Manifest

Agent清单

AgentLayerFileFocus
Strategy Agent1 (parallel)
agents/strategy-agent.md
Purpose, mission, vision, values, positioning, competitive landscape
Personality Agent1 (parallel)
agents/personality-agent.md
Jungian archetype (70/30 blend), personality traits, emotional journey
Voice Agent1 (parallel)
agents/voice-agent.md
Voice chart, tone spectrum, messaging architecture, on-brand examples
Visual Agent1 (parallel)
agents/visual-agent.md
Logo, color system (OKLCH 60/30/10), typography, imagery
Token Architect Agent2 (sequential)
agents/token-architect-agent.md
3-layer W3C token system, semantic map, radius-to-archetype
Component Token Agent2 (sequential)
agents/component-token-agent.md
Button 6 variants, input specs, card specs, motion tokens
Accessibility Agent2 (sequential)
agents/accessibility-agent.md
WCAG AA contrast, touch targets, dark mode audit, focus states
Critic Agent2 (final)
agents/critic-agent.md
Cross-element coherence, token correctness, PASS/FAIL
Agent层级文件聚焦领域
Strategy Agent1(并行)
agents/strategy-agent.md
目标、使命、愿景、价值观、定位、竞争格局
Personality Agent1(并行)
agents/personality-agent.md
荣格原型(70/30混合)、性格特质、情感旅程
Voice Agent1(并行)
agents/voice-agent.md
调性表、语气范围、 messaging架构、符合品牌的示例
Visual Agent1(并行)
agents/visual-agent.md
Logo、色彩系统(OKLCH 60/30/10)、排版、 imagery
Token Architect Agent2(串行)
agents/token-architect-agent.md
三层W3C令牌系统、语义映射、圆角-原型匹配
Component Token Agent2(串行)
agents/component-token-agent.md
6种按钮变体、输入框规范、卡片规范、动效令牌
Accessibility Agent2(串行)
agents/accessibility-agent.md
WCAG AA对比度、触摸目标、暗色模式审计、焦点状态
Critic Agent2(最终)
agents/critic-agent.md
跨元素一致性、令牌正确性、通过/不通过判定

Shared References (read by multiple agents)

共享参考文档(多个Agent会读取)

  • references/brand-archetypes.md
    — 12 Jungian archetypes with visual/verbal mappings
  • references/brand-voice.md
    — Voice frameworks, tone dimensions, messaging architecture
  • references/visual-identity.md
    — Logo systems, imagery, iconography, graphic elements
  • references/color-emotion.md
    — Color psychology, OKLCH values, audience palettes
  • references/typography-psychology.md
    — Font personality mappings and pairing rules
  • references/token-architecture.md
    — Three-layer token system, semantic token map
  • references/token-templates.md
    — Primitive scales, radius-archetype mapping, mapping example
  • references/component-tokens.md
    — Component token map, button/input/card specs, motion tokens
  • references/component-patterns.md
    — Extended UI component patterns with token consumption maps
  • references/implementation-rules.md
    — Accessibility baseline, dark mode rules, brand applications
  • references/artboard-generation.md
    — Paper MCP artboard specs and workflow
  • 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/color-emotion.md
    — 色彩心理学、OKLCH值、受众调色板
  • references/typography-psychology.md
    — 字体性格映射与配对规则
  • references/token-architecture.md
    — 三层令牌系统、语义令牌映射
  • references/token-templates.md
    — 基础刻度、圆角-原型映射、映射示例
  • references/component-tokens.md
    — 组件令牌映射、按钮/输入框/卡片规范、动效令牌
  • references/component-patterns.md
    — 扩展UI组件模式与令牌使用映射
  • references/implementation-rules.md
    — 可访问性基线、暗色模式规则、品牌应用规范
  • references/artboard-generation.md
    — Paper MCP画板规范与工作流
  • references/paper-artboard-templates.md
    — Paper MCP HTML/CSS模板
  • references/ai-slop-detection.md
    — AI生成设计反模式检查清单

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 artifact
Quick 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
.agents/product-context.md
and
.agents/mkt/icp-research.md
. If
date
fields are older than 30 days, warn the user and recommend re-running upstream skills.
检查是否存在
.agents/product-context.md
.agents/mkt/icp-research.md
。如果
date
字段超过30天,警告用户并建议重新运行上游技能。

Required 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

可选产出物

ArtifactSourceBenefit
.agents/product-context.md
icp-research (from
hungv47/marketing-skills
)
Product positioning, audience, and voice adjectives — grounds brand strategy in audience research
.agents/mkt/icp-research.md
icp-research (from
hungv47/marketing-skills
)
Audience personas, pain profiles, and VoC quotes — brand strategy without audience research produces generic archetypes
Strongly recommended: Run
icp-research
(from marketing-skills) first if audience research hasn't been done.
产出物来源价值
.agents/product-context.md
icp-research(来自
hungv47/marketing-skills
产品定位、受众、调性形容词——让品牌策略基于受众研究
.agents/mkt/icp-research.md
icp-research(来自
hungv47/marketing-skills
受众 persona、痛点画像、客户声音语录——没有受众研究的品牌策略会生成通用原型
强烈建议: 如果还没有做受众研究,先运行marketing-skills中的
icp-research

Context to Pass to All Agents

传递给所有Agent的上下文

  1. Product: description, audience, competitive landscape
  2. Existing assets: any logos, colors, fonts, guidelines to preserve or evolve
  3. Positioning intent: premium, accessible, disruptive, trusted
  4. Upstream artifacts: excerpts from product-context.md and icp-research.md if available
Missing product details are not guessable — interview for them.

  1. 产品: 描述、受众、竞争格局
  2. 现有资产: 需要保留或迭代的logo、色彩、字体、规范
  3. 定位意图: 高端、亲民、颠覆性、可信赖
  4. 上游产出物: 如有product-context.md和icp-research.md,包含相关摘要
缺失的产品信息不可猜测——需要询问用户获取。

Dispatch Protocol

调度协议

How to spawn a sub-agent

如何生成子Agent

  1. Read the agent instruction file — include its FULL content in the Agent prompt
  2. Append the context (product, audience, competitive landscape, existing assets) after the instructions
  3. Resolve file paths to absolute: replace relative paths with absolute paths rooted at this skill's directory
  4. Pass upstream artifacts by content: the orchestrator reads
    .agents/
    files FIRST, then includes relevant excerpts in context. Sub-agents should NOT read artifact files directly.
  5. If feedback exists (from critic FAIL), append with header "## Critic Feedback — Address Every Point"
  1. 读取 Agent指令文件——将完整内容包含在Agent提示词中
  2. 追加 上下文(产品、受众、竞争格局、现有资产)到指令之后
  3. 将文件路径解析为绝对路径: 将相对路径替换为基于本技能目录的绝对路径
  4. 按内容传递上游产出物: 协调器先读取
    .agents/
    文件,再将相关摘要包含到上下文中。子Agent不应直接读取产出物文件。
  5. 如果存在反馈(来自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:
AgentInstruction FilePass These InputsReference Files
Strategy Agent
agents/strategy-agent.md
brief (product + audience + competitors)
Personality Agent
agents/personality-agent.md
brief (product + audience)
references/brand-archetypes.md
Voice Agent
agents/voice-agent.md
brief (product + audience)
references/brand-voice.md
Visual Agent
agents/visual-agent.md
brief (product + audience + existing assets)
references/color-emotion.md
,
references/typography-psychology.md
,
references/visual-identity.md
Wait for all to complete. Their outputs feed the merge step and Layer 2.

并行生成以下Agent:
Agent指令文件传递的输入参考文件
Strategy Agent
agents/strategy-agent.md
简报(产品 + 受众 + 竞品)
Personality Agent
agents/personality-agent.md
简报(产品 + 受众)
references/brand-archetypes.md
Voice Agent
agents/voice-agent.md
简报(产品 + 受众)
references/brand-voice.md
Visual Agent
agents/visual-agent.md
简报(产品 + 受众 + 现有资产)
references/color-emotion.md
,
references/typography-psychology.md
,
references/visual-identity.md
等待所有Agent完成,其输出用于合并步骤和第二层流程。

Merge Step

合并步骤

Assemble Layer 1 outputs into the artifact template:
SectionOwner 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:
StepAgentInstruction FileReceives
1Token Architect Agent
agents/token-architect-agent.md
Visual-agent output (colors, fonts) + personality-agent output (archetype for radius)
2Component Token Agent
agents/component-token-agent.md
Token-architect-agent output (semantic token map)
3Accessibility Agent
agents/accessibility-agent.md
Token-architect + component-token outputs
4Critic Agent
agents/critic-agent.md
Complete assembled brand system

严格按顺序逐个调度:
步骤Agent指令文件接收输入
1Token Architect Agent
agents/token-architect-agent.md
Visual-agent输出(色彩、字体) + personality-agent输出(圆角匹配的原型)
2Component Token Agent
agents/component-token-agent.md
Token-architect-agent输出(语义令牌映射)
3Accessibility Agent
agents/accessibility-agent.md
Token-architect + component-token输出
4Critic Agent
agents/critic-agent.md
完整组装的品牌系统

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
references/artboard-generation.md
for complete specs, workflow, and prerequisites.
After generating artboards, run the AI slop detection checklist (
references/ai-slop-detection.md
). Artboards are the highest-risk output for AI default patterns.
Artboards: 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滥造内容检查清单(
references/ai-slop-detection.md
)。画板是AI默认模式的高风险输出。
画板内容:调色板 | 排版系统 | 间距与令牌 | UI风格原则 | Logo系统
如果没有Paper MCP工具,跳过本步骤。

Artifact Template

产出物模板

Save to
.agents/design/brand-system.md
.
On re-run: rename existing artifact to
brand-system.v[N].md
and create new with incremented version.
markdown
---
skill: brand-system
version: 1
date: {{today}}
status: draft
---
保存到
.agents/design/brand-system.md
重新运行时:将现有产出物重命名为
brand-system.v[N].md
,创建版本号递增的新文件。
markdown
---
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)
    /
    #2cbaa0
    . Neutral base: Stone. Display: Plus Jakarta Sans. Body: Inter. Radius: 0.5rem (Caregiver). Imagery: real people, natural light, warm tones.
4个Agent并行调度:
  • Strategy agent输出:目标"让理财赋权于人,而不是让人感到羞耻"。定位:"唯一像支持型朋友的理财APP"。价值观:透明优先于舒适,简洁优先于完备,进步优先于完美。
  • Personality agent输出:照顾者(70%)+ 探索者(30%)。特质:鼓励但不居高临下,清晰但不过于简化,温暖但不过于甜腻。
  • Voice agent输出:3个属性的调性表(直白、鼓励、诚实)。 slogan:"理财,告别羞耻感"。4种长度的品牌介绍。
  • Visual agent输出:主色暖青色
    oklch(0.65 0.15 180)
    /
    #2cbaa0
    。中性色基础:Stone。标题字体:Plus Jakarta Sans。正文字体:Inter。圆角:0.5rem(匹配照顾者原型)。Imagery:真实人物、自然光、暖色调。

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,
    --radius: 0.5rem
    , 19 semantic tokens with light + dark values.
  • 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主色色阶、
    --radius: 0.5rem
    、19个包含亮色/暗色值的语义令牌。
  • 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.md

Worked 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)
    /
    #3b82f6
    . Neutral: Slate. Display: Inter. Body: Inter.
  • Strategy agent输出:目标、价值观(清晰优先于复杂,速度优先于繁文缛节)、定位。
  • Visual agent输出:主色蓝色
    oklch(0.623 0.214 259)
    /
    #3b82f6
    。中性色:Slate。标题字体:Inter。正文字体:Inter。

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
--subtle-muted-foreground-alt
, the system is too granular.
Skipping semantic layer — Components referencing primitives (
oklch(0.546...)
) instead of semantic tokens (
var(--primary)
). INSTEAD: Always reference semantic tokens. The three-layer chain is Primitive -> Semantic -> Component.
Mismatched bg/fg pairs
bg-primary text-primary
is wrong; use
bg-primary text-primary-foreground
. INSTEAD: Every semantic color role is a pair. Base = background.
-foreground
= text on that surface.
Dark 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-primary
是错误的,应使用
bg-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生成设计反模式检查清单