claude-design

Name: claude-design
Availability: InStock
Author: matthew-johnson

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

Ready to run

npx skills add https://github.com/matthew-johnson/hermes-agent --skill claude-design-matthew-johnson

💬 Prompt for ChatGPT / Claude Chat▼

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.