claude-design

Create high-fidelity HTML design artifacts from product and visual design briefs.

Updated May 9, 2026

Search Tags:#design #ui #html #prototype #ux #design-system #artifact

Ready to run

npx skills add https://github.com/pmcdowall/hermes-skills --skill claude-design-pmcdowall

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/pmcdowall/hermes-skills/tree/main/creative/claude-design
Command: npx skills add https://github.com/pmcdowall/hermes-skills --skill claude-design-pmcdowall

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? This Skill helps transform ambiguous design requests into thoughtful, high-fidelity digital artifacts by providing a structured design process and avoiding generic AI-generated interfaces.

## Core Features & Use Cases

Design Process Guidance: Defines how to gather context, establish visual systems, create variants, and verify finished artifacts.
HTML Artifact Creation: Supports landing pages, prototypes, decks, component explorations, dashboards, and interactive design studies with practical implementation guidance.
Use Case: Create a polished standalone HTML prototype for a new product concept while considering brand context, responsive behavior, accessibility, and interaction details.

### Quick Start Use the claude-design skill to create a high-fidelity HTML prototype for my product idea with a thoughtful visual system and verified local artifact.

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 from a product brief?▼

Creating a high-fidelity HTML prototype from a product brief involves applying a structured design process to transform ambiguous requests into self-contained, responsive HTML artifacts with verified accessibility and interaction details.

What is the best way to build HTML design artifacts for component explorations?▼

Building HTML design artifacts for component explorations requires defining visual systems and creating variants. This approach applies structured design process guidance to ensure practical implementation decisions and verified local artifacts for dashboards and interactive studies.

Can I generate responsive HTML landing pages using a design system?▼

Yes, you can generate responsive HTML landing pages by establishing a visual design system and applying self-contained HTML practices. This approach ensures the resulting landing page artifact includes responsive behavior and accessibility checks.

Does this approach support creating HTML decks and dashboard prototypes?▼

Yes, creating HTML decks and dashboard prototypes is fully supported. The process provides practical implementation guidance for these high-fidelity design artifacts, ensuring they are self-contained and include necessary interaction studies and accessibility verification workflows.

How do I verify local HTML artifacts for accessibility and responsive behavior?▼

Verifying local HTML artifacts involves applying artifact verification workflows that check accessibility and responsive design considerations. This ensures the generated HTML prototypes and component explorations meet required interaction details and self-contained HTML practices.

What are the limitations of using AI for UI design artifact creation?▼

A key limitation of using AI for UI design artifact creation is the risk of generating generic interfaces. This requires applying a structured design process to gather context, establish visual systems, and create thoughtful variants to avoid ambiguous or unverified design outputs.