skills.rest
cxnaive
cxnaiveCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

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

Updated Jun 17, 2026
Search Tags:#design#ui#html#prototype#creative#ux#artifact
One-click install
npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill claude-design-cxnaive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/cxnaive/hermes-agent-llbot/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/cxnaive/hermes-agent-llbot --skill claude-design-cxnaive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap between high-fidelity design requirements and CLI/API-based agent environments, allowing you to generate thoughtful, well-composed design artifacts without relying on hosted web-UI tools.

Core Features & Use Cases

  • Surface-First Design: Forces a structured approach to UI composition by selecting a surface archetype (e.g., Monitor, Operate, Decide) before applying styles.
  • Artifact Generation: Produces self-contained, high-quality HTML/CSS/JS files for landing pages, prototypes, and slide decks.
  • Design System Integration: Supports the creation of consistent visual vocabularies and integrates with token-based design workflows.

Quick Start

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

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate HTML prototypes using a CLI agent?▼

You generate HTML prototypes by applying surface-first design composition within CLI agents, which produces self-contained HTML files for browser-based inspection and verification.

What is surface-first design composition for UI artifacts?▼

Surface-first design composition is a structured approach that selects a surface archetype, like Monitor or Decide, before applying styles to ensure well-composed, high-fidelity UI design artifacts.

Can I create landing pages and slide decks without a hosted web-UI tool?▼

Yes, you can create landing pages and slide decks without hosted web-UI tools by generating high-fidelity, self-contained HTML design artifacts directly within CLI and API-based agent environments.

Do I need local file system access to generate HTML design artifacts?▼

Yes, local file system access is required to save self-contained HTML files and verify the generated design output through browser-based inspection.

How does token-based design system integration work for CLI generated prototypes?▼

Token-based design system integration supports creating consistent visual vocabularies for CLI generated prototypes, ensuring structured design principles are maintained across multiple HTML artifacts.

What are the limitations of generating design artifacts in API-based agent environments?▼

A key limitation is the dependency on local file system access to save and verify HTML output, making it unsuitable for purely ephemeral API environments without local storage capabilities.

Related Skills

Explore More Design & Creative Skills→
RheasilviaRheasilvia

claude-design

Generates self-contained HTML, CSS, and JavaScript design artifacts for CLI and API environments.

Community
Advanced
heysuhasheysuhas
2

claude-design

Generate self-contained HTML design artifacts for landing pages and prototypes.

Community
Advanced
HarshodaiHarshodai

design-system

Manage design token architecture and generate brand-compliant HTML slide decks with Chart.js.

Community
Advanced
zli5460zli5460
2

claude-design

Generate self-contained HTML prototypes with embedded CSS and JS.

Community
Intermediate