claude-design

Generate self-contained HTML design artifacts for CLI and API environments.

1|Updated Jul 31, 2026
One-click install
npx skills add https://github.com/icyzh/hermes-web --skill claude-design-icyzh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/icyzh/hermes-web/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/icyzh/hermes-web --skill claude-design-icyzh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables agents running in CLI or API environments to produce high-quality, thoughtful design artifacts like landing pages, prototypes, and decks without relying on hosted web-UI tools.

Core Features & Use Cases

  • Surface-First Design: Forces a structured composition approach to avoid generic AI design slop.
  • Artifact Generation: Creates self-contained, portable HTML/CSS/JS files for prototypes and presentations.
  • Slop Diagnostic: Includes a built-in audit process to identify and repair common AI design failures before final delivery.

Quick Start

Use the claude-design skill to create a high-fidelity landing page prototype for a new dashboard product.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate high-fidelity HTML design prototypes in a CLI environment?

To generate high-fidelity HTML design prototypes in a CLI environment, this skill enforces a surface-first composition methodology to create self-contained HTML/CSS/JS files without relying on hosted web-UI tools. It replaces external dependencies with local file generation and automated design diagnostics.

What is surface-first design methodology for AI artifact generation?

Surface-first design methodology is a structured composition approach that prevents generic AI design slop by enforcing rigorous design-system application before generating self-contained HTML artifacts. It forces agents to prioritize layout and visual structure to ensure high-quality outputs.

Can I create landing pages and slide decks using API-based agents?

Yes, you can create landing pages and slide decks using API-based agents by generating portable, self-contained HTML/CSS/JS files. This skill facilitates local artifact creation and verification, completely removing the need for hosted web-UI design tools.

How do I fix generic AI design slop in generated HTML artifacts?

To fix generic AI design slop in generated HTML artifacts, this skill includes a built-in audit process that identifies and repairs common AI design failures before final delivery. It enforces structured composition and rigorous design-system application to ensure quality.

Does this approach work for generating self-contained HTML files without external dependencies?

Yes, this approach works for generating self-contained HTML files without external dependencies by replacing hosted-tool requirements with local file generation. It produces portable HTML/CSS/JS artifacts for prototypes and presentations directly within CLI and API-based agent environments.

What are the limitations of generating design artifacts locally in CLI environments?

The limitations of generating design artifacts locally in CLI environments involve replacing hosted web-UI dependencies with local file generation, which requires enforcing a surface-first composition methodology to avoid common AI design failures and ensure high-fidelity outputs.