aradotso 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.
Installation
Clone into the Claude Code skills directory:
git clone https://github.com/ZeroZ-lab/cc-design.git ~/.claude/skills/cc-design
Or as a submodule in an existing skill collection:
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):
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
Design Workflow
The skill follows a six-phase loop for every design request:
Understand → Explore → Plan → Build → Verify → Deliver
- Understand — Clarify intent, audience, constraints, and existing brand context before writing any code.
- Explore — Read existing design tokens, component libraries, or product code in the repo. Load brand systems from
getdesign.mdwhen a brand name is mentioned. - Plan — Write a brief todo list of components, layout decisions, and variation axes.
- Build — Produce HTML + inline React/Babel components. Use pinned CDN versions (see below).
- Verify — Use Playwright to take a screenshot and check the browser console for errors.
- Deliver — Write the final file, offer export options (PPTX, PDF, single-file 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.mdstays concise. Technical references inreferences/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.
Key Capabilities
| Category | Details |
|---|---|
| Output formats | Interactive prototypes, slide decks, landing pages, UI mockups, animated motion studies, design explorations |
| Brand style cloning | 68+ brands via getdesign.md: Stripe, Vercel, Notion, Linear, Apple, Tesla, Figma, GitHub, Airbnb, and more |
| Design systems | Auto-discovers and reuses existing tokens, typography, spacing, and color patterns from the project |
| Variations | Generates 3+ directions across layout, interaction, visual intensity, and motion axes |
| Prototyping | React + Babel inline JSX with pinned CDN versions, component scope management |
| Tweaks system | Self-contained in-page design controls with real-time preview and localStorage persistence |
| Verification | Playwright screenshot + console error check after every build step |
| Export | PPTX via gen_pptx.js, PDF via open_for_print.js, single-file via super_inline_html.js |
React + Babel Setup (Pinned Versions)
All prototypes use pinned CDN versions to guarantee reproducibility:
<!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
Reactat the top of the script block — do not useReact.useStateinline. - Keep all components in a single script block unless explicitly splitting files.
- Never use ES module
importsyntax — CDN UMD builds expose globals only.
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:
- Fetch the brand's design tokens (colors, typography, spacing, radius, shadow, motion).
- Apply them as CSS custom properties on
:root. - Reference them consistently throughout the component tree.
Example of brand tokens applied as CSS custom properties:
<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>
Export Scripts
HTML → PPTX
node ~/.claude/skills/cc-design/scripts/gen_pptx.js \
--input ./output/deck.html \
--output ./output/deck.pptx
HTML → PDF
node ~/.claude/skills/cc-design/scripts/open_for_print.js \
--input ./output/prototype.html \
--output ./output/prototype.pdf
HTML → Single Inline File
Embeds all linked CSS, JS, and images as base64 data URIs:
node ~/.claude/skills/cc-design/scripts/super_inline_html.js \
--input ./output/prototype.html \
--output ./output/prototype.standalone.html
Playwright Verification
After every build step, take a screenshot and check for console errors:
// 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:
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:
<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
=> 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(t.key, e.target.value)}
style={{ display: 'block', width: '100%', marginTop: 4 }}
/>
</label>
))}
</div>
)}
</div>
);
}
</script>
Usage pattern in a prototype:
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:
# Slide deck
cp ~/.claude/skills/cc-design/templates/deck_stage.js ./src/deck.js
# Side-by-side option grid (3 directions)
cp ~/.claude/skills/cc-design/templates/design_canvas.jsx ./src/canvas.jsx
# iPhone device frame
cp ~/.claude/skills/cc-design/templates/ios_frame.jsx ./src/ios_frame.jsx
# macOS window chrome
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
Common Patterns
Landing Page with 3 Variations
"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.
Pitch Deck (10 slides)
"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.
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.
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.
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 asReact.useStateinstead of destructureduseState. - 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.jsfirst to produce a fully self-contained HTML file, then pass that togen_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
playwrightinstall hangs, runPLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm installand install Chromium separately withnpx playwright install chromium.
References (Load on Demand)
| File | When 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 |