需要生成高保真 HTML 设计/原型/演示并做浏览器验证时…

在 AI 编码代理中制作落地页、幻灯片、交互原型、UI mockup、动画和品牌风格克隆，并用 Playwright 截图/控制台检查与导出。

适用场景

解决思路

1. 克隆技能到 Claude Code 技能目录：`git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design`。
2. 或作为子模块加入现有技能集合：`git submodule add https://github.com/ZeroZ-lab/cc-design.git skills/cc-design`。
3. 安装导出脚本依赖：`cd ~/.claude/skills/cc-design/scripts && npm install && cd -`。
4. 安装 Playwright Chromium：`npx playwright install chromium`。
5. 按需加载 `references/`：品牌风格克隆加载 `references/getdesign-loader.md`；需要 Playwright MCP 或宿主工具映射加载 `references/platform-tools.md`；复杂多组件 JSX 作用域问题加载 `references/react-babel-setup.md`；选择或适配模板加载 `references/starter-components.md`；添加页内设计控件加载 `references/tweaks-system.md`。
6. 工作流 Understand：写代码前先澄清意图、受众、约束和已有品牌上下文。
7. 工作流 Explore：读取仓库中已有设计 token、组件库或产品代码；当提到品牌名时从 `getdesign.md` 加载品牌系统。
8. 工作流 Plan：写一份简短 todo 列表，包含组件、布局决策和变化轴。
9. 工作流 Build：产出 HTML + 内联 React/Babel 组件，使用固定 CDN 版本。
10. 工作流 Verify：用 Playwright 截图并检查浏览器 console 错误。
11. 工作流 Deliver：写入最终文件，提供 PPTX、PDF、单文件 HTML 导出选项。
12. 上下文优先设计：只要存在品牌系统、组件库或产品代码，就不要从头设计；先扫描 repo 并加载相关上下文，再创建新视觉方向。
13. 渐进披露：保持主 `SKILL.md` 简洁，技术参考放在 `references/` 中按需加载，以最小化上下文窗口占用。
14. 始终生成至少 3 个设计方向，变化轴包括布局、视觉强度、交互模型或动效。
15. 输出格式支持交互原型、幻灯片、落地页、UI mockup、动画动效研究、设计探索。
16. 品牌风格克隆支持通过 `getdesign.md` 使用 68+ 品牌，如 Stripe、Vercel、Notion、Linear、Apple、Tesla、Figma、GitHub、Airbnb 等。
17. 自动发现并复用项目中已有 tokens、字体排印、间距和颜色模式。
18. 原型使用 React + Babel 内联 JSX，固定 CDN 版本并管理组件作用域。
19. Tweaks 系统提供自包含页内设计控件，带实时预览和 `localStorage` 持久化。
20. 每一步构建后用 Playwright 截图并检查 console 错误。
21. 导出：PPTX 用 `gen_pptx.js`，PDF 用 `open_for_print.js`，单文件用 `super_inline_html.js`。
22. React+Babel 设置使用固定 CDN 版本：`react@18.2.0`、`react-dom@18.2.0`、`@babel/standalone@7.23.5` 和 `https://cdn.tailwindcss.com`。
23. HTML 头部写 `<meta charset="UTF-8" />`、viewport、title，并按顺序加载 React、ReactDOM、Babel、Tailwind 的 CDN script。
24. 包含 `<div id="root"></div>`，用 `ReactDOM.createRoot(document.getElementById('root')).render(<App />);` 渲染。
25. 含 JSX 的 script 标签必须使用 `type="text/babel"`。
26. 在 script 块顶部从 `React` 解构 hooks（如 `const { useState, useEffect, useRef } = React;`），不要内联写 `React.useState`。
27. 除非明确拆分文件，所有组件放在单个 script 块中。
28. 不使用 ES module `import` 语法；CDN UMD 构建只暴露全局变量。
29. 品牌克隆：在提示中提及品牌名以触发从 `getdesign.md` 自动加载其设计系统。
30. 代理获取品牌设计 tokens（颜色、字体排印、间距、圆角、阴影、动效）。
31. 将品牌 tokens 应用为 `:root` 上的 CSS custom properties。
32. 在组件树中一致引用这些变量（如 `var(--token-name)`），不要硬编码。
33. HTML→PPTX：运行 `node ~/.claude/skills/cc-design/scripts/gen_pptx.js --input ./output/deck.html --output ./output/deck.pptx`。
34. HTML→PDF：运行 `node ~/.claude/skills/cc-design/scripts/open_for_print.js --input ./output/prototype.html --output ./output/prototype.pdf`。
35. HTML→单文件内联：运行 `node ~/.claude/skills/cc-design/scripts/super_inline_html.js --input ./output/prototype.html --output ./output/prototype.standalone.html`，将所有链接的 CSS、JS、图片嵌入为 base64 data URI。
36. Playwright 验证：启动 `chromium`，新建 page，监听 `console` 中 `error` 消息并收集。
37. 访问 `file://${process.cwd()}/output/prototype.html`，等待 `networkidle`。
38. 截图到 `output/preview.png`，`fullPage: true`。
39. 如果收集到 console errors，打印并 `process.exit(1)`；否则输出无错误信息并关闭浏览器。
40. 手动运行验证：`node verify.js`。
41. 若 Playwright 截图为空，在截图前加 `await page.waitForLoadState('networkidle')`；动画内容再加 `await page.waitForTimeout(500)` 让过渡稳定。
42. Tweaks 系统：在任意 HTML 文件底部加入 `TweaksPanel` 组件。
43. Tweaks 面板 fixed 在右下角，有开关按钮，展开后显示控件列表，字段支持 `tweaks` 数组和 `onChange` 回调。
44. 在原型中用 `useState` 初始化 tweaks：从 `localStorage.getItem('cc-tweaks')` 解析已保存值，并为 `borderRadius`、`fontSize`、`spacing` 等提供默认值。
45. 实现 `handleTweak(key, value)`：把值转为 Number，更新 state，并 `localStorage.setItem('cc-tweaks', JSON.stringify(next))` 持久化。
46. Starter templates：复制 `deck_stage.js` 到 `./src/deck.js` 以搭建幻灯片舞台。
47. 复制 `design_canvas.jsx` 到 `./src/canvas.jsx` 以搭建并排 3 方向选项网格。
48. 复制 `ios_frame.jsx` 到 `./src/ios_frame.jsx` 以使用 iPhone 设备框。
49. 复制 `macos_window.jsx` 到 `./src/macos_window.jsx` 以使用 macOS 窗口 chrome。
50. 复制 `animations.jsx` 到 `./src/animations.jsx` 以使用时间线动画引擎。
51. Landing page 3 方向：让代理产出单个 HTML，其中 `DesignCanvas` 网格并排显示三种方向，并为每种方向提供全页版本。
52. Pitch deck：让代理加载两个品牌系统、合并 tokens，并用 `deck_stage.js` 搭建带幻灯片导航器的 10 页种子轮 pitch deck。
53. Mobile prototype：复制 `ios_frame.jsx`，用 `useState` 构建 4 屏 onboarding 导航并支持滑动前进，在 iPhone frame 中显示，并用 Playwright 在 390×844 viewport 验证。
54. Animation study：用 `animations.jsx` 作为基础时间线引擎，为卡片添加入场 fade-up、hover lift、click ripple，并加 tweaks 面板控制 slow/medium/fast 时长变化。
55. Babel/React 不渲染时：确认 script 标签有 `type="text/babel"`；检查浏览器 console 或 Playwright 错误日志中的 `Uncaught ReferenceError`，通常是 hook 写成 `React.useState` 而没有解构；确保 CDN scripts 在 Babel script 标签之前加载。
56. PPTX 导出缺样式时：先运行 `super_inline_html.js` 生成完全自包含 HTML，再传给 `gen_pptx.js`。
57. Brand tokens 未应用时：确认 CSS custom properties 在 `:root` 上而不是限定在组件类；确认组件内联样式引用 `var(--token-name)` 而不是硬编码值。
58. `npm install` 在 `scripts/` 失败时：需要 Node.js ≥ 18，用 `node --version` 检查；如果 `playwright` 安装挂起，运行 `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install`，再用 `npx playwright install chromium` 单独安装 Chromium。

适用边界 · 注意事项

• 未安装 cc-design 技能、Playwright 或 Node.js ≥ 18 时，无法执行其导出与视觉验证流程。
• 不想依赖 getdesign.md 或外部品牌设计系统时，品牌克隆能力不可用。
• 只需要传统静态 HTML/CSS、无需 React/Babel、视觉验证或导出时，使用此重型工作流不划算。