skills.rest
liangmiQwQ
liangmiQwQCOMMUNITY
Explore all skills by this author →
Website𝕏@liangmiQwQGitHub

cc-design

Generate hi-fi HTML designs and prototypes from user briefs.

Updated Apr 12, 2026
Search Tags:#landing page#design system#prototype#html output#cc-design#hi-fi design#brand clone
One-click install
npx skills add https://github.com/liangmiQwQ/skills --skill cc-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cc-design
Source: https://github.com/liangmiQwQ/skills/tree/main/skills/cc-design
Command: npx skills add https://github.com/liangmiQwQ/skills --skill cc-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing high-fidelity HTML visuals and prototypes is time-consuming and error-prone; cc-design provides a structured workflow and tooling to produce runnable HTML artifacts (landing pages, slides, interactive prototypes, design systems) directly from briefs.

Core Features & Use Cases

  • High-fidelity HTML prototypes and slides
  • Brand-style clones and design-system-driven visuals
  • Interactive prototypes with built-in quality guardrails
  • Export-ready outputs (HTML, PPTX, PDFs, images)
  • Use cases include marketing pages, product demos, UI mocks for complex apps

Quick Start

Scaffold a hi-fi landing page using your brand guidelines, then iterate to refine visuals and interactions.

Frequently Asked Questions about cc-design

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

FAQPage Schema
How do I generate high-fidelity HTML prototypes directly from text briefs?▼

Generate hi-fi HTML prototypes from briefs by using a design-system-oriented workflow with built-in guardrails and token usage. This enforces brand consistency and outputs runnable HTML artifacts directly from your project descriptions.

Can I clone a specific brand style for a landing page design?▼

Yes, you can clone brand styles for landing page designs. The workflow applies a design-system-driven approach with token usage to replicate brand guidelines and produce export-ready HTML outputs.

What is the best way to turn ideas into interactive HTML designs without manual coding?▼

The best way to turn ideas into interactive HTML designs is using a structured workflow that enforces design system guardrails. This produces export-ready outputs like HTML, PPTX, and PDFs directly from your initial briefs.

Does this approach support building slide decks and UI mocks for complex apps?▼

Yes, this approach supports building slide decks and UI mocks for complex apps. It handles high-fidelity HTML visuals, interactive prototypes, and marketing pages within a single structured workflow.

Why use a design system with tokens for high-fidelity HTML visuals?▼

Use a design system with tokens for high-fidelity HTML visuals to enforce consistency and reduce errors. Built-in guardrails ensure the final interactive prototypes and slides remain export-ready and brand-compliant.

Related Skills

Explore More Design & Creative Skills→
YeomanYeYeomanYe

huashu-design

Convert design briefs into hi-fi HTML prototypes and presentation assets.

Community
Advanced
SciMate-AISciMate-AI
1

pptx-posters

Create HTML/CSS posters and export them as PDF or PPTX.

Official
Intermediate
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
ldzhhxxldzhhxx
1

claude-design

Design custom HTML artifacts for landing pages, prototypes, and presentations.

Community
Advanced