Cc Design HTML Prototyping

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

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).

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.

Key Capabilities

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 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.

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:

<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 = [];