skills.rest
maopujie10-sys
maopujie10-sysCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

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

1|Updated Jun 24, 2026
Search Tags:#design#ui#html#landing page#design system#prototype#slide deck
One-click install
npx skills add https://github.com/maopujie10-sys/Bailongma --skill claude-design-maopujie10-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/maopujie10-sys/Bailongma/tree/main/skills/hermes-skills/creative/claude-design
Command: npx skills add https://github.com/maopujie10-sys/Bailongma --skill claude-design-maopujie10-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing high-fidelity UI artifacts in a CLI/API agent environment often produces generic, low-quality output because hosted design tools and their preview panes are unavailable. This Skill provides a structured design process—context gathering, system definition, variant exploration, and verification—so agents produce thoughtful local HTML artifacts instead of generic mockups. ## Core Features & Use Cases - Self-Contained HTML Artifacts: Produces single-file landing pages, interactive prototypes, component labs, and 1920x1080 slide decks with embedded CSS/JS and no hosted-tool dependencies. - Design Process Discipline: Enforces context-first workflows (reading repo tokens, brand docs, screenshots), three-variant exploration (conservative, strong-fit, divergent), and anti-slop rules against generic SaaS layouts. - Skill Composition: Coordinates with popular-web-designs for brand-matched visual vocabularies and design-md for formal token spec authoring. - Use Case: Ask the agent to design a landing page for a new product; it gathers brand context, defines a color/type/spacing system, builds a verified Landing Page.html, and reports the exact file path with verification status. ## Quick Start Ask the agent to design a landing page or interactive prototype for your product and save it as a self-contained HTML file.

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?▼

Provide the brief, brand context, and any repo or screenshot references, then ask for a self-contained HTML prototype. The skill gathers context, defines a design system, builds the artifact with embedded CSS/JS, and verifies the file before reporting its path.

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 brands like Stripe or Linear. design-md authors formal DESIGN.md token spec files rather than rendered artifacts.

Can this skill build slide decks in HTML?▼

Yes, it creates fixed-size 1920x1080 HTML decks with keyboard navigation, slide counters, localStorage persistence of the current slide, and print-friendly layouts. Text on slides is kept at 24px or larger for readability.

Does the skill work with an existing codebase instead of standalone HTML?▼

Yes, when the user asks for implementation in a repo, it inspects theme files, tokens, and components, then generates code in the repo's actual stack. Standalone HTML artifacts are only the default when no repo target is specified.

When should I not use claude-design?▼

Do not use it for pure DESIGN.md token authoring; use the design-md skill instead. It is also unnecessary for trivial tweaks or when the user only needs a known brand's visual style, which popular-web-designs handles directly.

Related Skills

Explore More Design & Creative Skills→
rvdbreemenrvdbreemen
199

doc-coauthoring

Guide collaborative documentation through staged drafting and reader-testing checks.

Community
Advanced
nexu-ionexu-io
93.2k

html-ppt-zhangzara-pin-and-paper

Generate hand-crafted HTML presentation decks using a specific visual system for academic and coursework defense.

Official
Intermediate
AjayRajan05AjayRajan05
5

popular-web-designs

Generates HTML/CSS pages 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