Back to Details

cc-design-html-prototyping

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CC Design

CC Design

Skill by ara.so — Daily 2026 Skills collection.
CC Design is a structured design workflow skill for AI coding agents. It enables Claude Code, Codex, and compatible agents to act as expert product designers — producing high-fidelity HTML artifacts including slide decks, interactive prototypes, landing pages, UI mockups, and animated motion studies. It supports brand style cloning from 68+ design systems and uses Playwright for visual verification.
由ara.so开发的Skill —— 属于Daily 2026 Skills合集。
CC Design是一款面向AI编码Agent的结构化设计工作流Skill。它能让Claude Code、Codex及兼容Agent化身专业产品设计师，生成高保真HTML制品，包括幻灯片、交互式原型、着陆页、UI模型、动效研究等。它支持从68+设计系统中克隆品牌风格，并使用Playwright进行视觉验证。

Installation

安装

Clone into the Claude Code skills directory:
bash
git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design
Or as a submodule in an existing skill collection:
bash
git submodule add https://github.com/ZeroZ-lab/cc-design.git skills/cc-design
Install export script dependencies (for PPTX, PDF, and inline HTML export):
bash
cd ~/.claude/skills/cc-design/scripts && npm install && cd -
npx playwright install chromium
克隆到Claude Code技能目录：
bash
git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design
或作为子模块添加到现有技能合集中：
bash
git submodule add https://github.com/ZeroZ-lab/cc-design.git skills/cc-design
安装导出脚本依赖（用于PPTX、PDF和内联HTML导出）：
bash
cd ~/.claude/skills/cc-design/scripts && npm install && cd -
npx playwright install chromium

Project Structure

项目结构

cc-design/
├── SKILL.md                      # Core skill definition (always loaded)
├── EXAMPLES.md                   # Brand cloning and advanced usage examples
├── agents/
│   └── openai.yaml               # Codex-compatible interface config
├── references/
│   ├── getdesign-loader.md       # Brand style loading from getdesign.md
│   ├── platform-tools.md         # Claude Code + Playwright tool reference
│   ├── react-babel-setup.md      # React/Babel pinned versions and scope rules
│   ├── starter-components.md     # Starter component catalog
│   └── tweaks-system.md          # In-page tweak controls
├── templates/
│   ├── deck_stage.js             # Slide presentation stage
│   ├── design_canvas.jsx         # Side-by-side option grid
│   ├── ios_frame.jsx             # iPhone device frame
│   ├── android_frame.jsx         # Android device frame
│   ├── macos_window.jsx          # macOS window chrome
│   ├── browser_window.jsx        # Browser window chrome
│   └── animations.jsx            # Timeline animation engine
└── scripts/
    ├── package.json
    ├── gen_pptx.js               # HTML → PPTX export
    ├── super_inline_html.js      # HTML + assets → single file
    └── open_for_print.js         # HTML → PDF via Playwright
cc-design/
├── SKILL.md                      # 核心技能定义（始终加载）
├── EXAMPLES.md                   # 品牌克隆及高级用法示例
├── agents/
│   └── openai.yaml               # 兼容Codex的接口配置
├── references/
│   ├── getdesign-loader.md       # 从getdesign.md加载品牌风格
│   ├── platform-tools.md         # Claude Code + Playwright工具参考
│   ├── react-babel-setup.md      # React/Babel固定版本及作用域规则
│   ├── starter-components.md     # 初始组件目录
│   └── tweaks-system.md          # 页内调整控件
├── templates/
│   ├── deck_stage.js             # 幻灯片演示模板
│   ├── design_canvas.jsx         # 并排选项网格
│   ├── ios_frame.jsx             # iPhone设备框架
│   ├── android_frame.jsx         # Android设备框架
│   ├── macos_window.jsx          # macOS窗口框架
│   ├── browser_window.jsx        # 浏览器窗口框架
│   └── animations.jsx            # 时间线动画引擎
└── scripts/
    ├── package.json
    ├── gen_pptx.js               # HTML → PPTX导出
    ├── super_inline_html.js      # HTML + 资源 → 单文件
    └── open_for_print.js         # 通过Playwright将HTML转为PDF

Design Workflow

设计工作流

The skill follows a six-phase loop for every design request:
Understand → Explore → Plan → Build → Verify → Deliver
  1. Understand — Clarify intent, audience, constraints, and existing brand context before writing any code.
  2. Explore — Read existing design tokens, component libraries, or product code in the repo. Load brand systems from 
    getdesign.md
    when a brand name is mentioned.
  3. Plan — Write a brief todo list of components, layout decisions, and variation axes.
  4. Build — Produce HTML + inline React/Babel components. Use pinned CDN versions (see below).
  5. Verify — Use Playwright to take a screenshot and check the browser console for errors.
  6. Deliver — Write the final file, offer export options (PPTX, PDF, single-file HTML).
该技能针对每个设计请求遵循六阶段循环：
理解 → 探索 → 规划 → 构建 → 验证 → 交付
  1. 理解 —— 在编写任何代码前，明确需求意图、受众、约束条件及现有品牌背景。
  2. 探索 —— 读取仓库中现有设计令牌、组件库或产品代码。当提及品牌名称时，从
    getdesign.md
    加载品牌系统。
  3. 规划 —— 编写组件、布局决策及变体维度的简要待办清单。
  4. 构建 —— 生成HTML + 内联React/Babel组件。使用固定CDN版本（见下文）。
  5. 验证 —— 使用Playwright截取屏幕截图，并检查浏览器控制台是否有错误。
  6. 交付 —— 写入最终文件，提供导出选项（PPTX、PDF、单文件HTML）。

Core Principles

核心原则

  • Context-first design — Never design from scratch when existing brand systems, component libraries, or product code is available. Scan the repo and load relevant context before creating new visual directions.
  • Progressive disclosure — The main 
    SKILL.md
    stays concise. Technical references in 
    references/
    are loaded on demand to keep context window usage minimal.
  • 3+ variations — Always generate at least three design directions across layout, visual intensity, interaction model, or motion axes.
  • 上下文优先设计 —— 当存在现有品牌系统、组件库或产品代码时，绝不从零开始设计。在创建新视觉方向前，先扫描仓库并加载相关上下文。
  • 渐进式披露 —— 主文件
    SKILL.md
    保持简洁。
    references/
    中的技术参考会按需加载，以最小化上下文窗口占用。
  • 3+变体 —— 始终生成至少三种设计方向，涵盖布局、视觉强度、交互模型或动效维度。

Key Capabilities

核心能力

CategoryDetails
Output formatsInteractive prototypes, slide decks, landing pages, UI mockups, animated motion studies, design explorations
Brand style cloning68+ brands via getdesign.md: Stripe, Vercel, Notion, Linear, Apple, Tesla, Figma, GitHub, Airbnb, and more
Design systemsAuto-discovers and reuses existing tokens, typography, spacing, and color patterns from the project
VariationsGenerates 3+ directions across layout, interaction, visual intensity, and motion axes
PrototypingReact + Babel inline JSX with pinned CDN versions, component scope management
Tweaks systemSelf-contained in-page design controls with real-time preview and 
localStorage
persistence
VerificationPlaywright screenshot + console error check after every build step
ExportPPTX via 
gen_pptx.js
, PDF via 
open_for_print.js
, single-file via 
super_inline_html.js
分类详情
输出格式交互式原型、幻灯片、着陆页、UI模型、动效研究、设计探索
品牌风格克隆通过getdesign.md支持68+品牌：Stripe、Vercel、Notion、Linear、Apple、Tesla、Figma、GitHub、Airbnb等
设计系统自动发现并复用项目中现有令牌、排版、间距及颜色模式
变体生成生成3+涵盖布局、交互、视觉强度及动效维度的设计方向
原型制作使用固定CDN版本的React + Babel内联JSX，支持组件作用域管理
调整系统独立的页内设计控件，支持实时预览及
localStorage
持久化
验证每次构建步骤后使用Playwright截图 + 控制台错误检查
导出通过
gen_pptx.js
导出PPTX，通过
open_for_print.js
导出PDF，通过
super_inline_html.js
导出单文件

React + Babel Setup (Pinned Versions)

React + Babel设置（固定版本）

All prototypes use pinned CDN versions to guarantee reproducibility:
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Prototype</title>
  <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.23.5/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState, useEffect, useRef } = React;

    function App() {
      return (
        <div className="min-h-screen bg-white flex items-center justify-center">
          <h1 className="text-4xl font-bold text-gray-900">Hello, CC Design</h1>
        </div>
      );
    }

    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>
Rules for inline JSX:
  • Always use 
    type="text/babel"
    on script tags containing JSX.
  • Destructure hooks from 
    React
    at the top of the script block — do not use 
    React.useState
    inline.
  • Keep all components in a single script block unless explicitly splitting files.
  • Never use ES module 
    import
    syntax — CDN UMD builds expose globals only.
所有原型使用固定CDN版本以确保可复现性：
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Prototype</title>
  <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.23.5/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState, useEffect, useRef } = React;

    function App() {
      return (
        <div className="min-h-screen bg-white flex items-center justify-center">
          <h1 className="text-4xl font-bold text-gray-900">Hello, CC Design</h1>
        </div>
      );
    }

    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>
内联JSX规则：
  • 包含JSX的脚本标签必须始终使用
    type="text/babel"
    。
  • 在脚本块顶部从
    React
    解构钩子——不要在内部使用
    React.useState
    。
  • 除非明确拆分文件，否则所有组件都放在单个脚本块中。
  • 绝不使用ES模块
    import
    语法——CDN UMD构建仅暴露全局变量。

Brand Style Cloning

品牌风格克隆

Mention a brand name in the prompt to trigger automatic loading of its design system from getdesign.md:
"Create a pricing page with Stripe's aesthetic"
"Notion-style kanban board"
"Mix Vercel's minimalism with Linear's purple accents"
"Show me this dashboard in Apple style vs Tesla style"
The agent will:
  1. Fetch the brand's design tokens (colors, typography, spacing, radius, shadow, motion).
  2. Apply them as CSS custom properties on 
    :root
    .
  3. Reference them consistently throughout the component tree.
Example of brand tokens applied as CSS custom properties:
html
<style>
  :root {
    /* Stripe-inspired tokens */
    --color-primary: #635bff;
    --color-primary-dark: #4b44cc;
    --color-surface: #ffffff;
    --color-surface-alt: #f6f9fc;
    --color-text: #0a2540;
    --color-text-muted: #425466;
    --color-border: #e3e8ee;
    --radius-md: 8px;
    --radius-lg: 12px;
    --font-sans: 'Inter', system-ui, sans-serif;
    --shadow-card: 0 4px 24px rgba(10,37,64,0.08);
  }
</style>
在提示中提及品牌名称，即可触发从getdesign.md自动加载其设计系统：
"创建一个具有Stripe风格的定价页面"
"Notion风格的看板"
"融合Vercel的极简主义与Linear的紫色强调色"
"展示Apple风格与Tesla风格的该仪表板对比"
Agent会：
  1. 获取品牌的设计令牌（颜色、排版、间距、圆角、阴影、动效）。
  2. 将它们作为CSS自定义属性应用到
    :root
    上。
  3. 在整个组件树中一致地引用这些属性。
品牌令牌作为CSS自定义属性应用的示例：
html
<style>
  :root {
    /* Stripe风格令牌 */
    --color-primary: #635bff;
    --color-primary-dark: #4b44cc;
    --color-surface: #ffffff;
    --color-surface-alt: #f6f9fc;
    --color-text: #0a2540;
    --color-text-muted: #425466;
    --color-border: #e3e8ee;
    --radius-md: 8px;
    --radius-lg: 12px;
    --font-sans: 'Inter', system-ui, sans-serif;
    --shadow-card: 0 4px 24px rgba(10,37,64,0.08);
  }
</style>

Export Scripts

导出脚本

HTML → PPTX

HTML → PPTX

bash
node ~/.claude/skills/cc-design/scripts/gen_pptx.js \
  --input ./output/deck.html \
  --output ./output/deck.pptx
bash
node ~/.claude/skills/cc-design/scripts/gen_pptx.js \
  --input ./output/deck.html \
  --output ./output/deck.pptx

HTML → PDF

HTML → PDF

bash
node ~/.claude/skills/cc-design/scripts/open_for_print.js \
  --input ./output/prototype.html \
  --output ./output/prototype.pdf
bash
node ~/.claude/skills/cc-design/scripts/open_for_print.js \
  --input ./output/prototype.html \
  --output ./output/prototype.pdf

HTML → Single Inline File

HTML → 单内联文件

Embeds all linked CSS, JS, and images as base64 data URIs:
bash
node ~/.claude/skills/cc-design/scripts/super_inline_html.js \
  --input ./output/prototype.html \
  --output ./output/prototype.standalone.html
将所有链接的CSS、JS和图片嵌入为base64数据URI：
bash
node ~/.claude/skills/cc-design/scripts/super_inline_html.js \
  --input ./output/prototype.html \
  --output ./output/prototype.standalone.html

Playwright Verification

Playwright验证

After every build step, take a screenshot and check for console errors:
javascript
// Playwright verification snippet (used by the agent internally)
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') errors.push(msg.text());
  });

  await page.goto(`file://${process.cwd()}/output/prototype.html`);
  await page.waitForLoadState('networkidle');
  await page.screenshot({ path: 'output/preview.png', fullPage: true });

  if (errors.length > 0) {
    console.error('Console errors detected:', errors);
    process.exit(1);
  }

  console.log('Screenshot saved to output/preview.png — no console errors.');
  await browser.close();
})();
Run manually if needed:
bash
node verify.js
每次构建步骤后，截取屏幕截图并检查控制台错误：
javascript
// Playwright验证代码片段（Agent内部使用）
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  const errors = [];
  page.on('console', msg => {
    if (msg.type() === 'error') errors.push(msg.text());
  });

  await page.goto(`file://${process.cwd()}/output/prototype.html`);
  await page.waitForLoadState('networkidle');
  await page.screenshot({ path: 'output/preview.png', fullPage: true });

  if (errors.length > 0) {
    console.error('Console errors detected:', errors);
    process.exit(1);
  }

  console.log('Screenshot saved to output/preview.png — no console errors.');
  await browser.close();
})();
如有需要可手动运行：
bash
node verify.js

Tweaks System

调整系统

The tweaks system adds self-contained in-page design controls to any prototype. Controls persist via 
localStorage
. Include at the bottom of any HTML file:
html
<script type="text/babel">
  function TweaksPanel({ tweaks, onChange }) {
    const [open, setOpen] = React.useState(false);
    return (
      <div style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 9999 }}>
        <button
          onClick={() => setOpen(o => !o)}
          style={{ background: '#635bff', color: '#fff', border: 'none',
                   borderRadius: 8, padding: '8px 16px', cursor: 'pointer' }}
        >
          {open ? 'Close' : '⚙ Tweaks'}
        </button>
        {open && (
          <div style={{ background: '#fff', border: '1px solid #e3e8ee',
                        borderRadius: 12, padding: 16, marginTop: 8,
                        boxShadow: '0 4px 24px rgba(0,0,0,0.12)', minWidth: 240 }}>
            {tweaks.map(t => (
              <label key={t.key} style={{ display: 'block', marginBottom: 12 }}>
                <span style={{ fontSize: 13, color: '#425466' }}>{t.label}</span>
                <input
                  type={t.type || 'range'}
                  min={t.min} max={t.max} step={t.step}
                  value={t.value}
                  onChange={e => onChange(t.key, e.target.value)}
                  style={{ display: 'block', width: '100%', marginTop: 4 }}
                />
              </label>
            ))}
          </div>
        )}
      </div>
    );
  }
</script>
Usage pattern in a prototype:
javascript
const [tweaks, setTweaks] = useState(() => {
  const saved = JSON.parse(localStorage.getItem('cc-tweaks') || '{}');
  return {
    borderRadius: saved.borderRadius ?? 12,
    fontSize: saved.fontSize ?? 16,
    spacing: saved.spacing ?? 24,
  };
});

function handleTweak(key, value) {
  setTweaks(prev => {
    const next = { ...prev, [key]: Number(value) };
    localStorage.setItem('cc-tweaks', JSON.stringify(next));
    return next;
  });
}
调整系统可为任何原型添加独立的页内设计控件。控件通过
localStorage
持久化。将以下代码添加到任意HTML文件底部：
html
<script type="text/babel">
  function TweaksPanel({ tweaks, onChange }) {
    const [open, setOpen] = React.useState(false);
    return (
      <div style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 9999 }}>
        <button
          onClick={() => setOpen(o => !o)}
          style={{ background: '#635bff', color: '#fff', border: 'none',
                   borderRadius: 8, padding: '8px 16px', cursor: 'pointer' }}
        >
          {open ? 'Close' : '⚙ Tweaks'}
        </button>
        {open && (
          <div style={{ background: '#fff', border: '1px solid #e3e8ee',
                        borderRadius: 12, padding: 16, marginTop: 8,
                        boxShadow: '0 4px 24px rgba(0,0,0,0.12)', minWidth: 240 }}>
            {tweaks.map(t => (
              <label key={t.key} style={{ display: 'block', marginBottom: 12 }}>
                <span style={{ fontSize: 13, color: '#425466' }}>{t.label}</span>
                <input
                  type={t.type || 'range'}
                  min={t.min} max={t.max} step={t.step}
                  value={t.value}
                  onChange={e => onChange(t.key, e.target.value)}
                  style={{ display: 'block', width: '100%', marginTop: 4 }}
                />
              </label>
            ))}
          </div>
        )}
      </div>
    );
  }
</script>
原型中的使用模式：
javascript
const [tweaks, setTweaks] = useState(() => {
  const saved = JSON.parse(localStorage.getItem('cc-tweaks') || '{}');
  return {
    borderRadius: saved.borderRadius ?? 12,
    fontSize: saved.fontSize ?? 16,
    spacing: saved.spacing ?? 24,
  };
});

function handleTweak(key, value) {
  setTweaks(prev => {
    const next = { ...prev, [key]: Number(value) };
    localStorage.setItem('cc-tweaks', JSON.stringify(next));
    return next;
  });
}

Starter Templates

初始模板

Copy a template into your project to scaffold a new design:
bash
undefined
复制模板到项目中以快速搭建新设计：
bash
undefined

Slide deck

幻灯片

cp ~/.claude/skills/cc-design/templates/deck_stage.js ./src/deck.js
cp ~/.claude/skills/cc-design/templates/deck_stage.js ./src/deck.js

Side-by-side option grid (3 directions)

并排选项网格（3种方向）

cp ~/.claude/skills/cc-design/templates/design_canvas.jsx ./src/canvas.jsx
cp ~/.claude/skills/cc-design/templates/design_canvas.jsx ./src/canvas.jsx

iPhone device frame

iPhone设备框架

cp ~/.claude/skills/cc-design/templates/ios_frame.jsx ./src/ios_frame.jsx
cp ~/.claude/skills/cc-design/templates/ios_frame.jsx ./src/ios_frame.jsx

macOS window chrome

macOS窗口框架

cp ~/.claude/skills/cc-design/templates/macos_window.jsx ./src/macos_window.jsx
cp ~/.claude/skills/cc-design/templates/macos_window.jsx ./src/macos_window.jsx

Timeline animation engine

时间线动画引擎

cp ~/.claude/skills/cc-design/templates/animations.jsx ./src/animations.jsx

---
cp ~/.claude/skills/cc-design/templates/animations.jsx ./src/animations.jsx

---

Common Patterns

常见模式

Landing Page with 3 Variations

含3种变体的着陆页

"Design a SaaS landing page for a developer tool. Show 3 visual directions:
one minimal/technical, one bold/marketing, one warm/community-focused."
The agent will produce a single HTML file with a 
DesignCanvas
grid showing all three side by side, plus a full-page version of each.
"为一款开发者工具设计SaaS着陆页。展示3种视觉方向：
一种极简/技术风，一种大胆/营销风，一种温暖/社区风。"
Agent会生成单个HTML文件，包含
DesignCanvas
网格并排展示所有三种设计，以及每种设计的全屏版本。

Pitch Deck (10 slides)

演示文稿（10页）

"Create a 10-slide seed round pitch deck for a B2B AI startup.
Use Notion-style typography and Linear's purple accent color."
The agent loads both brand systems, merges tokens, and scaffolds 
deck_stage.js
with a slide navigator.
"为一家B2B AI初创公司创建10页种子轮融资演示文稿。
使用Notion风格的排版和Linear的紫色强调色。"
Agent会加载两个品牌系统，合并令牌，并使用幻灯片导航搭建
deck_stage.js
。

Mobile Prototype

移动原型

"Build an interactive onboarding flow for iOS — 4 screens, swipe to advance,
show it inside an iPhone frame."
The agent copies 
ios_frame.jsx
, builds the 4-screen flow with 
useState
for navigation, and verifies with a Playwright screenshot at 390×844 viewport.
"为iOS构建交互式引导流程——4个屏幕，滑动切换，
在iPhone框架内展示。"
Agent会复制
ios_frame.jsx
，使用
useState
构建4屏导航流程，并以390×844视口通过Playwright截图验证。

Animation Study

动效研究

"Animate a card component: entrance fade-up, hover lift, click ripple.
Show slow/medium/fast timing variations."
The agent uses 
animations.jsx
as the base timeline engine and adds a tweaks panel for duration control.
"为卡片组件添加动画：入场淡入上移、悬停抬起、点击波纹。
展示慢/中/快三种时长变体。"
Agent会以
animations.jsx
为基础时间线引擎，并添加调整面板用于时长控制。

Troubleshooting

故障排除

Babel/React not rendering:
  • Confirm 
    type="text/babel"
    is on the script tag.
  • Check the browser console (or Playwright error log) for 
    Uncaught ReferenceError
    — usually means a hook was called as 
    React.useState
    instead of destructured 
    useState
    .
  • Ensure CDN scripts load before the Babel script tag.
Playwright screenshot is blank:
  • Add 
    await page.waitForLoadState('networkidle')
    before the screenshot call.
  • For animated content, add 
    await page.waitForTimeout(500)
    to let transitions settle.
PPTX export has missing styles:
  • Run 
    super_inline_html.js
    first to produce a fully self-contained HTML file, then pass that to 
    gen_pptx.js
    .
Brand tokens not applied:
  • Verify the CSS custom properties are on 
    :root
    , not scoped to a component class.
  • Check that component inline styles reference 
    var(--token-name)
    rather than hardcoded values.
npm install
fails in scripts/:
  • Requires Node.js ≥ 18. Check with 
    node --version
    .
  • If 
    playwright
    install hangs, run 
    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install
    and install Chromium separately with 
    npx playwright install chromium
    .
Babel/React未渲染：
  • 确认脚本标签上有
    type="text/babel"
    。
  • 检查浏览器控制台（或Playwright错误日志）是否有
    Uncaught ReferenceError
    ——通常意味着钩子被调用为
    React.useState
    而非解构后的
    useState
    。
  • 确保CDN脚本在Babel脚本标签之前加载。
Playwright截图为空：
  • 在截图调用前添加
    await page.waitForLoadState('networkidle')
    。
  • 对于动画内容，添加
    await page.waitForTimeout(500)
    让过渡效果完成。
PPTX导出样式缺失：
  • 先运行
    super_inline_html.js
    生成完全独立的HTML文件，再将其传入
    gen_pptx.js
    。
品牌令牌未应用：
  • 验证CSS自定义属性应用在
    :root
    上，而非作用于组件类。
  • 检查组件内联样式是否引用
    var(--token-name)
    而非硬编码值。
scripts/目录下
npm install
失败：
  • 需要Node.js ≥ 18。使用
    node --version
    检查版本。
  • 如果
    playwright
    安装卡住，运行
    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install
    ，然后单独运行
    npx playwright install chromium
    安装Chromium。

References (Load on Demand)

参考资料（按需加载）

FileWhen to load
references/getdesign-loader.md
Brand style cloning is requested
references/platform-tools.md
Playwright MCP or host tool mapping needed
references/react-babel-setup.md
Complex multi-component JSX scope issues
references/starter-components.md
Selecting or adapting a template
references/tweaks-system.md
Adding in-page design controls
文件加载时机
references/getdesign-loader.md
请求品牌风格克隆时
references/platform-tools.md
需要Playwright MCP或主机工具映射时
references/react-babel-setup.md
遇到复杂多组件JSX作用域问题时
references/starter-components.md
选择或适配模板时
references/tweaks-system.md
添加页内设计控件时