# cc-design-html-prototyping

This skill builds HTML mockups, slide decks, and interactive prototypes. Use it to explore visual directions before implementing an interface.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 423 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/cc-design-html-prototyping/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/cc-design-html-prototyping

## What it does

The skill first inspects the project for design tokens, components, and existing product code. It then moves from clarifying the brief to building and checking the result, producing HTML with React components. Each request gets at least three design directions.

Playwright captures a screenshot and checks the browser console for errors. Exports include PPTX, PDF, and a single HTML file with its assets. The export scripts need their dependencies from `scripts/package.json`; PDF export also uses Chromium through Playwright. React and Babel load from pinned CDN versions, and inline JSX must not use ES module `import` syntax.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/cc-design-html-prototyping/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/cc-design-html-prototyping/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/cc-design-html-prototyping/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/cc-design-html-prototyping/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills cc-design-html-prototyping
```

2. **Manually: put the files in place**
- File: `.github/skills/cc-design-html-prototyping/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/cc-design-html-prototyping
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/cc-design-html-prototyping/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/cc-design-html-prototyping/SKILL.md

## When to use it
- build an interactive HTML interface prototype
- compare visual directions for a landing page
- create an HTML slide deck for a pitch
- check a mockup with a screenshot and console scan
- export a prototype as PDF or PPTX

## Example prompts
- Create a product landing page and explore several visual directions.
- Build an interactive prototype of this dashboard.
- Prepare pitch deck slides and export them as PPTX.

## Similar
- [paper-poster-html](https://affpapa.org/en/nevibecode/skills/paper-poster-html.md) — skill · 311 installs
- [web-design-engineer](https://affpapa.org/en/nevibecode/skills/web-design-engineer.md) — skill · 8700 installs
- [slide-creator](https://affpapa.org/en/nevibecode/skills/slide-creator.md) — skill · 4100 installs
- [presentation-generator](https://affpapa.org/en/nevibecode/skills/presentation-generator.md) — skill · 320 installs
- [html-wireframe](https://affpapa.org/en/nevibecode/skills/html-wireframe.md) — skill · 1800 installs
- [kimi-pdf](https://affpapa.org/en/nevibecode/skills/kimi-pdf.md) — skill · 419 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 139 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md