Back to Details

design-exploration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design Exploration

设计探索

Investigate existing designs, generate a visual catalogue of 6-12 diverse proposals, facilitate iterative refinement, and output a selected direction for implementation.
调研现有设计，生成包含6-12种差异化方案的视觉目录，助力迭代优化，并输出最终选定的落地方向。

MANDATORY: Kimi Delegation for Visual Work

强制要求：视觉工作需委托给Kimi K2.5

All visual proposal generation MUST be delegated to Kimi K2.5 via MCP.
Kimi excels at frontend development and visual coding. For design exploration:
  1. Research direction → Gemini (web grounding, trend research)
  2. Generate proposals → Kimi (visual implementation via Agent Swarm)
  3. Review/iterate → Claude (orchestration, quality gates)
javascript
// Delegate proposal generation to Kimi
mcp__kimi__spawn_agent({
  prompt: `Generate design proposal for [component].
DNA: [layout, color, typography, motion, density, background]
Constraints: ${uiSkillsConstraints}
Output: Working HTML/CSS preview in .design-catalogue/proposals/[name]/`,
  thinking: true  // Enable for complex proposals
})

// For parallel proposal generation (4.5x faster):
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Generate proposal 1: Midnight Editorial...", thinking: true },
    { prompt: "Generate proposal 2: Swiss Brutalist...", thinking: true },
    { prompt: "Generate proposal 3: Warm Workshop...", thinking: true },
    // ... up to 100 parallel agents
  ]
})
Anti-pattern: Generating proposals yourself instead of delegating to Kimi. Pattern: Research (Gemini) → Generate (Kimi) → Review (Claude)
所有视觉方案生成必须通过MCP委托给Kimi K2.5。
Kimi擅长前端开发和视觉编码。针对设计探索流程：
  1. 调研方向 → Gemini（网页关联、趋势研究）
  2. 生成方案 → Kimi（通过Agent Swarm实现视觉落地）
  3. 评审/迭代 → Claude（流程编排、质量把控）
javascript
// Delegate proposal generation to Kimi
mcp__kimi__spawn_agent({
  prompt: `Generate design proposal for [component].
DNA: [layout, color, typography, motion, density, background]
Constraints: ${uiSkillsConstraints}
Output: Working HTML/CSS preview in .design-catalogue/proposals/[name]/`,
  thinking: true  // Enable for complex proposals
})

// For parallel proposal generation (4.5x faster):
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Generate proposal 1: Midnight Editorial...", thinking: true },
    { prompt: "Generate proposal 2: Swiss Brutalist...", thinking: true },
    { prompt: "Generate proposal 3: Warm Workshop...", thinking: true },
    // ... up to 100 parallel agents
  ]
})
反模式： 自行生成方案而非委托给Kimi。 正确模式： 调研（Gemini）→ 生成（Kimi）→ 评审（Claude）

When to Use

适用场景

  • Before 
    /aesthetic
    or 
    /polish
    when direction is unclear
  • When user wants to see multiple design options visually
  • When redesigning or refreshing existing UI
  • When maturity < 6 and no clear aesthetic direction exists
  • 当方向不明确时，在启动/aesthetic或/polish流程前使用
  • 用户希望直观查看多种设计选项时
  • 对现有UI进行重设计或焕新时
  • 项目成熟度<6且无明确美学方向时

Core Principle: Visual Over Verbal

核心原则：视觉优先于文字

The catalogue is a working visual, not markdown descriptions.
Users see actual styled components, real typography, live color palettes - not just words describing what things would look like.
目录是可交互的视觉成果，而非Markdown描述。
用户将看到实际样式的组件、真实的排版、动态的配色方案——而非仅用文字描述设计效果。

Phase 0: Backend Detection

阶段0：后端检测

Check available rendering backends:
javascript
// Check if Pencil MCP is available
try {
  mcp__pencil__get_editor_state({ include_schema: false })
  // Pencil available → use pencil-renderer
  BACKEND = "pencil"
} catch {
  // Fallback to HTML renderer
  BACKEND = "html"
}
Backend selection:
  • Pencil (preferred): Native .pen file rendering, design system integration
  • HTML (fallback): Static HTML/CSS proposals served locally
检查可用的渲染后端：
javascript
// Check if Pencil MCP is available
try {
  mcp__pencil__get_editor_state({ include_schema: false })
  // Pencil可用 → 使用pencil-renderer
  BACKEND = "pencil"
} catch {
  // 回退到HTML渲染器
  BACKEND = "html"
}
后端选择：
  • Pencil（优先）：原生.pen文件渲染，支持设计系统集成
  • HTML（回退）：本地部署的静态HTML/CSS方案

Workflow

工作流程

1. Investigation

1. 调研阶段

Understand what exists:
bash
undefined
了解现有设计：
bash
undefined

Screenshot current state via Chrome MCP

通过Chrome MCP截取当前界面截图

mcp__claude-in-chrome__tabs_context_mcp mcp__claude-in-chrome__navigate url="[current app URL]" mcp__claude-in-chrome__computer action="screenshot"

**Analyze the current design:**
- Typography: What fonts, sizes, weights?
- Colors: What palette, what semantic meaning?
- Layout: Centered? Asymmetric? Grid-based?
- Motion: Any animations? What timing?
- Components: What patterns exist?

**Infer current DNA:**
DNA Axes:
  • Layout: [centered|asymmetric|grid-breaking|full-bleed|bento|editorial]
  • Color: [dark|light|monochrome|gradient|high-contrast|brand-tinted]
  • Typography: [display-heavy|text-forward|minimal|expressive|editorial]
  • Motion: [orchestrated|subtle|aggressive|none|scroll-triggered]
  • Density: [spacious|compact|mixed|full-bleed]
  • Background: [solid|gradient|textured|patterned|layered]

**Identify:**
- Strengths to preserve
- Weaknesses/opportunities
- Constraints (brand colors, accessibility, tech stack)

**Research via Gemini:**
```bash
gemini -p "I'm building [describe component/page]. Research:
1. Distinctive design approaches (avoid AI-slop aesthetics)
2. Real-world examples of excellent [component type]
3. Current typography/color/layout trends for this context
4. Unexpected alternatives to obvious solutions"
mcp__claude-in-chrome__tabs_context_mcp mcp__claude-in-chrome__navigate url="[current app URL]" mcp__claude-in-chrome__computer action="screenshot"

**分析当前设计：**
- 排版：使用了哪些字体、字号、字重？
- 配色：采用了什么调色板，各颜色的语义是什么？
- 布局：居中？不对称？基于网格？
- 动效：是否有动画？动画时长是多少？
- 组件：存在哪些设计模式？

**推导当前DNA：**
DNA维度：
  • 布局：[居中|不对称|打破网格|全屏|便当式|编辑式]
  • 配色：[深色|浅色|单色|渐变|高对比度|品牌色调]
  • 排版：[重展示|重文本|极简|表现力强|编辑式]
  • 动效：[协调统一|细微|夸张|无|滚动触发]
  • 密度：[宽松|紧凑|混合|全屏]
  • 背景：[纯色|渐变|纹理|图案|分层]

**明确：**
- 需要保留的优势
- 短板/优化机会
- 约束条件（品牌色、无障碍要求、技术栈）

**通过Gemini开展研究：**
```bash
gemini -p "I'm building [describe component/page]. Research:
1. Distinctive design approaches (avoid AI-slop aesthetics)
2. Real-world examples of excellent [component type]
3. Current typography/color/layout trends for this context
4. Unexpected alternatives to obvious solutions"

2. Build Visual Catalogue

2. 构建视觉目录

Generate 6-12 proposals using DNA variation system.
使用DNA变体系统生成6-12个方案。

If BACKEND = "pencil":

若BACKEND = "pencil"：

Use 
pencil-renderer
primitive:
javascript
// For each proposal
// 1. Get style guide matching DNA mood
mcp__pencil__get_style_guide_tags()
mcp__pencil__get_style_guide({ tags: [mapped_tags] })

// 2. Render via pencil-renderer workflow
// See: pencil-renderer/SKILL.md
All proposals render to a single .pen document as separate frames.
使用
pencil-renderer
原语：
javascript
// 针对每个方案
// 1. 获取匹配DNA风格的样式指南
mcp__pencil__get_style_guide_tags()
mcp__pencil__get_style_guide({ tags: [mapped_tags] })

// 2. 通过pencil-renderer工作流渲染
// 参考：pencil-renderer/SKILL.md
所有方案将渲染到单个.pen文档中，作为独立的帧。

If BACKEND = "html":

若BACKEND = "html"：

Create catalogue directory:
.design-catalogue/
├── index.html              # Main viewer
├── styles/catalogue.css    # Viewer chrome styles
├── proposals/
│   ├── 01-[name]/
│   │   ├── preview.html
│   │   └── styles.css
│   ├── 02-[name]/
│   │   └── ...
│   └── ... (6-12 total)
└── assets/
DNA Variation Rule: No two proposals share >2 axes.
Required diversity:
  • At least 2 bold/dramatic directions
  • At least 2 refined/subtle directions
  • At least 1 unexpected/wild card
  • At least 1 that preserves current strengths
Each proposal preview includes:
  • Hero section in that style
  • Sample card component
  • Button states (default, hover, active)
  • Typography scale (h1-h6, body, caption)
  • Color palette swatches with hex codes
  • DNA code badge
Reference templates:
  • references/viewer-template.html
    - Main catalogue viewer
  • references/proposal-template.html
    - Individual proposal page
  • references/catalogue-template.md
    - Metadata structure
Anti-convergence check: Reference 
aesthetic-system/references/banned-patterns.md
  • No Inter, Space Grotesk, Roboto as primary fonts
  • No purple gradients on white
  • No centered-only layouts for all proposals
创建目录结构：
.design-catalogue/
├── index.html              # 主查看器
├── styles/catalogue.css    # 查看器样式
├── proposals/
│   ├── 01-[name]/
│   │   ├── preview.html
│   │   └── styles.css
│   ├── 02-[name]/
│   │   └── ...
│   └── ... (6-12 total)
└── assets/
DNA变体规则： 任意两个方案共享的维度不超过2个。
多样性要求：
  • 至少2个大胆/戏剧性的方向
  • 至少2个精致/细微的方向
  • 至少1个出人意料/wildcard方向
  • 至少1个保留当前优势的方向
每个方案预览需包含：
  • 该风格的核心区域
  • 示例卡片组件
  • 按钮状态（默认、hover、激活）
  • 排版层级（h1-h6、正文、说明文字）
  • 带十六进制代码的配色样本
  • DNA标识徽章
参考模板：
  • references/viewer-template.html
    - 主目录查看器
  • references/proposal-template.html
    - 单个方案页面
  • references/catalogue-template.md
    - 元数据结构
反趋同检查： 参考
aesthetic-system/references/banned-patterns.md
  • 禁止将Inter、Space Grotesk、Roboto作为主字体
  • 禁止白色背景搭配紫色渐变
  • 禁止所有方案均采用居中布局

3. Present & Serve

3. 展示与部署

If BACKEND = "pencil":

若BACKEND = "pencil"：

javascript
// Screenshot each proposal frame
for (const frame of proposalFrames) {
  mcp__pencil__get_screenshot({ nodeId: frame.id })
}
Present in chat with screenshots.
javascript
// 截取每个方案帧的截图
for (const frame of proposalFrames) {
  mcp__pencil__get_screenshot({ nodeId: frame.id })
}
在对话中附带截图进行展示。

If BACKEND = "html":

若BACKEND = "html"：

bash
cd .design-catalogue && python -m http.server 8888 &
echo "Catalogue available at http://localhost:8888"
Open in Chrome MCP:
bash
mcp__claude-in-chrome__navigate url="http://localhost:8888"
mcp__claude-in-chrome__computer action="screenshot"
Present to user:
Design Catalogue Ready

I've built [N] visual proposals exploring different directions for [project].

Quick overview:
1. Midnight Editorial - [soul statement]
2. Swiss Brutalist - [soul statement]
3. Warm Workshop - [soul statement]
...

[If Pencil] View the .pen file directly in your editor
[If HTML] Browse the catalogue: http://localhost:8888

Tell me which 2-3 resonate.
bash
cd .design-catalogue && python -m http.server 8888 &
echo "Catalogue available at http://localhost:8888"
通过Chrome MCP打开：
bash
mcp__claude-in-chrome__navigate url="http://localhost:8888"
mcp__claude-in-chrome__computer action="screenshot"
向用户展示：
设计目录已准备就绪

我已为[项目]构建了[N]个视觉方案，探索不同的设计方向。

快速概览：
1. Midnight Editorial - [核心定位]
2. Swiss Brutalist - [核心定位]
3. Warm Workshop - [核心定位]
...

[若使用Pencil] 可在编辑器中直接查看.pen文件
[若使用HTML] 浏览目录：http://localhost:8888

请告诉我哪2-3个方案更符合你的预期。

4. Collaborative Refinement

4. 协作优化

First selection:
AskUserQuestion:
"Which 2-3 directions interest you most?"
Options: [Proposal names with brief descriptions]
Refinement dialogue:
  • "What specifically appeals about [selection]?"
  • "Anything you'd change or combine?"
  • "Should I generate hybrid proposals?"
If refinement requested:
  • Generate 2-3 new proposals based on feedback
  • Add to catalogue as new entries
  • Update viewer to highlight refined options
首轮筛选：
向用户提问：
"哪2-3个方向最吸引你？"
选项：[方案名称+简短描述]
优化对话：
  • “你特别喜欢[选中方案]的哪些方面？”
  • “你希望调整或融合哪些元素？”
  • “需要我生成混合方案吗？”
若用户提出优化需求：
  • 根据反馈生成2-3个新方案
  • 将新方案添加到目录中
  • 更新查看器以突出优化后的选项

5. Direction Selection

5. 方向选定

Present finalists with expanded detail:
  • Full color palette (all semantic tokens)
  • Complete typography scale with specimens
  • Component transformation examples (before → after)
  • Implementation priority list
Final selection:
AskUserQuestion:
"Which direction should we implement?"
Options: [Finalist names]
+ "Make more changes first"
展示最终候选方案的详细信息：
  • 完整配色方案（所有语义标识）
  • 带示例的完整排版层级
  • 组件转换示例（之前 → 之后）
  • 落地优先级列表
最终选择：
向用户提问：
"我们应该落地哪个方向？"
选项：[最终候选方案名称]
+ "先进行更多调整"

5.5. Expert Panel Review (MANDATORY)

5.5. 专家评审（强制要求）

Before presenting any design to user, run expert panel review.
See: 
ui-skills/references/expert-panel-review.md
  1. Simulate 10 world-class advertorial experts (Ogilvy, Rams, Scher, Wiebe, Laja, Walter, Cialdini, Ive, Wroblewski, Millman)
  2. Each expert scores 0-100 and provides specific improvement feedback
  3. Calculate average score
  4. If average < 90: Implement highest-impact feedback, iterate, re-review
  5. If average ≥ 90: Proceed to handoff
markdown
Expert Panel Review: [Design Name]

| Expert | Score | Critical Improvement |
|--------|-------|---------------------|
| Ogilvy | 88 | Headline needs stronger benefit |
| Rams | 92 | Clean execution |
| ...
**Average: 89.2** ❌ → Iterating...
Do not return design until 90+ average achieved.
在向用户展示任何设计前，必须进行专家评审。
参考：
ui-skills/references/expert-panel-review.md
  1. 模拟10位世界级广告编辑专家（Ogilvy、Rams、Scher、Wiebe、Laja、Walter、Cialdini、Ive、Wroblewski、Millman）
  2. 每位专家评分0-100并提供具体的优化建议
  3. 计算平均得分
  4. 若平均分<90： 落地影响最大的优化建议，迭代后重新评审
  5. 若平均分≥90： 进入交付环节
markdown
专家评审：[设计名称]

| 专家 | 得分 | 关键优化建议 |
|--------|-------|---------------------|
| Ogilvy | 88 | 标题需突出核心价值 |
| Rams | 92 | 执行简洁干净 |
| ...
**平均分：89.2** ❌ → 迭代中...
设计方案平均分未达90分前，不得提交给用户。

6. Output & Handoff

6. 输出与交付

Return selected direction:
markdown
undefined
返回选定方向：
markdown
undefined

Selected Direction: [Name]

选定方向：[名称]

DNA: [layout, color, typography, motion, density, background]
Typography:
  • Headings: [Font family, weights]
  • Body: [Font family, weights]
  • Code/Mono: [Font family]
Color Palette:
  • Background: [hex]
  • Foreground: [hex]
  • Primary: [hex]
  • Secondary: [hex]
  • Accent: [hex]
  • Muted: [hex]
Implementation Priorities:
  1. [First change - highest impact]
  2. [Second change]
  3. [Third change]
Preserve:
  • [What to keep from current design]
Transform:
  • [What changes dramatically]
Anti-patterns to avoid:
  • [Specific things NOT to do]

**Handoff routing:**

| Backend | Handoff Target |
|---------|---------------|
| Pencil | `pencil-to-code` — exports .pen → React/Tailwind |
| HTML | `design-theme` — implements tokens in codebase |
AskUserQuestion: "Ready to generate implementation code?" Options:
  • "Yes, generate React components" → invoke handoff
  • "No, I'll implement manually" → return spec only

**Cleanup (HTML backend only):**
```bash
DNA： [布局, 配色, 排版, 动效, 密度, 背景]
排版：
  • 标题：[字体家族, 字重]
  • 正文：[字体家族, 字重]
  • 代码/等宽字体：[字体家族]
配色方案：
  • 背景：[十六进制代码]
  • 前景：[十六进制代码]
  • 主色：[十六进制代码]
  • 辅助色：[十六进制代码]
  • 强调色：[十六进制代码]
  • 柔和色：[十六进制代码]
落地优先级：
  1. [第一项变更 - 影响最大]
  2. [第二项变更]
  3. [第三项变更]
保留内容：
  • [现有设计中需保留的部分]
改造内容：
  • [需大幅调整的部分]
需避免的反模式：
  • [具体禁止事项]

**交付路由：**

| 后端 | 交付目标 |
|---------|---------------|
| Pencil | `pencil-to-code` — 将.pen文件导出为React/Tailwind代码 |
| HTML | `design-theme` — 在代码库中实现标识 |
向用户提问： "是否准备生成落地代码？" 选项：
  • "是，生成React组件" → 触发交付流程
  • "否，我将手动落地" → 仅返回规格说明

**清理（仅HTML后端）：**
```bash

Stop local server

停止本地服务器

pkill -f "python -m http.server 8888"
pkill -f "python -m http.server 8888"

Optionally remove catalogue

可选：删除目录

rm -rf .design-catalogue

rm -rf .design-catalogue

undefined
undefined

Quick Reference

快速参考

PhaseAction
Backend DetectionCheck Pencil MCP availability
InvestigationScreenshot, analyze, infer DNA, research via Gemini
CatalogueBuild 6-12 visual proposals with DNA variety
PresentServe/screenshot, describe options
RefineUser picks favorites, generate hybrids if needed
SelectFinal choice with full spec
HandoffRoute to pencil-to-code or design-theme
阶段操作
后端检测检查Pencil MCP可用性
调研截图、分析、推导DNA、通过Gemini开展研究
目录构建生成6-12个具有DNA多样性的视觉方案
展示部署/截图、描述选项
优化用户选择偏好方案，按需生成混合方案
选定最终选择及完整规格
交付路由至pencil-to-code或design-theme

Integration

集成

Invoked by:
  • /design
    command (directly)
  • /aesthetic
    at Phase 0 (recommended)
  • /polish
    when maturity < 6 (suggested)
Outputs to:
  • pencil-to-code
    — when Pencil backend, user wants code
  • design-theme
    — when HTML backend, user wants implementation
  • /aesthetic
    — guides all subsequent phases
  • /polish
    — constrains DNA for refinement loop
调用方式：
  • 直接通过
    /design
    命令
  • 在/aesthetic流程的阶段0调用（推荐）
  • 当成熟度<6时，在/polish流程中调用（建议）
输出至：
  • pencil-to-code
    — 使用Pencil后端且用户需要代码时
  • design-theme
    — 使用HTML后端且用户需要落地时
  • /aesthetic
    — 指导后续所有阶段
  • /polish
    — 为优化循环约束DNA

Related Skills

相关技能

  • pencil-renderer
    — Pencil MCP rendering primitive
  • pencil-to-code
    — .pen → React/Tailwind export
  • aesthetic-system
    — DNA codes, anti-convergence rules
  • design-tokens
    — Token system patterns
  • design-theme
    — Theme implementation
  • pencil-renderer
    — Pencil MCP渲染原语
  • pencil-to-code
    — .pen → React/Tailwind导出
  • aesthetic-system
    — DNA代码、反趋同规则
  • design-tokens
    — 标识系统模式
  • design-theme
    — 主题落地

References

参考资料

  • references/viewer-template.html
    - Catalogue viewer HTML
  • references/proposal-template.html
    - Individual proposal HTML
  • references/catalogue-template.md
    - Metadata structure
  • aesthetic-system/references/dna-codes.md
    - DNA axis definitions
  • aesthetic-system/references/banned-patterns.md
    - Anti-convergence rules
  • references/viewer-template.html
    - 目录查看器HTML
  • references/proposal-template.html
    - 单个方案HTML
  • references/catalogue-template.md
    - 元数据结构
  • aesthetic-system/references/dna-codes.md
    - DNA维度定义
  • aesthetic-system/references/banned-patterns.md
    - 反趋同规则