skills.rest
CHENHUI-X
CHENHUI-XCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Generates self-contained HTML design artifacts including landing pages, prototypes, decks, and component explorations.

Updated Jul 3, 2026
Search Tags:#design#ui#html#landing page#design system#prototype#slide deck
One-click install
npx skills add https://github.com/CHENHUI-X/toolbox --skill claude-design-chenhui-x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/CHENHUI-X/toolbox/tree/main/official-skills/creative/claude-design
Command: npx skills add https://github.com/CHENHUI-X/toolbox --skill claude-design-chenhui-x

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing high-fidelity UI artifacts in CLI/API environments often produces generic, templated-looking output. This Skill provides a structured design process—surface-first composition, context gathering, variation exploration, and a slop diagnostic—that produces deliberate, verified HTML design artifacts instead of default-looking mockups. ## Core Features & Use Cases - Surface-First Composition: Commits to one of seven surface archetypes (Monitor, Operate, Compare, Configure, Decide/Learn, Explore, Command/Inspect) before choosing any visual tokens, eliminating the most common cause of generic layouts. - Self-Contained HTML Artifacts: Produces single-file HTML deliverables with embedded CSS/JS for landing pages, interactive prototypes, 1920x1080 slide decks, component labs, and motion studies, with versioned revisions and optional in-page Tweaks panels. - Slop Diagnostic Audit: Scores artifacts against ten known AI design tells (tech gradients, feature-tile grids, unearned blur, wrong surface) and repairs composition, color, or decoration based on the diagnosis. - Use Case: Ask for a dashboard concept and receive a density-focused Monitor-surface HTML prototype with three layout variants, verified in a browser, rather than a centered hero with three feature cards. ## Quick Start Ask the agent to design a landing page or interactive prototype as a self-contained HTML file and save it to a local path.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I create a high-fidelity HTML prototype with an AI agent?▼

Describe the brief, audience, and fidelity level, then let the skill gather context from your repo or brand docs before building. It produces a self-contained HTML file with embedded CSS/JS, clickable primary paths, and key states like hover, loading, and empty.

What is the difference between claude-design, popular-web-designs, and design-md?▼

claude-design provides the design process and taste for one-off artifacts. popular-web-designs supplies ready-to-paste design systems matching known brands like Stripe or Linear. design-md authors formal DESIGN.md token spec files. They can be combined within one workflow.

How do I avoid generic AI-looking web design?▼

Commit to one of seven surface archetypes before choosing colors or type, then run the ten-point slop diagnostic on the result. Compositional tells like feature-tile grids require re-layout, while gradient and default-font tells require recoloring or re-typesetting.

Can this skill build slide decks in HTML?▼

Yes, it creates fixed-size 1920x1080 HTML decks with keyboard navigation, visible slide counts, localStorage persistence of the current slide, and print-friendly layouts. Text should be 24px or larger and slides kept sparse.

When should I not use claude-design?▼

Do not use it for authoring DESIGN.md token spec files; use design-md for that. Also avoid it when the user wants production code in an existing repo stack, in which case the repo's own components and conventions should drive implementation.

Does the skill work with React in standalone HTML files?▼

Plain HTML/CSS/JS is the default, but React from a CDN is allowed when state or variant complexity warrants it. Pin exact versions, avoid unpinned URLs, and attach shared components to window when splitting Babel scripts.

Related Skills

Explore More Design & Creative Skills→
Mjlike123Mjlike123

frontend-aesthetic-direction

Defines a concrete aesthetic direction across typography, color, density, and motion for greenfield design work.

Community
Intermediate
MarbleSodasMarbleSodas

claude-design

Generate self-contained HTML artifacts from design briefs with local design systems.

Community
Advanced
maopujie10-sysmaopujie10-sys
1

popular-web-designs

Generates HTML and CSS styled after 54 real-world design systems like Stripe, Linear, and Vercel.

Community
Intermediate
AradotsoAradotso
3

design-md-format

Create and validate DESIGN.md design system files with WCAG contrast checks.

Official
Intermediate