Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design - Unified Design Skill

前端设计 - 统一设计技能

One skill for all design work. Always produces 3 worldclass proposals with full UX architecture. No exceptions.
一款适用于所有设计工作的技能。始终产出3个具备完整UX架构的世界级设计方案，无一例外。

Modes

模式

/frontend-design              # Auto-detect mode
/frontend-design new          # Build new UI from scratch
/frontend-design revamp       # Total redesign (throw away existing)
/frontend-design polish       # Production polish pass (no proposals)
/frontend-design qa           # Quality gate check (no proposals)
/frontend-design flow         # UX architecture only (no visuals)
/frontend-design              # 自动检测模式
/frontend-design new          # 从零开始构建新UI
/frontend-design revamp       # 彻底重新设计（抛弃现有内容）
/frontend-design polish       # 生产环境打磨优化（不生成方案）
/frontend-design qa           # 质量关卡检查（不生成方案）
/frontend-design flow         # 仅生成UX架构（无视觉设计）

Mode Detection

模式检测

If no mode specified, detect from context:
SignalMode
No UI files exist
new
User says "redesign/revamp/redo/start over"
revamp
User says "polish/refine/improve/fix"
polish
User says "check/qa/review/audit/ready to ship"
qa
User says "flow/ux/screens/architecture"
flow
AmbiguousAsk user
如果未指定模式，将根据上下文自动检测：
信号模式
不存在任何UI文件
new
用户提及"redesign/revamp/redo/start over"（重新设计/彻底改造/重做/从头开始）
revamp
用户提及"polish/refine/improve/fix"（打磨/优化/改进/修复）
polish
用户提及"check/qa/review/audit/ready to ship"（检查/质量保证/评审/审计/准备上线）
qa
用户提及"flow/ux/screens/architecture"（流程/用户体验/界面/架构）
flow
上下文模糊询问用户

THE 3-PROPOSAL RULE (Mandatory for new/revamp)

三方案规则（new/revamp模式强制要求）

Every 
new
or 
revamp
invocation MUST generate exactly 3 proposals. Not 1, not 2, not 4. Three. Each proposal must be:
  • Structurally different (enforced by DNA system)
  • Worldclass professional quality
  • Self-contained HTML file with all CSS inline
  • Include full UX architecture (flow, states, interactions)
每次调用
new
或
revamp
模式时，必须生成恰好3个设计方案。不能是1个、2个或4个，只能是3个。每个方案必须满足：
  • 结构完全不同（由DNA系统强制保障）
  • 达到世界级专业水准
  • 是包含所有内联CSS的独立HTML文件
  • 具备完整的UX架构（流程、状态、交互）

Execution Flow (new/revamp)

执行流程（new/revamp模式）

Step 1: Understand Context

步骤1：理解上下文

Before anything:
  • Purpose: What problem does this interface solve? Who uses it?
  • Constraints: Framework, performance, accessibility requirements
  • Existing code: Read current files if revamp mode
在开始任何工作前：
  • 用途：该界面解决什么问题？目标用户是谁？
  • 约束条件：框架、性能、无障碍访问要求
  • 现有代码：如果是revamp模式，需读取当前文件内容

Step 2: Define UX Architecture (for ALL 3 proposals)

步骤2：定义UX架构（所有3个方案通用）

Each proposal includes its own UX architecture:
markdown
undefined
每个方案都需包含独立的UX架构：
markdown
undefined

UX Architecture

UX架构

Entry: [where user starts] Exit: [how user knows done]
Screens:
  1. [Name] - [Purpose] - [Primary action]
  2. [Name] - [Purpose] - [Primary action]
Happy Path: Entry > Screen 1 > Screen 2 > Exit
States:
  • Empty: [what shows with no data]
  • Loading: [what shows during fetch]
  • Error: [what shows on failure + recovery]
Kill-Switch Test:
  • Does this flow require explanation? → Simplify
  • Could first-time user get stuck? → Add guidance
  • Are there screens that exist "just in case"? → Remove
undefined
入口：[用户起始位置] 出口：[用户如何判断任务完成]
界面：
  1. [名称] - [用途] - [主要操作]
  2. [名称] - [用途] - [主要操作]
理想流程：入口 > 界面1 > 界面2 > 出口
状态：
  • 空状态：[无数据时显示内容]
  • 加载状态：[数据获取中显示内容]
  • 错误状态：[失败时显示内容 + 恢复方式]
终止测试：
  • 该流程是否需要额外解释？→ 简化设计
  • 首次使用的用户是否可能卡住？→ 添加引导
  • 是否存在"以防万一"的界面？→ 删除该界面
undefined

Step 3: Auto-Assign DNA Codes

步骤3：自动分配DNA编码

Read 
reference/dna-system.md
and assign unique DNA codes to each proposal.
Constraint: No two proposals may share more than 2 DNA genes.
DNA Format: DNA-[Layout]-[Navigation]-[Hero]-[Color]-[Typography]

Example:
- Proposal 1: DNA-A-H-I-D-R (Asymmetric, Hidden, Immersive, Duotone, Retro)
- Proposal 2: DNA-B-T-S-V-S (Bento, Top-fixed, Split, Vibrant, Sans)
- Proposal 3: DNA-F-O-F-M-E (Full-bleed, Overlay, Full-viewport, Mono, Serif)
读取
reference/dna-system.md
并为每个方案分配唯一的DNA编码。
约束：任意两个方案的共享基因不得超过2个。
DNA格式：DNA-[布局]-[导航]-[Hero区域]-[色彩]-[排版]

示例：
- 方案1：DNA-A-H-I-D-R（非对称、隐藏式、沉浸式、双色调、复古风）
- 方案2：DNA-B-T-S-V-S（便当式、顶部固定、分割式、活力风、无衬线）
- 方案3：DNA-F-O-F-M-E（全屏式、覆盖式、视口满屏、单色调、衬线）

Step 4: Load Constraints

步骤4：加载约束条件

  1. Read 
    reference/banned-defaults.md
    - These patterns are FORBIDDEN
  2. Read 
    reference/inspirations.md
    - Each proposal must cite at least one inspiration
  3. Combine 2-3 inspirations from DIFFERENT categories per proposal
  1. 读取
    reference/banned-defaults.md
    - 这些模式是严格禁止的
  2. 读取
    reference/inspirations.md
    - 每个方案必须至少引用一个设计灵感
  3. 每个方案需结合2-3个不同类别的设计灵感

Step 5: Generate 3 Proposals in Parallel

步骤5：并行生成3个方案

Launch 3 subagents simultaneously using the Task tool:
javascript
// For each proposal N (1, 2, 3):
Task({
  subagent_type: "frontend-design",
  prompt: `
    ## Design Proposal ${N}

    **DNA Code:** ${assignedDNA}
    **Target:** ${projectName}
    **Inspiration:** ${citedInspirations}

    ### UX Architecture
    ${uxArchitecture}

    ### Constraints
    - FORBIDDEN patterns (from banned-defaults.md):
      ${bannedPatterns}
    - REQUIRED structural choices (from DNA):
      Layout: ${layoutChoice}
      Navigation: ${navChoice}
      Hero: ${heroChoice}
      Color: ${colorChoice}
      Typography: ${typoChoice}

    ### Hard Rules (48 non-negotiable rules apply - see below)

    ### Output
    Generate a complete, self-contained HTML file with:
    1. All CSS inline or embedded
    2. Responsive design (mobile-first)
    3. DNA badge in top-right corner
    4. Inspiration citation in footer
    5. Full UX architecture documented in HTML comments
    6. All states: loading, empty, error, success
    7. Accessibility: focus states, contrast, semantic HTML

    Save to: ./proposals/proposal-${N}.html
  `
})
使用Task工具同时启动3个子代理：
javascript
// 针对每个方案N（1, 2, 3）：
Task({
  subagent_type: "frontend-design",
  prompt: `
    ## 设计方案 ${N}

    **DNA编码：** ${assignedDNA}
    **目标项目：** ${projectName}
    **设计灵感：** ${citedInspirations}

    ### UX架构
    ${uxArchitecture}

    ### 约束条件
    - 禁止使用的模式（来自banned-defaults.md）：
      ${bannedPatterns}
    - DNA指定的结构选择：
      布局：${layoutChoice}
      导航：${navChoice}
      Hero区域：${heroChoice}
      色彩：${colorChoice}
      排版：${typoChoice}

    ### 硬性规则（需遵守48条不可协商的规则，详情见下文）

    ### 输出要求
    生成完整的独立HTML文件，包含：
    1. 所有CSS内联或嵌入
    2. 响应式设计（移动端优先）
    3. 右上角显示DNA标识
    4. 页脚标注设计灵感来源
    5. HTML注释中记录完整UX架构
    6. 包含所有状态：加载、空、错误、成功
    7. 无障碍访问：焦点状态、对比度、语义化HTML

    保存至：./proposals/proposal-${N}.html
  `
})

Step 6: Generate Catalogue

步骤6：生成方案目录

After all proposals complete, generate 
./proposals/index.html
using the catalogue template from 
reference/catalogue.html
.
所有方案完成后，使用
reference/catalogue.html
中的模板生成
./proposals/index.html
。

Step 7: Screenshot All Proposals

步骤7：为所有方案截图

javascript
// For each proposal:
mcp__puppeteer__puppeteer_navigate({ url: "file:///path/to/proposal-N.html" })
mcp__puppeteer__puppeteer_screenshot({ name: "proposal-N", width: 1280, height: 800 })
javascript
// 针对每个方案：
mcp__puppeteer__puppeteer_navigate({ url: "file:///path/to/proposal-N.html" })
mcp__puppeteer__puppeteer_screenshot({ name: "proposal-N", width: 1280, height: 800 })

Step 8: Present to User

步骤8：向用户展示结果

markdown
undefined
markdown
undefined

3 Design Proposals Generated

已生成3个设计方案

#DNAInspirationUX Flow
1DNA-A-H-I-D-RBrutalist + BloombergEntry > Dashboard > Detail > Action
2DNA-B-T-S-V-SLinear + StripeEntry > List > Detail > Action
3DNA-F-O-F-M-ESwiss + AfrofuturismEntry > Browse > Configure > Confirm
Browse catalogue: ./proposals/index.html
Next: Pick a winner (or combine elements), then I'll build production code.

---
编号DNA编码设计灵感UX流程
1DNA-A-H-I-D-R野兽派 + Bloomberg入口 > 仪表盘 > 详情页 > 操作
2DNA-B-T-S-V-SLinear + Stripe入口 > 列表页 > 详情页 > 操作
3DNA-F-O-F-M-E瑞士风格 + 非洲未来主义入口 > 浏览页 > 配置页 > 确认
查看方案目录：./proposals/index.html
下一步：选择一个方案（或融合多个方案的元素），我将构建生产级代码。

---

Design Thinking (for subagents)

设计思路（子代理适用）

Before coding, commit to a BOLD aesthetic direction:
  • Tone: Pick an extreme - brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
  • Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Choose a clear conceptual direction and execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
编码前，确定明确的大胆审美方向：
  • 基调：选择一种极端风格 - 极简主义、极繁主义、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志编辑风、野兽派、装饰艺术风、柔和马卡龙风、工业实用风
  • 差异化：什么让这个设计令人难忘？用户会记住的核心特点是什么？
关键：选择清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行 - 核心是设计的目的性，而非风格强度。

Frontend Aesthetics

前端美学

  • Typography: Choose distinctive fonts. NEVER use Arial, Inter, Roboto, system fonts, Poppins. Pair a distinctive display font with a refined body font.
  • Color: Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Use CSS variables. 1 brand color + neutrals.
  • Motion: Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Hover states that surprise.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.
  • Backgrounds: Create atmosphere and depth. Gradient meshes, noise textures, geometric patterns, layered transparencies.
  • 排版：选择独特字体。绝对禁止使用Arial、Inter、Roboto、系统字体、Poppins。将独特的标题字体与精致的正文字体搭配使用。
  • 色彩：主色调搭配鲜明的强调色，效果优于平淡、均匀分布的调色板。使用CSS变量。1个品牌色 + 中性色。
  • 动效：聚焦高影响力时刻：一次精心编排的页面加载动画（元素渐入）比零散的微交互更能带来愉悦感。设计令人惊喜的悬停状态。
  • 空间布局：打破常规的布局。非对称设计、元素重叠、对角线流程、突破网格的元素。
  • 背景：营造氛围和深度。渐变网格、噪点纹理、几何图案、分层透明效果。

No AI Slop (Zero Tolerance)

拒绝AI廉价设计（零容忍）

Visual slop - remove on sight:
  • Emojis anywhere in production UI (use SVG icons)
  • Gradient text (unless ONE hero element)
  • Glassmorphism blur cards stacked on each other
  • Neon glow effects on every element
  • Decorative SVG blobs/waves that serve no purpose
  • Hover animations on non-interactive elements
Copy slop - rewrite:
  • Fake social proof without real data
  • Marketing superlatives ("revolutionary", "cutting-edge")
  • Filler text ("Welcome to our platform", "Get started today")
  • "Powered by AI" badges
Layout slop - restructure:
  • 3-column feature grids with icon + title + description
  • Oversized hero with stock photo
  • "How it works" numbered steps with arrows
  • Footer with 4 columns of links to nonexistent pages
Code slop - clean up:
  • transition: all
    (specify properties)
  • Magic numbers (use tokens)
  • !important
    overrides (fix specificity)
The test: Show the UI to someone. If they say "AI made this" - it has slop. Strip it back.
视觉廉价设计 - 立即修正：
  • 生产环境UI中使用表情符号（应使用SVG图标）
  • 渐变文字（除非是单个Hero元素）
  • 堆叠的毛玻璃模糊卡片
  • 所有元素都使用霓虹发光效果
  • 无实际用途的装饰性SVG blob/波浪
  • 非交互元素添加悬停动画
文案廉价设计 - 重写：
  • 无真实数据的虚假社交证明
  • 营销夸张词汇（"革命性"、"前沿"）
  • 填充式文案（"欢迎来到我们的平台"、"立即开始"）
  • "由AI驱动"标识
布局廉价设计 - 重构：
  • 3列功能网格（图标 + 标题 + 描述）
  • 过大的Hero区域搭配库存图片
  • "工作原理"编号步骤搭配箭头
  • 包含4列无效链接的页脚
代码廉价设计 - 清理：
  • transition: all
    （需指定具体属性）
  • 魔法数字（使用令牌）
  • !important
    覆盖（修复选择器优先级）
测试标准：将UI展示给他人。如果对方说"这是AI做的" - 说明存在廉价设计元素，需简化。

Hard Rules (48 Non-Negotiable)

硬性规则（48条不可协商）

Animation (1-9)

动画（1-9）

  1. Never linear easing - Use 
    ease-out
    or 
    cubic-bezier(0.22, 1, 0.36, 1)
  2. Never scale from 0 - Minimum scale(0.93)
  3. Never animate keyboard actions - CMD+K, search, tab switching = instant
  4. Never animate theme toggles - Theme change is instant
  5. Never animate scroll position - Let users control scroll
  6. Never exceed 300ms for functional UI - <100ms instant, 100-300ms responsive
  7. No bounce on serious UI - Undermines trust
  8. Only animate transform and opacity - GPU-accelerated only. Never 
    transition: all
  9. Always respect prefers-reduced-motion
  1. 禁止使用线性缓动 - 使用
    ease-out
    或
    cubic-bezier(0.22, 1, 0.36, 1)
  2. 禁止从0开始缩放 - 最小缩放比例为scale(0.93)
  3. 禁止为键盘操作添加动画 - CMD+K、搜索、标签切换需即时响应
  4. 禁止为主题切换添加动画 - 主题切换需即时完成
  5. 禁止为滚动位置添加动画 - 让用户控制滚动
  6. 功能型UI动画时长不得超过300ms - <100ms为即时响应，100-300ms为延迟响应
  7. 严肃UI中禁止使用弹跳动画 - 会降低用户信任
  8. 仅对transform和opacity属性添加动画 - 仅使用GPU加速属性。绝对禁止
    transition: all
  9. 始终尊重prefers-reduced-motion设置

Accessibility (10-21)

无障碍访问（10-21）

  1. Contrast >= 4.5:1 for normal text
  2. Contrast >= 3:1 for large text (18px+ bold or 24px+)
  3. All interactive elements keyboard focusable
  4. Focus indicators visible (box-shadow, not outline removal)
  5. Color not sole indicator of state (pair with icon + text)
  6. Touch targets >= 44x44px
  7. Semantic HTML (
    <button>
    not 
    <div onclick>
    )
  8. Escape closes modals/dropdowns
  9. Images have alt text
  10. Icon-only buttons have aria-label
  11. Form inputs have associated labels
  12. Error messages associated with inputs via aria-describedby
  1. 普通文本对比度≥4.5:1
  2. 大文本（18px+粗体或24px+）对比度≥3:1
  3. 所有交互元素支持键盘聚焦
  4. 焦点指示器可见（使用box-shadow，而非移除outline）
  5. 不能仅通过颜色区分状态（需搭配图标 + 文字）
  6. 触摸目标尺寸≥44x44px
  7. 使用语义化HTML（
    <button>
    而非
    <div onclick>
    ）
  8. 按Esc键可关闭模态框/下拉菜单
  9. 图片添加alt文本
  10. 纯图标按钮添加aria-label
  11. 表单输入框关联对应的标签
  12. 错误信息通过aria-describedby关联到输入框

Input & Interaction (22-26)

输入与交互（22-26）

  1. Input font-size >= 16px (prevents iOS zoom)
  2. Hover states only on hover-capable devices (
    @media (hover: hover)
    )
  3. Disabled buttons have no tooltips, use cursor: not-allowed
  4. No auto-focus on touch devices
  5. Customize iOS tap highlight (
    -webkit-tap-highlight-color: transparent
    )
  1. 输入框字体大小≥16px（防止iOS自动缩放）
  2. 仅在支持悬停的设备上添加悬停状态（
    @media (hover: hover)
    ）
  3. 禁用按钮不显示工具提示，使用cursor: not-allowed
  4. 触摸设备上禁止自动聚焦
  5. 自定义iOS点击高亮效果（
    -webkit-tap-highlight-color: transparent
    ）

Typography (27-30)

排版（27-30）

  1. Apply font smoothing (antialiased)
  2. Tabular numbers for data (
    font-variant-numeric: tabular-nums
    )
  3. Max 3-4 font sizes per view
  4. Line height 1.4-1.6 for body, 1.1-1.25 for headings
  1. 启用字体平滑（antialiased）
  2. 数据使用等宽数字（
    font-variant-numeric: tabular-nums
    ）
  3. 每个视图最多使用3-4种字体大小
  4. 正文字行高1.4-1.6，标题行高1.1-1.25

Visual Design (31-37)

视觉设计（31-37）

  1. Max 2 border-radius values
  2. Consistent icon style (all outlined or all filled, never mixed)
  3. Clear button hierarchy (1 primary per view)
  4. Shadows follow consistent light source (top-down)
  5. Consistent spacing scale (4px base)
  6. Limited color palette (1 brand + neutrals + semantic)
  7. z-index scale from tokens
  1. 最多使用2种边框圆角值
  2. 图标风格统一（全轮廓或全填充，禁止混合使用）
  3. 按钮层级清晰（每个视图仅1个主按钮）
  4. 阴影遵循统一光源方向（从上到下）
  5. 间距比例一致（以4px为基础）
  6. 调色板受限（1个品牌色 + 中性色 + 语义化颜色）
  7. z-index使用令牌定义的层级

State Handling (38-42)

状态处理（38-42）

  1. Loading states exist (skeleton loaders)
  2. Empty states guide users forward (CTA, not blank)
  3. Error states show recovery path (retry action)
  4. No dead-end screens
  5. Destructive actions require confirmation
  1. 提供加载状态（骨架屏）
  2. 空状态引导用户操作（显示CTA，而非空白）
  3. 错误状态提供恢复路径（重试操作）
  4. 无死胡同界面
  5. 破坏性操作需确认

Design System (43-48)

设计系统（43-48）

  1. Zero hardcoded values (all from CSS variables)
  2. One token file (single source of truth)
  3. Modular CSS (each component owns its styles)
  4. No inline styles for repeated patterns (3+ = make a class)
  5. Font discipline (display for headings, body for text, mono for code)
  6. Semantic class names (describe purpose, not appearance)
  1. 无硬编码值（全部使用CSS变量）
  2. 单一令牌文件（唯一数据源）
  3. 模块化CSS（每个组件独立管理样式）
  4. 重复模式不使用内联样式（出现3次及以上需创建类）
  5. 字体规范（标题用显示字体，正文用正文字体，代码用等宽字体）
  6. 语义化类名（描述用途，而非外观）

Mode: polish

polish模式

Production polish pass. No proposals - direct fixes.
生产环境打磨优化。不生成方案 - 直接修复问题。

Quick Checklist

快速检查清单

  • No overlapping/cut-off elements
  • Consistent spacing from design tokens
  • Readable contrast (4.5:1+)
  • Empty, loading, error states designed
  • Hover/focus/active states consistent
  • Mobile (375px) no horizontal scroll
  • Desktop (1920px) not stretched
  • Typography hierarchy clear
  • All buttons have feedback states
  • 无重叠/被截断的元素
  • 间距符合设计令牌规范
  • 文本对比度达标（4.5:1+）
  • 设计了空、加载、错误状态
  • 悬停/焦点/激活状态统一
  • 移动端（375px）无横向滚动
  • 桌面端（1920px）内容不拉伸
  • 排版层级清晰
  • 所有按钮都有反馈状态

Output

输出

markdown
undefined
markdown
undefined

Polish Report

打磨优化报告

Issues Found: X | Fixed: X | Remaining: [list] Ready for /frontend-design qa: Yes/No

---
发现问题：X | 已修复：X | 剩余问题：[列表] 是否可进行/frontend-design qa：是/否

---

Mode: qa

qa模式

Quality gate before shipping.
上线前的质量关卡检查。

Automated Checks

自动化检查

bash
undefined
bash
undefined

Emoji detection (should find 0)

表情符号检测（应返回0）

grep -rE "[\x{1F300}-\x{1F9FF}]" src/
grep -rE "[\x{1F300}-\x{1F9FF}]" src/

transition: all (should be 0)

transition: all检测（应返回0）

grep -r "transition: all" src/ | wc -l
grep -r "transition: all" src/ | wc -l

!important overrides (minimal)

!important覆盖检测（应尽量少）

grep -r "!important" src/ --include="*.css" | wc -l
grep -r "!important" src/ --include="*.css" | wc -l

Hardcoded colors outside tokens

令牌外的硬编码颜色检测

grep -rn "#[0-9a-fA-F]{3,8}" src/ --include="*.css" | grep -v tokens
grep -rn "#[0-9a-fA-F]{3,8}" src/ --include="*.css" | grep -v tokens

Inline styles count

内联样式数量检测

grep -rn "style={{" src/ --include="*.tsx" | wc -l
undefined
grep -rn "style={{" src/ --include="*.tsx" | wc -l
undefined

Manual Review

人工评审

  • Zero emojis in production UI
  • No childish animations (bounce, wiggle, shake, pulse)
  • No fake social proof
  • No 3-column icon+title+description grid
  • No decorative SVG blobs
  • No gradient text (except 1 hero element max)
  • All colors from design tokens
  • All spacing from design tokens
  • 生产环境UI中无表情符号
  • 无幼稚动画（弹跳、摇摆、震动、脉冲）
  • 无虚假社交证明
  • 无3列图标+标题+描述网格
  • 无装饰性SVG blob
  • 无渐变文字（最多1个Hero元素除外）
  • 所有颜色来自设计令牌
  • 所有间距来自设计令牌

Senior Designer Test

资深设计师测试

  1. Would this look professional in 5 years?
  2. Is every element necessary?
  3. Could you explain every design decision?
  4. Does it look like a human designer made deliberate choices?
  1. 5年后该设计是否仍显专业？
  2. 每个元素是否都是必要的？
  3. 能否解释每个设计决策？
  4. 看起来是否像人类设计师经过深思熟虑的作品？

Output

输出

DESIGN QA REPORT
================
Automated: PASS/FAIL
Manual: PASS/FAIL
Senior Test: PASS/FAIL
Status: APPROVED / NEEDS REVISION
设计QA报告
================
自动化检查：通过/不通过
人工评审：通过/不通过
资深设计师测试：通过/不通过
状态：已批准 / 需要修订

Mode: flow

flow模式

UX architecture only. No visuals, no code.
仅生成UX架构。无视觉设计，无代码。

Core Questions

核心问题

  1. Entry: Where does user start?
  2. Exit: How do they know they're done?
  3. Screens: List essential screens (3-7 max)
  4. Happy path: Entry > A > B > Exit
  5. Decisions: What must user decide? (keep <5)
  6. States: Empty, loading, error for each screen
  1. 入口：用户从何处开始？
  2. 出口：用户如何判断任务完成？
  3. 界面：列出核心界面（最多3-7个）
  4. 理想流程：入口 > A > B > 出口
  5. 决策点：用户必须做出哪些决策？（控制在5个以内）
  6. 状态：每个界面的空、加载、错误状态

Kill-Switch Test

终止测试

  • Does this flow require explanation? -> Simplify
  • Could first-time user get stuck? -> Add guidance
  • Are there screens that exist "just in case"? -> Remove
  • 该流程是否需要额外解释？→ 简化设计
  • 首次使用的用户是否可能卡住？→ 添加引导
  • 是否存在"以防万一"的界面？→ 删除该界面

Screenshot Protocol

截图规范

For ANY design change:
  1. Before: 
    mcp__puppeteer__puppeteer_screenshot({ name: "before-YYYY-MM-DD", width: 1280, height: 800 })
  2. Make changes
  3. After: 
    mcp__puppeteer__puppeteer_screenshot({ name: "after-YYYY-MM-DD", width: 1280, height: 800 })
任何设计变更都需遵循：
  1. 变更前：
    mcp__puppeteer__puppeteer_screenshot({ name: "before-YYYY-MM-DD", width: 1280, height: 800 })
  2. 执行变更
  3. 变更后：
    mcp__puppeteer__puppeteer_screenshot({ name: "after-YYYY-MM-DD", width: 1280, height: 800 })

Design System Reference (New Projects)

新项目设计系统参考

Dark Mode (Crypto/Trading)

深色模式（加密/交易类）

css
--bg-base: #09090b;
--bg-surface: #18181b;
--bg-elevated: #27272a;
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--accent: [pick ONE color];
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--border: rgba(255, 255, 255, 0.06);

/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;

/* Spacing: 4px base */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px; --space-12: 48px;
css
--bg-base: #09090b;
--bg-surface: #18181b;
--bg-elevated: #27272a;
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--accent: [选择一种颜色];
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
--border: rgba(255, 255, 255, 0.06);

/* 动效 */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;

/* 间距：以4px为基础 */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px; --space-12: 48px;

Knowledge Base (Optional)

知识库（可选）

If the user has a design knowledge base (e.g. 
~/System/guides/DESIGN_MASTERY.md
or similar), read targeted sections before generating:
PhaseTopics to Load
Proposals (new/revamp)Typography, Color, Spacing & Layout, Motion & Animation, Personality Factor
Polish modeShadows & Depth, Motion & Animation, Dark Mode, Quick Reference
QA modeQuick Reference (condensed rules only)
Don't read an entire guide. Load only the sections relevant to the current mode. The skill works without external guides but produces better results with them.
如果用户有设计知识库（例如
~/System/guides/DESIGN_MASTERY.md
或类似文件），生成前需读取相关章节：
阶段需加载的主题
方案生成（new/revamp）排版、色彩、间距与布局、动效与动画、个性因素
polish模式阴影与深度、动效与动画、深色模式、快速参考
qa模式快速参考（仅浓缩规则）
无需读取完整指南。仅加载与当前模式相关的章节。即使没有外部指南，该技能也能正常工作，但结合指南可产出更优结果。

Personal Style (style.config.md)

个人风格（style.config.md）

Before generating proposals, check for a style config:
  1. Project-level: 
    ai/style.config.md
    (takes priority)
  2. User-level: 
    ~/.claude/style.config.md
If found, apply:
  • Brand words set the tone for all proposals
  • Color preferences override defaults (respect anti-colors)
  • Motion philosophy guides animation choices
  • Signature elements must appear in proposals
  • Anti-patterns are banned on top of 
    banned-defaults.md
Style config is a preference layer, not hard constraints. If a DNA code conflicts with style preferences, DNA wins (structural variety matters more).
生成方案前，检查是否存在风格配置：
  1. 项目级：
    ai/style.config.md
    （优先级更高）
  2. 用户级：
    ~/.claude/style.config.md
如果存在，需应用以下配置：
  • 品牌词汇：为所有方案设定基调
  • 色彩偏好：覆盖默认设置（需注意避免冲突色）
  • 动效理念：指导动画选择
  • 标志性元素：必须出现在方案中
  • 反模式：在
    banned-defaults.md
    基础上额外禁止的模式
风格配置是偏好层，而非硬性约束。如果DNA编码与风格偏好冲突，以DNA编码为准（结构多样性更重要）。

Relationship to /design Orchestrator

与/design编排器的关系

This skill is Phase 2 (Creative) and Phase 5 (QA) of the 
/design
workflow.
  • When called via 
    /design
    , the orchestrator handles knowledge loading and style config
  • When called standalone, this skill loads them itself
  • Polish mode overlaps with 
    /ui-revamp
    but is lighter: quick pass vs full 4-phase audit
该技能是
/design
工作流的第2阶段（创意设计）和第5阶段（QA）。
  • 通过
    /design
    调用时，编排器负责加载知识库和风格配置
  • 独立调用时，该技能自行加载这些内容
  • polish模式与
    /ui-revamp
    有重叠，但更轻量化：快速优化 vs 完整的4阶段审计

Reference Files

参考文件

  • reference/dna-system.md
    - 5-gene DNA for structural variety
  • reference/banned-defaults.md
    - Forbidden AI patterns
  • reference/inspirations.md
    - Curated design reference library
  • reference/catalogue.html
    - Proposal catalogue template
  • reference/dna-system.md
    - 5基因DNA系统，保障结构多样性
  • reference/banned-defaults.md
    - 禁止使用的AI模式
  • reference/inspirations.md
    - 精选设计参考库
  • reference/catalogue.html
    - 方案目录模板

Proposal Quality Checklist

方案质量检查清单

Each proposal MUST:
  • Have unique DNA (max 2 shared genes with others)
  • Cite at least one inspiration (from different categories)
  • Avoid ALL banned defaults
  • Be self-contained (no external dependencies except fonts)
  • Include DNA badge in top-right corner
  • Include inspiration citation in footer
  • Be responsive (mobile-first)
  • Include full UX architecture in HTML comments
  • Handle all states (loading, empty, error, success)
  • Pass all 48 hard rules
  • Look genuinely DIFFERENT from other proposals
每个方案必须满足：
  • 具备唯一DNA编码（与其他方案共享基因不超过2个）
  • 至少引用一个设计灵感（来自不同类别）
  • 避免所有禁止的默认模式
  • 独立完整（除字体外无外部依赖）
  • 右上角显示DNA标识
  • 页脚标注设计灵感来源
  • 响应式设计（移动端优先）
  • HTML注释中记录完整UX架构
  • 处理所有状态（加载、空、错误、成功）
  • 符合所有48条硬性规则
  • 与其他方案风格明显不同

Wild Mode (Optional)

Wild模式（可选）

Add 
--wild [theme]
to enable convention-breaking designs:
ThemeRules
90s-web
Tiled backgrounds, marquee, hit counters, garish colors
y2k
Chrome effects, bubble text, optimism gradients
rave
Acid colors, distorted text, neon on black
brutalist
Monospace, harsh borders, raw HTML
afrofuturism
Ankara patterns, gold accents, cosmic imagery
newspaper
Column layouts, drop caps, serif, B&W + accent
vaporwave
Pastel gradients, glitch, Japanese text
When wild mode active: IGNORE usability conventions, PRIORITIZE visual impact, BREAK grid systems, EMBRACE the theme fully.
"The details are not the details. They make the design." -- Charles Eames
添加
--wild [theme]
启用打破常规的设计：
主题规则
90s-web
tiled背景、marquee跑马灯、点击计数器、浓艳色彩
y2k
chrome效果、气泡文字、乐观主义渐变
rave
迷幻色彩、扭曲文字、黑底霓虹
brutalist
等宽字体、粗犷边框、原生HTML风格
afrofuturism
Ankara图案、金色装饰、宇宙意象
newspaper
栏式布局、首字下沉、衬线字体、黑白+强调色
vaporwave
马卡龙渐变、故障艺术、日文文字
启用Wild模式后：忽略可用性常规，优先视觉冲击力，打破网格系统，完全拥抱主题风格。
"细节不是细节，它们构成了设计。" -- 查尔斯·伊姆斯