From aradotso-trending-skills-37
Creates high-fidelity HTML prototypes including slide decks, interactive prototypes, landing pages, UI mockups, animations, and brand style clones with Playwright verification.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
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
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
The skill follows a six-phase loop for every design request:
Understand → Explore → Plan → Build → Verify → Deliver
getdesign.md when a brand name is mentioned.SKILL.md stays concise. Technical references in references/ are loaded on demand to keep context window usage minimal.| 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 |
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:
type="text/babel" on script tags containing JSX.React at the top of the script block — do not use React.useState inline.import syntax — CDN UMD builds expose globals only.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:
:root.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>
node ~/.claude/skills/cc-design/scripts/gen_pptx.js \
--input ./output/deck.html \
--output ./output/deck.pptx
node ~/.claude/skills/cc-design/scripts/open_for_print.js \
--input ./output/prototype.html \
--output ./output/prototype.pdf
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
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
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
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:
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;
});
}
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
"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.
"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.
"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.
"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.
Babel/React not rendering:
type="text/babel" is on the script tag.Uncaught ReferenceError — usually means a hook was called as React.useState instead of destructured useState.Playwright screenshot is blank:
await page.waitForLoadState('networkidle') before the screenshot call.await page.waitForTimeout(500) to let transitions settle.PPTX export has missing styles:
super_inline_html.js first to produce a fully self-contained HTML file, then pass that to gen_pptx.js.Brand tokens not applied:
:root, not scoped to a component class.var(--token-name) rather than hardcoded values.npm install fails in scripts/:
node --version.playwright install hangs, run PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install and install Chromium separately with npx playwright install chromium.| 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 |