Back to Details

cc-design-html-prototyping

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

cc-design HTML Prototyping

cc-design HTML原型制作

Skill by ara.so — Design Skills collection.
High-fidelity HTML design and prototyping system for Claude Code and Codex. Creates landing pages, slide decks, interactive prototypes, explainers, animations, and design systems with structured design thinking, quality guardrails, and automatic verification.
由ara.so开发的Skill — 设计技能合集。
面向Claude Code与Codex的高保真HTML设计和原型制作系统。可创建着陆页、幻灯片、交互式原型、演示动画及设计系统，全程遵循结构化设计思维、质量管控规则并自动验证。

Installation

安装

Claude Code

Claude Code

bash
/plugin marketplace add ZeroZ-lab/cc-design
/plugin install cc-design@cc-design
/reload-plugins
Activate with 
/cc-design:design
command or 
/design
shorthand.
bash
/plugin marketplace add ZeroZ-lab/cc-design
/plugin install cc-design@cc-design
/reload-plugins
使用
/cc-design:design
命令或简写
/design
激活。

Codex

Codex

bash
/plugin marketplace add ZeroZ-lab/cc-design
/plugin install cc-design@cc-design
/reload-plugins
Reference with 
$cc-design
in prompts.
bash
/plugin marketplace add ZeroZ-lab/cc-design
/plugin install cc-design@cc-design
/reload-plugins
在提示词中通过
$cc-design
调用。

Optional Dependencies

可选依赖

bash
undefined
bash
undefined

For screenshot verification and export

用于截图验证与导出

npx playwright install chromium
npx playwright install chromium

For video/audio export

用于视频/音频导出

macOS

macOS

brew install ffmpeg
brew install ffmpeg

Ubuntu/Debian

Ubuntu/Debian

sudo apt install ffmpeg
sudo apt install ffmpeg

Windows

Windows

choco install ffmpeg
undefined
choco install ffmpeg
undefined

Core Workflow

核心工作流

The 8-stage workflow guarantees quality:
Understand → Route → Plan → Approve → Build → Verify → Deliver
Key behavioral guarantees:
  • Never builds without approved plan
  • Never delivers without screenshot verification
  • Blocks AI slop patterns (banned gradients, emoji spam)
  • Follow-ups skip full discovery
8阶段工作流保障设计质量：
需求理解 → 任务分流 → 方案规划 → 方案审批 → 原型构建 → 验证测试 → 交付成果
关键行为保障：
  • 未获批准的方案绝不启动构建
  • 未通过截图验证绝不交付
  • 拦截AI生成的劣质模式（禁用渐变、表情滥用等）
  • 后续任务可跳过完整需求调研环节

Output Types

输出类型

Landing Pages

着陆页

"Design a SaaS landing page with Stripe's aesthetic"
"Create a product page mixing Vercel minimalism with Linear purple accents"
"设计具有Stripe风格的SaaS着陆页"
"创建融合Vercel极简风与Linear紫色元素的产品页"

Slide Decks

幻灯片

"Create a 10-slide pitch deck for Q3 board meeting"
"Make a presentation deck with Pentagram style"
"Export deck as editable PPTX"
"为Q3董事会会议创建10页演示文稿"
"制作Pentagram风格的演示幻灯片"
"将幻灯片导出为可编辑PPTX格式"

Interactive Prototypes

交互式原型

"Build an interactive prototype of the checkout flow"
"Notion-style kanban board with iOS device frame"
"Create a prototype with macOS window chrome"
"构建结账流程的交互式原型"
"带iOS设备边框的Notion风格看板"
"创建带macOS窗口框架的原型"

Interactive Explainers

交互式演示动画

"Create a flow explainer showing our RAG pipeline"
"Make a comparison explainer for React vs Vue"
"Build a decision tree for tech stack selection"
"创建展示我们RAG流程的演示动画"
"制作React与Vue的对比演示动画"
"构建技术栈选择决策树"

Animations

动画效果

"Animate this logo reveal with Pentagram style"
"Create a motion study for the hero section"
"为这个logo制作Pentagram风格的揭幕动画"
"为首页英雄区制作动态效果"

Design Philosophy

设计理念

Invoke specific schools for direction:
"Use Pentagram style for this infographic"
"Apply Experimental Jetset minimalism"
"Mix Takram restraint with Locomotive motion"
20 philosophy schools across 5 traditions:
  • Information Architects (Pentagram, Wolff Olins, etc.)
  • Motion Poets (Locomotive, Active Theory, etc.)
  • Minimalists (Experimental Jetset, Base Design, etc.)
  • Experimental Vanguard (Studio Dumbar, etc.)
  • Eastern Philosophy (Kenya Hara, Nendo, etc.)
Full reference: 
references/design-styles.md
可指定特定设计流派获取方向：
"为这个信息图使用Pentagram风格"
"应用Experimental Jetset极简主义"
"融合Takram克制风格与Locomotive动态效果"
涵盖5大传统的20种设计流派：
  • 信息架构师（Pentagram、Wolff Olins等）
  • 动态创意师（Locomotive、Active Theory等）
  • 极简主义者（Experimental Jetset、Base Design等）
  • 实验先锋派（Studio Dumbar等）
  • 东方设计理念（原研哉、Nendo等）
完整参考：
references/design-styles.md

Brand Style Cloning

品牌风格克隆

Load design systems from 68+ brands:
"Create pricing page with Stripe's aesthetic"
"Notion-style interface"
"Mix Vercel and Linear styles"
Supported brands include: Stripe, Vercel, Linear, Notion, Apple, Tesla, Spotify, Airbnb, etc.
Full catalog: 
references/brand-library.md
可加载68+品牌的设计系统：
"创建Stripe风格的定价页"
"Notion风格界面"
"融合Vercel与Linear的设计风格"
支持的品牌包括：Stripe、Vercel、Linear、Notion、Apple、Tesla、Spotify、Airbnb等。
完整目录：
references/brand-library.md

Code Patterns

代码模式

Design Framework (8 Layers)

设计框架（8层结构）

Every design follows this structure:
javascript
// Layer 1: Goal (outcomes, constraints, target)
const goal = {
  outcome: "Convert visitors to trial signups",
  constraints: ["Mobile-first", "< 3s load"],
  target: "B2B SaaS founders"
};

// Layer 2: Facts (truth, not assumptions)
const facts = {
  brand: "Existing logo, no guidelines",
  content: "5 feature sections + pricing",
  technical: "Static HTML, no backend"
};

// Layer 3: Assumptions (testable hypotheses)
const assumptions = {
  users: "Prefer minimalist design",
  behavior: "Will scroll 3 viewports max",
  context: "Desktop research, mobile signup"
};

// Layers 4-8: Strategy, Structure, Skeleton, Surface, Validation
所有设计均遵循以下结构：
javascript
// 第1层：目标（成果、约束、受众）
const goal = {
  outcome: "将访客转化为试用用户",
  constraints: ["移动端优先", "加载时间<3秒"],
  target: "B2B SaaS创始人"
};

// 第2层：事实（真实信息，非假设）
const facts = {
  brand: "已有logo，无设计规范",
  content: "5个功能模块 + 定价",
  technical: "静态HTML，无后端"
};

// 第3层：假设（可验证的假设）
const assumptions = {
  users: "偏好极简设计",
  behavior: "最多滚动3个视口",
  context: "桌面端调研，移动端注册"
};

// 第4-8层：策略、结构、框架、视觉层、验证

Quality Guardrails

质量管控规则

Built-in anti-slop rules:
javascript
// BANNED patterns
const slopPatterns = {
  gradients: [
    "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    "linear-gradient(to right, #ff6b6b, #4ecdc4)"
  ],
  layouts: [
    "50/50 hero split with form",
    "Centered hero with 3-column features"
  ],
  text: [
    "Empower your", "Unlock the power",
    "Revolutionary", "Game-changing"
  ]
};

// REQUIRED quality checks
const qualityRules = {
  typography: "System font stack or single web font only",
  spacing: "8px scale (8, 16, 24, 32, 48, 64, 96)",
  verification: "Screenshot required before delivery",
  contrast: "WCAG AA minimum (4.5:1 text, 3:1 UI)"
};
内置反劣质设计规则：
javascript
// 禁用模式
const slopPatterns = {
  gradients: [
    "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    "linear-gradient(to right, #ff6b6b, #4ecdc4)"
  ],
  layouts: [
    "50/50分栏英雄区带表单",
    "居中英雄区加三列功能模块"
  ],
  text: [
    "赋能你的", "释放力量",
    "革命性", "颠覆性"
  ]
};

// 必选质量检查
const qualityRules = {
  typography: "仅使用系统字体栈或单一网络字体",
  spacing: "8px刻度系统（8, 16, 24, 32, 48, 64, 96）",
  verification: "交付前必须截图验证",
  contrast: "最低符合WCAG AA标准（文本4.5:1，UI元素3:1）"
};

Typography System

排版系统

css
/* System font stack pattern */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", 
               Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, Consolas, monospace;
}

/* Type scale (major third: 1.25) */
:root {
  --text-xs: 0.64rem;   /* 10px */
  --text-sm: 0.8rem;    /* 13px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.563rem;  /* 25px */
  --text-2xl: 1.953rem; /* 31px */
  --text-3xl: 2.441rem; /* 39px */
}
css
/* 系统字体栈模式 */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", 
               Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, Consolas, monospace;
}

/* 字体刻度（大三度：1.25） */
:root {
  --text-xs: 0.64rem;   /* 10px */
  --text-sm: 0.8rem;    /* 13px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.563rem;  /* 25px */
  --text-2xl: 1.953rem; /* 31px */
  --text-3xl: 2.441rem; /* 39px */
}

Spacing Scale

间距刻度

css
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */
}
css
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */
}

Animation System

动画系统

Stage+Sprite timeline engine:
javascript
// Stage: timeline controller
const stage = {
  duration: 2000,
  sprites: ['logo', 'title', 'cta'],
  timeline: [
    { at: 0, sprite: 'logo', action: 'fadeIn' },
    { at: 500, sprite: 'title', action: 'slideUp' },
    { at: 1200, sprite: 'cta', action: 'scale' }
  ]
};

// Sprite: animated element
const sprite = {
  id: 'logo',
  el: document.querySelector('.logo'),
  keyframes: [
    { opacity: 0, transform: 'scale(0.8)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  timing: {
    duration: 600,
    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' // easeOutBack
  }
};
Stage+Sprite时间轴引擎：
javascript
// Stage：时间轴控制器
const stage = {
  duration: 2000,
  sprites: ['logo', 'title', 'cta'],
  timeline: [
    { at: 0, sprite: 'logo', action: 'fadeIn' },
    { at: 500, sprite: 'title', action: 'slideUp' },
    { at: 1200, sprite: 'cta', action: 'scale' }
  ]
};

// Sprite：动画元素
const sprite = {
  id: 'logo',
  el: document.querySelector('.logo'),
  keyframes: [
    { opacity: 0, transform: 'scale(0.8)' },
    { opacity: 1, transform: 'scale(1)' }
  ],
  timing: {
    duration: 600,
    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' // easeOutBack
  }
};

React Prototyping

React原型制作

Inline JSX with Babel transpilation:
html
<!DOCTYPE html>
<html>
<head>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  
  <script type="text/babel">
    const { useState } = React;
    
    function KanbanBoard() {
      const [tasks, setTasks] = useState([
        { id: 1, text: 'Design review', column: 'todo' },
        { id: 2, text: 'Build prototype', column: 'doing' }
      ]);
      
      const moveTask = (id, newColumn) => {
        setTasks(tasks.map(t => 
          t.id === id ? { ...t, column: newColumn } : t
        ));
      };
      
      return (
        <div className="board">
          {['todo', 'doing', 'done'].map(col => (
            <Column key={col} name={col} tasks={tasks.filter(t => t.column === col)} onMove={moveTask} />
          ))}
        </div>
      );
    }
    
    ReactDOM.render(<KanbanBoard />, document.getElementById('root'));
  </script>
</body>
</html>
带Babel转译的内嵌JSX：
html
<!DOCTYPE html>
<html>
<head>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  
  <script type="text/babel">
    const { useState } = React;
    
    function KanbanBoard() {
      const [tasks, setTasks] = useState([
        { id: 1, text: '设计评审', column: 'todo' },
        { id: 2, text: '构建原型', column: 'doing' }
      ]);
      
      const moveTask = (id, newColumn) => {
        setTasks(tasks.map(t => 
          t.id === id ? { ...t, column: newColumn } : t
        ));
      };
      
      return (
        <div className="board">
          {['todo', 'doing', 'done'].map(col => (
            <Column key={col} name={col} tasks={tasks.filter(t => t.column === col)} onMove={moveTask} />
          ))}
        </div>
      );
    }
    
    ReactDOM.render(<KanbanBoard />, document.getElementById('root'));
  </script>
</body>
</html>

Device Frames

设备框架

javascript
// iOS frame
const iOSFrame = {
  width: 390,
  height: 844,
  chrome: {
    statusBar: 47,
    homeIndicator: 34,
    notch: true
  }
};

// macOS window frame
const macOSFrame = {
  width: 1280,
  height: 800,
  chrome: {
    titleBar: 40,
    trafficLights: { x: 12, y: 16 },
    shadow: true
  }
};
javascript
// iOS框架
const iOSFrame = {
  width: 390,
  height: 844,
  chrome: {
    statusBar: 47,
    homeIndicator: 34,
    notch: true
  }
};

// macOS窗口框架
const macOSFrame = {
  width: 1280,
  height: 800,
  chrome: {
    titleBar: 40,
    trafficLights: { x: 12, y: 16 },
    shadow: true
  }
};

Export Formats

导出格式

PDF Export

PDF导出

javascript
// Multi-file PDF (one per page)
const pdfExport = {
  format: 'multi',
  files: ['page-1.pdf', 'page-2.pdf'],
  dimensions: { width: 1920, height: 1080 }
};

// Single-file PDF (all pages)
const pdfBundle = {
  format: 'single',
  file: 'deck.pdf',
  pages: 10
};
javascript
// 多文件PDF（每页一个文件）
const pdfExport = {
  format: 'multi',
  files: ['page-1.pdf', 'page-2.pdf'],
  dimensions: { width: 1920, height: 1080 }
};

// 单文件PDF（包含所有页面）
const pdfBundle = {
  format: 'single',
  file: 'deck.pdf',
  pages: 10
};

PPTX Export

PPTX导出

javascript
// Image-based PPTX (fastest)
const pptxImage = {
  format: 'image',
  slides: 10,
  resolution: '1920x1080'
};

// Editable PPTX (structured text)
const pptxEditable = {
  format: 'editable',
  slides: 10,
  preserveFormatting: true
};
javascript
// 基于图片的PPTX（最快）
const pptxImage = {
  format: 'image',
  slides: 10,
  resolution: '1920x1080'
};

// 可编辑PPTX（结构化文本）
const pptxEditable = {
  format: 'editable',
  slides: 10,
  preserveFormatting: true
};

Video Export

视频导出

javascript
// MP4 with dual-track audio
const videoExport = {
  format: 'mp4',
  duration: 30000, // ms
  tracks: {
    sfx: 'effects.mp3',
    bgm: 'background.mp3'
  },
  mixing: {
    sfxVolume: 1.0,
    bgmVolume: 0.3
  }
};
javascript
// 带双轨音频的MP4
const videoExport = {
  format: 'mp4',
  duration: 30000, // ms
  tracks: {
    sfx: 'effects.mp3',
    bgm: 'background.mp3'
  },
  mixing: {
    sfxVolume: 1.0,
    bgmVolume: 0.3
  }
};

Configuration

配置

Plugin Hooks

插件钩子

Lifecycle hooks fire automatically (opt-out with env vars):
bash
undefined
生命周期钩子自动触发（可通过环境变量关闭）：
bash
undefined

Disable individual hooks

禁用单个钩子

export CCDESIGN_HOOK_SESSION_START=off export CCDESIGN_HOOK_PRE_COMPACT=off export CCDESIGN_HOOK_STOP=off

**SessionStart**: Auto update check + design context recovery  
**PreCompact**: Preserves design tokens to `.claude/design-context.json`  
**Stop**: Cleans stale `.playwright-mcp/console-*.log` files (>7 days)

Hook logs: `.claude/hook-log.txt`
export CCDESIGN_HOOK_SESSION_START=off export CCDESIGN_HOOK_PRE_COMPACT=off export CCDESIGN_HOOK_STOP=off

**SessionStart**：自动检查更新 + 恢复设计上下文  
**PreCompact**：将设计令牌保存到`.claude/design-context.json`  
**Stop**：清理过期的`.playwright-mcp/console-*.log`文件（超过7天）

钩子日志：`.claude/hook-log.txt`

Design Context Recovery

设计上下文恢复

Design tokens persist across sessions:
json
{
  "colors": {
    "primary": "#0066FF",
    "surface": "#FFFFFF"
  },
  "fonts": {
    "sans": "Inter, sans-serif"
  },
  "cssVars": {
    "--space-base": "16px",
    "--radius": "8px"
  },
  "timestamp": "2026-05-16T12:00:00Z"
}
设计令牌跨会话持久化：
json
{
  "colors": {
    "primary": "#0066FF",
    "surface": "#FFFFFF"
  },
  "fonts": {
    "sans": "Inter, sans-serif"
  },
  "cssVars": {
    "--space-base": "16px",
    "--radius": "8px"
  },
  "timestamp": "2026-05-16T12:00:00Z"
}

Design Review

设计评审

5-dimension scoring system:
javascript
const reviewDimensions = {
  philosophy: {
    score: 8.5,
    criteria: "Coherent application of stated school",
    feedback: "Strong Pentagram geometric rigor"
  },
  hierarchy: {
    score: 9.0,
    criteria: "Visual priority matches content priority",
    feedback: "Clear focal points, effective contrast"
  },
  craft: {
    score: 7.5,
    criteria: "Typography, spacing, alignment precision",
    feedback: "Minor spacing inconsistency in footer"
  },
  functionality: {
    score: 8.0,
    criteria: "Interaction clarity, mobile responsiveness",
    feedback: "Smooth transitions, good touch targets"
  },
  originality: {
    score: 6.5,
    criteria: "Avoids clichés, brings fresh perspective",
    feedback: "Layout feels familiar, could push boundaries"
  }
};
5维度评分系统：
javascript
const reviewDimensions = {
  philosophy: {
    score: 8.5,
    criteria: "所选设计流派的一致性应用",
    feedback: "Pentagram几何严谨性表现出色"
  },
  hierarchy: {
    score: 9.0,
    criteria: "视觉优先级与内容优先级匹配",
    feedback: "焦点清晰，对比效果有效"
  },
  craft: {
    score: 7.5,
    criteria: "排版、间距、对齐精度",
    feedback: "页脚存在轻微间距不一致"
  },
  functionality: {
    score: 8.0,
    criteria: "交互清晰度、移动端响应性",
    feedback: "过渡流畅，触摸目标尺寸合适"
  },
  originality: {
    score: 6.5,
    criteria: "避免陈词滥调，带来新鲜视角",
    feedback: "布局较为常见，可进一步突破"
  }
};

Common Patterns

通用模式

Progressive Brand Loading

渐进式品牌加载

javascript
// Start minimal, load progressively
const brandLoad = {
  phase1: "Typography + color palette",
  phase2: "Spacing + component patterns",
  phase3: "Motion + interaction details",
  source: "https://getdesign.md/brands/{brand-name}.md"
};
javascript
// 从极简开始，逐步加载
const brandLoad = {
  phase1: "排版 + 调色板",
  phase2: "间距 + 组件模式",
  phase3: "动态效果 + 交互细节",
  source: "https://getdesign.md/brands/{brand-name}.md"
};

Section-by-Section Preview

分节预览

javascript
// Build incrementally with approval gates
const buildPattern = {
  sections: ['hero', 'features', 'pricing', 'footer'],
  flow: [
    { section: 'hero', status: 'preview', action: 'approve/revise' },
    { section: 'features', status: 'waiting', action: null },
    // ... continues after approval
  ]
};
javascript
// 逐步构建并设置审批关卡
const buildPattern = {
  sections: ['hero', 'features', 'pricing', 'footer'],
  flow: [
    { section: 'hero', status: 'preview', action: 'approve/revise' },
    { section: 'features', status: 'waiting', action: null },
    // ... 审批后继续
  ]
};

Verification Protocol

验证协议

javascript
// Three-phase self-check before delivery
const verification = {
  structural: [
    "All links functional",
    "Forms submit correctly",
    "No console errors"
  ],
  visual: [
    "Screenshot matches design intent",
    "Responsive breakpoints work",
    "Animations render smoothly"
  ],
  excellence: [
    "No banned slop patterns",
    "Typography system applied",
    "Spacing scale consistent"
  ]
};
javascript
// 交付前三阶段自检
const verification = {
  structural: [
    "所有链接功能正常",
    "表单提交正确",
    "无控制台错误"
  ],
  visual: [
    "截图与设计意图匹配",
    "响应式断点正常工作",
    "动画渲染流畅"
  ],
  excellence: [
    "无禁用的劣质模式",
    "应用了排版系统",
    "间距刻度一致"
  ]
};

Troubleshooting

故障排查

Playwright Issues

Playwright问题

bash
undefined
bash
// 重新安装浏览器
npx playwright install chromium

// 检查浏览器路径
npx playwright install --dry-run

// 权限错误
sudo npx playwright install chromium

Reinstall browser

FFmpeg未找到

npx playwright install chromium
bash
// 验证安装
ffmpeg -version

// 检查PATH
which ffmpeg  # macOS/Linux
where ffmpeg  # Windows

// 缺失则重新安装
brew reinstall ffmpeg  # macOS

Check browser path

设计上下文未持久化

npx playwright install --dry-run
bash
// 检查钩子状态
cat .claude/hook-log.txt

// 验证上下文文件
cat .claude/design-context.json

// 重新启用PreCompact钩子
export CCDESIGN_HOOK_PRE_COMPACT=on

Permissions error

导出失败

sudo npx playwright install chromium
undefined
javascript
// 检查依赖
const deps = {
  pdf: "需要Playwright",
  pptx: "需要Playwright + node-pptx",
  video: "需要Playwright + ffmpeg"
};

// 验证文件权限
// 输出目录: .claude/exports/
// 必须可写

FFmpeg Not Found

品牌风格未加载

bash
undefined
javascript
// 渐进式加载可能需要2-3轮
// 检查加载清单
const manifest = require('./load-manifest.json');
// 验证品牌是否存在于references/brand-library.md

// 必要时手动加载
"从getdesign.md加载Stripe设计系统"

Verify installation

性能缓慢

ffmpeg -version
javascript
// 缩小范围
const optimization = {
  sections: "先构建2-3个关键模块",
  animations: "简化时间轴，减少动画元素",
  assets: "使用系统字体，限制外部资源"
};

Check PATH

参考文件

which ffmpeg # macOS/Linux where ffmpeg # Windows
references/
目录下的关键文档：
  • workflow.md
    - 8阶段设计流程
  • design-styles.md
    - 20种设计流派
  • brand-library.md
    - 68+品牌系统
  • animation-system.md
    - Stage+Sprite引擎
  • export-formats.md
    - PDF/PPTX/MP4规格
  • quality-rules.md
    - 反劣质设计管控规则

Reinstall if missing

版本

brew reinstall ffmpeg # macOS
undefined
当前版本：v0.5.0
检查更新：会话启动时自动检查（若
CCDESIGN_HOOK_SESSION_START
已启用）

Design Context Not Persisting

—
bash
undefined
—

Check hook status

—
cat .claude/hook-log.txt
—

Verify context file

—
cat .claude/design-context.json
—

Re-enable PreCompact hook

—
export CCDESIGN_HOOK_PRE_COMPACT=on
undefined
—

Export Fails

—
javascript
// Check dependencies
const deps = {
  pdf: "Playwright required",
  pptx: "Playwright + node-pptx",
  video: "Playwright + ffmpeg"
};

// Verify file permissions
// Output dir: .claude/exports/
// Must be writable
—

Brand Style Not Loading

—
javascript
// Progressive load may take 2-3 turns
// Check load manifest
const manifest = require('./load-manifest.json');
// Verify brand exists in references/brand-library.md

// Manual load if needed
"Load the Stripe design system from getdesign.md"
—

Slow Performance

—
javascript
// Reduce scope
const optimization = {
  sections: "Build 2-3 key sections first",
  animations: "Simplify timeline, reduce sprites",
  assets: "Use system fonts, limit external resources"
};
—

Reference Files

—
Key documentation in 
references/
:
  • workflow.md
    - 8-stage design process
  • design-styles.md
    - 20 philosophy schools
  • brand-library.md
    - 68+ brand systems
  • animation-system.md
    - Stage+Sprite engine
  • export-formats.md
    - PDF/PPTX/MP4 specs
  • quality-rules.md
    - Anti-slop guardrails
—

Version

—
Current: v0.5.0
Check for updates: Automatic on session start (if 
CCDESIGN_HOOK_SESSION_START
enabled)
—