claude-design

Name: claude-design
Availability: InStock
Author: ruiyangruiyi

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

Updated May 26, 2026

Search Tags:#html #landing page #design system #prototype #deck #cli agents #ux ui

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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.