skills.rest
matthew-johnson
matthew-johnsonCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Generate self-contained HTML artifacts with embedded CSS and JS from design briefs.

Updated Apr 20, 2026
Search Tags:#design#ui#html#prototype#ux#design-system#artifact
One-click install
npx skills add https://github.com/matthew-johnson/hermes-agent --skill claude-design-matthew-johnson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/matthew-johnson/hermes-agent/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/matthew-johnson/hermes-agent --skill claude-design-matthew-johnson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured approach to producing high-fidelity, self-contained HTML artifacts without relying on hosted design UIs, enabling design work in CLI/API environments.

Core Features & Use Cases

  • Process-driven design for stand-alone HTML artifacts (landing pages, decks, prototypes) with embedded CSS/JS.
  • Context-aware design guidance that leverages existing brand context and design-system cues, while preserving original Claude Design behavior.
  • Supports multiple variants and a lightweight Tweaks workflow for rapid exploration.

Quick Start

Provide a brief design brief and I will generate a complete, self-contained HTML artifact ready to view in a browser.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate self-contained HTML prototypes in a CLI or API environment?▼

To generate self-contained HTML prototypes in a CLI environment, you provide a brief design brief and receive a complete HTML artifact with embedded CSS and JS ready to view in a browser.

Can I create landing pages and decks as single HTML files without hosted design UI?▼

Yes, you can create landing pages and decks as single HTML files without hosted design UI by using a process-driven design workflow that embeds all CSS and JS directly into the output.

How do I apply design-system guidance to a one-off HTML artifact?▼

You apply design-system guidance to a one-off HTML artifact by providing context-aware cues and existing brand context, which the workflow leverages to preserve original design behavior.

What is the best way to explore multiple design variants for a local HTML output?▼

The best way to explore multiple design variants for local HTML output is to use the lightweight Tweaks workflow, which supports rapid exploration of different design directions.

Does this HTML design workflow preserve original Claude Design behavior?▼

Yes, this HTML design workflow preserves original Claude Design behavior by applying context-aware design guidance that leverages existing brand context and design-system cues.

What do I need to provide to start the design workflow for an HTML artifact?▼

To start the design workflow for an HTML artifact, you need to provide a brief design brief, which triggers generation of a complete, self-contained HTML file ready for browser viewing.

Related Skills

Explore More Design & Creative Skills→
tolitiustolitius
16

publisher

Publish local HTML visuals to SCP or S3 destinations via CLI.

Community
Intermediate
Hack23Hack23
9

html-css-best-practices

Generate semantic HTML5 and CSS custom properties for accessible web projects.

Official
Basic
kzinmrkzinmr
7

claude-design

Design custom HTML artifacts like landing pages and prototypes in CLI/API environments.

Community
Intermediate
anilcan-karaanilcan-kara

claude-design

Translate design briefs into self-contained local HTML artifacts with embedded CSS and JS.

Community
Advanced