Skip to main content
affpapa.org
RU EN
skill CX Codex

cc-design-html-prototyping — Claude Code skill for HTML prototypes

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a claude-code
Open on GitHub

What cc-design-html-prototyping 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.

What it helps with

  • 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 for the agent

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

How to install cc-design-html-prototyping

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a claude-code

2Manually: put the files in place

~/.claude/skills/cc-design-html-prototyping/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/cc-design-html-prototyping/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about cc-design-html-prototyping

How do I install cc-design-html-prototyping in Claude Code?

Run npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a claude-code. The skill file is at ~/.claude/skills/cc-design-html-prototyping/SKILL.md.

What does cc-design-html-prototyping do?

It creates HTML mockups, landing pages, slide decks, and interactive prototypes. It can check the result with Playwright and prepare export formats.

What is needed for PDF export?

PDF export uses Playwright. Install the script dependencies and Chromium with npx playwright install chromium.

Similar skills

Everything for Design →
paper-poster-html wanshuiyin Builds academic conference posters as a single HTML file and renders print-ready PDFs using headless Chromium. Helpful for researchers preparing posters for ICLR, NeurIPS, ICML, and CVPR. CX Codex +1 311installs web-design-engineer ConardLi Directs your coding agent to craft polished web interfaces in HTML, CSS, JavaScript, and React. Useful for building dashboards, UI prototypes, slide decks, and animations. CX Codex +1 8,700installs slide-creator Starchild-ai-agent Builds 16:9 presentation slide decks using HTML and CSS, then renders them to PDF via headless Chromium. CX Codex +1 4,100installs presentation-generator glebis Builds neobrutalist presentations with Agency brand colors: interactive HTML, PNG slides and PDF. CX Codex +1 320installs html-wireframe plannotator Builds low-fidelity, self-contained HTML wireframes so you can test information hierarchy, navigation and task flow before any visual design happens. CX Codex +1 1,800installs kimi-pdf thvroyal A skill that turns HTML into PDF with Paged.js, compiles LaTeX, and works with existing files: extract text, merge, split, fill forms. CX Codex +1 419installs

From the same set139

tech-doc-style-chinese Style rules for Chinese technical writing: spacing between CJK and Latin, corner brackets, no buzzwords. Ships with a Python linter. CX Codex +1 434installs diagram-design-editorial A skill that turns a short description into an HTML+SVG diagram for posts and docs. Thirteen types, no Mermaid, no build step, styling matched to your site. CX Codex +1 433installs anubis-android-app-manager A skill for building and configuring Anubis, an Android app manager that freezes app groups through Shizuku depending on VPN state. CX Codex +1 427installs huashu-design-html-native Turns a plain-language request into a finished file: prototype, slide deck, animation or infographic in HTML/CSS/JS. No Figma involved. CX Codex +1 426installs hy-world-2-0-3d-world-model A skill for running HY-World 2.0: it turns photos and video into 3D scenes and builds worlds from text or a single image. CX Codex +1 419installs lingbot-map-3d-reconstruction A skill for streaming 3D scene reconstruction from images or video: point clouds, camera poses, depth maps. Useful when you need geometry out of a long frame sequence. CX Codex +1 418installs meta-harness-optimization A skill for automated search over model harnesses: the scaffolding that decides what an agent stores, retrieves and sees while it works. CX Codex +1 413installs wx-favorites-report Pulls your WeChat for macOS favorites out of the encrypted database and turns them into a single interactive HTML report. CX Codex +1 401installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor