Back to Details

design-catalog

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

description: Generate visual design proposal catalog with 5-8 options argument-hint: "[route-or-url]"

description: 生成包含5-8个选项的视觉设计提案目录 argument-hint: "[路由或网址]"

DESIGN-CATALOG

设计方案目录

Generate a catalog of 5-8 design proposals before implementing anything.
在开展任何实现工作前，生成包含5-8个设计提案的目录。

MANDATORY: Kimi Delegation

强制要求：委托Kimi处理

All proposal generation MUST be delegated to Kimi K2.5 via MCP.
Kimi excels at frontend/visual work. Claude orchestrates, Kimi implements:
javascript
// Generate proposals in parallel (4.5x faster than sequential)
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Generate proposal 1: [DNA code]. Output: .design-catalog/proposals/01-[name]/", thinking: true },
    { prompt: "Generate proposal 2: [DNA code]. Output: .design-catalog/proposals/02-[name]/", thinking: true },
    // ... 5-8 total proposals
  ]
})
Workflow:
  1. Research direction → Gemini (web grounding)
  2. Generate proposals → Kimi (parallel agents)
  3. Validate & review → Claude (quality gates, expert panel)
所有提案生成工作必须通过MCP委托给Kimi K2.5处理。
Kimi擅长前端/视觉类工作。Claude负责统筹，Kimi负责实现：
javascript
// Generate proposals in parallel (4.5x faster than sequential)
mcp__kimi__spawn_agents_parallel({
  agents: [
    { prompt: "Generate proposal 1: [DNA code]. Output: .design-catalog/proposals/01-[name]/", thinking: true },
    { prompt: "Generate proposal 2: [DNA code]. Output: .design-catalog/proposals/02-[name]/", thinking: true },
    // ... 5-8 total proposals
  ]
})
工作流程：
  1. 研究方向 → Gemini（基于网页信息）
  2. 生成提案 → Kimi（并行Agent）
  3. 验证与评审 → Claude（质量把关、专家评审）

Why Catalogs

为什么需要设计目录

Design is visual and iterative. Showing options before implementing:
  • Prevents commitment to first idea
  • Surfaces unexpected directions
  • Lets user make informed choices
设计是视觉化且需要反复迭代的工作。在实现前展示多种选项：
  • 避免过早敲定首个想法
  • 发掘意想不到的设计方向
  • 让用户做出更明智的选择

Process

流程步骤

1. Load Design Skills

1. 加载设计技能

Skill("frontend-design")      # Philosophy
Skill("aesthetic-system")     # Strategic direction
Skill("ui-skills")            # Implementation constraints
Skill("frontend-design")      # Philosophy
Skill("aesthetic-system")     # Strategic direction
Skill("ui-skills")            # Implementation constraints

2. Analyze Current State

2. 分析当前状态

If 
$1
provided (route or URL):
  • Screenshot the target via Chrome MCP
  • Analyze existing design DNA (typography, colors, layout, motion)
If no argument:
  • Ask what to design
如果提供了
$1
（路由或网址）：
  • 通过Chrome MCP对目标页面截图
  • 分析现有设计DNA（字体、色彩、布局、动效）
如果未提供参数：
  • 询问需要设计的内容

3. Research via Gemini

3. 通过Gemini开展研究

bash
gemini "Analyze this [product type] for distinctive design directions.
Research 2025 trends. Anti-convergence: avoid Inter, Space Grotesk,
purple gradients, Tailwind default blue-500."
bash
gemini "Analyze this [product type] for distinctive design directions.
Research 2025 trends. Anti-convergence: avoid Inter, Space Grotesk,
purple gradients, Tailwind default blue-500."

4. Generate 5-8 Proposals

4. 生成5-8个提案

For EACH proposal:
  1. Build working HTML/React preview
  2. Validate against ui-skills constraints
  3. Run 
    /rams
    — Must score ≥70/100
  4. Only passing proposals enter catalog
DNA variety rule: No two proposals share >2 axes.
针对每个提案：
  1. 构建可运行的HTML/React预览
  2. 对照ui-skills的约束条件进行验证
  3. 运行
    /rams
    工具 — 得分必须≥70/100
  4. 只有通过验证的提案才能进入目录
DNA多样性规则：任意两个提案的重合维度不得超过2个。

5. Present Catalog

5. 展示目录

bash
mkdir -p .design-catalog && cd .design-catalog
python -m http.server 8888 &
Open in browser, screenshot, present:
Design Catalog Ready

[N] proposals passed validation. Live: http://localhost:8888

1. [Name] - [soul] - DNA: [code] - RAMS: [score]/100
2. [Name] - [soul] - DNA: [code] - RAMS: [score]/100
...

Browse, compare, tell me which 2-3 resonate.
bash
mkdir -p .design-catalog && cd .design-catalog
python -m http.server 8888 &
在浏览器中打开、截图并展示：
Design Catalog Ready

[N] proposals passed validation. Live: http://localhost:8888

1. [Name] - [soul] - DNA: [code] - RAMS: [score]/100
2. [Name] - [soul] - DNA: [code] - RAMS: [score]/100
...

Browse, compare, tell me which 2-3 resonate.

6. Iterate

6. 迭代优化

User selects favorites → generate hybrids → re-validate.
用户选择心仪提案 → 生成混合提案 → 重新验证。

Anti-Convergence Checklist

反趋同检查清单

Verify NO proposal uses:
  • Inter, Roboto, Space Grotesk, Satoshi as primary fonts
  • Purple gradients on white backgrounds
  • Tailwind default blue-500 (#3B82F6)
  • Centered max-w-4xl container everywhere
  • No animations at all
确保所有提案均未使用以下内容：
  • 将Inter、Roboto、Space Grotesk、Satoshi作为主字体
  • 白色背景搭配紫色渐变
  • Tailwind默认蓝色-500（#3B82F6）
  • 全局使用居中的max-w-4xl容器
  • 完全没有动效

Output

输出结果

Catalog ready for user selection. Next: User picks direction → 
/design-theme
.
目录已准备就绪，等待用户选择。下一步：用户选定方向 → 执行
/design-theme
。