skills.rest
Openclaw-Metis
Openclaw-MetisCOMMUNITY
Explore all skills by this author →
GitHub

cc-designer

Generate self-contained HTML design artifacts from design briefs.

6|1|Updated Apr 19, 2026
Search Tags:#design#branding#html#prototype#design-tokens#wireframe#deck
One-click install
npx skills add https://github.com/Openclaw-Metis/cc-designer --skill cc-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cc-designer
Source: https://github.com/Openclaw-Metis/cc-designer/tree/main
Command: npx skills add https://github.com/Openclaw-Metis/cc-designer --skill cc-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

cc-designer addresses the gap between design briefs and browser-ready deliverables by turning slide decks, prototypes, motion demos, wireframes, and design canvases into self-contained HTML artifacts that can be opened directly in a browser.

Core Features & Use Cases

  • Generates directly runnable HTML for decks, interactive prototypes, motion demos, wireframes, and design canvases from a design brief.
  • Supports PRD-to-deck and multi-variant exploration workflows with design-token integration when DESIGN.md is present.
  • Delivers a self-contained output with starter components, local assets, and clear documentation for rapid handoff.

Quick Start

Provide a PRD outline or brand references, and I will generate a ready-to-open HTML design artifact.

Frequently Asked Questions about cc-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a PRD or design brief into an interactive HTML prototype?▼

To turn a PRD into an interactive HTML prototype, provide the brief outline to generate a self-contained, browser-ready HTML project with starter components and local assets directly in your working directory.

Can I use design tokens to generate a wireframe or deck in HTML?▼

Yes, you can use design tokens to generate HTML wireframes and decks. When a DESIGN.md file is present in your project, the tokens are integrated automatically to ensure visual consistency across the output artifacts.

What is the best way to create multi-variant visual explorations for onboarding flows?▼

The best way to create multi-variant visual explorations for onboarding flows is by processing brand references and briefs to output multiple self-contained HTML artifacts, enabling direct browser comparison without external dependencies.

Does generating browser-ready HTML design artifacts require external dependencies or console setup?▼

Generating browser-ready HTML design artifacts requires no external dependencies or complex console setup. The output is a deterministic, self-contained HTML project that opens directly in a browser with zero console errors.

What types of design artifacts can I generate from a text brief besides a standard wireframe?▼

Besides a standard wireframe, you can generate browser-ready HTML slide decks, interactive prototypes, motion demos, and design canvases from a text brief, covering various PRD-to-deck and visual exploration workflows.

Why does my generated HTML design canvas show console errors after handoff?▼

A generated HTML design canvas should not show console errors. The output is designed to be a deterministic, self-contained HTML project that runs directly in the browser without console errors for rapid handoff.

Related Skills

Explore More Design & Creative Skills→
vanducngvanducng
5

opendesign

Generate static HTML/CSS artifacts from a design-system catalog.

Community
Advanced
zephyrwang6zephyrwang6
14

space-image2proto

Convert UI screenshots, mockups, and wireframes into single-file HTML prototypes.

Community
Advanced
AgriciDanielAgriciDaniel
247

canvas-create

Create Obsidian Canvas files with blank or archetype templates.

Community
Advanced
lisposterlisposter
1

baoyu-slide-deck

Generate image-based slide decks from content with PPTX/PDF export.

Community
Advanced