claude-design

Generate self-contained HTML, deck, or prototype artifacts from design briefs.

Updated May 26, 2026
One-click install
npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill claude-design-ruiyangruiyi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/ruiyangruiyi/hermes-agent/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/ruiyangruiyi/hermes-agent --skill claude-design-ruiyangruiyi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you produce high-quality landing pages, decks, prototypes, and UI explorations in a CLI/API agent environment by preserving Claude Design-style process and taste without relying on hosted web UI tools.

Core Features & Use Cases

  • Design process for one-off artifacts: scopes the brief, gathers context, defines a mini design system, produces variants, and verifies the local HTML output.
  • Claude Design remapping for CLI/API mode: ignores hosted-only concepts and focuses on tools actually available to an agent workflow.
  • Artifact-first delivery: generates complete local HTML (with embedded CSS/JS when needed), includes clear file paths, and supports next-iteration guidance.

Quick Start

Ask your agent: “Use claude-design to create a responsive landing page prototype for a new product, preserving visual taste and including a short Tweaks panel for theme/density.”

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate a responsive landing page prototype in a CLI agent environment?

To generate a responsive landing page prototype in a CLI agent environment, you can use a design process skill that scopes your brief, defines a mini design system, and outputs self-contained local HTML files with embedded CSS and JS.

Can I create high-fidelity UI mockups without relying on hosted web design tools?

Yes, you can create high-fidelity UI mockups without hosted web design tools by using agent-based design skills that remap the design process for CLI/API modes, producing local HTML artifacts directly.

What is the best way to build interactive prototype layouts from a design brief?

The best way to build interactive prototype layouts from a design brief is to use an artifact-first delivery method that transforms briefs into self-contained local HTML deliverables with embedded styling and scripts.

Does this approach support creating motion studies and component explorations?

Yes, this approach supports creating motion studies and component explorations by transforming design briefs into one-off HTML artifacts suitable for CLI/API agent workflows.

Are the generated HTML artifacts self-contained or do they require external dependencies?

The generated HTML artifacts are completely self-contained local deliverables, featuring embedded CSS and JS, ensuring they function independently without requiring external hosted plumbing.

When should I avoid using CLI-based design generation for UI artifacts?

You should avoid using CLI-based design generation when a specific brand-token spec is mandated, as this approach is optimized for scenarios without strict brand-token requirements.