cc-design-html-prototyping（CC 设计 HTML prototyping） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：cc-design-html-prototyping（CC 设计 HTML prototyping）
来源仓库：https://github.com/aradotso/trending-skills
仓库路径：skills/cc-design-html-prototyping
安装命令：
npx skills add https://github.com/aradotso/trending-skills --skill cc-design-html-prototyping
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/aradotso/trending-skills --skill cc-design-html-prototyping

简介

cc-design-html-prototyping 用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。

适合让 Agent 根据产品场景整理页面结构、生成 UI 方案或改进组件层级。
使用时需结合现有品牌和设计系统，避免仅堆砌装饰元素。
涉及真实页面改动时应通过截图或浏览器预览检查文本溢出和对齐表现。
适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

SKILL.md

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

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

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
          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;
  });
}

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

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

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

34.75%

按下载量换算448

Claude

30.5%

按下载量换算393

Cursor

21.4%

按下载量换算276

Gemini CLI

10.14%

按下载量换算131

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

可疑

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果，不能写成本站确认安全。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/aradotso/trending-skills

SKILL.md 来源

github.com

/aradotso/trending-skills/tree/main/skills/cc-design-html-prototyping

skills-sh

skills.sh

/aradotso/trending-skills/cc-design-html-prototyping

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

cc-design（cc 设计）

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

下一个 Skill

cc-figma-component（CC Figma component 搜索）

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。