claude-design

Translates design briefs into self-contained HTML artifacts for CLI/API environments.

Updated May 3, 2026

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

Ready to run

npx skills add https://github.com/JuanMS20/solviora-agent --skill claude-design-juanms20

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs practical, self-contained HTML artifacts from CLI/API environments, preserving Claude Design's process and taste without hosted tooling.

Core Features & Use Cases

Process + artifact design: scopes a brief, gathers context, explores variants, and validates a local HTML artifact.
Artifact types: landing pages, decks, and prototypes delivered as self-contained HTML files with embedded CSS/JS.
Use Case: When asked to generate a landing page mockup for a product, this skill guides the design workflow and outputs a ready-to-run HTML prototype.

Quick Start

Ask for a design brief and I will generate a complete local HTML artifact.

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 from a CLI environment?▼

Generating pixel-perfect HTML artifacts via CLI involves translating a design brief into self-contained HTML files with embedded CSS and JS. This enables end-to-end design in headless workflows without requiring hosted design tooling.

What is a self-contained HTML artifact and when do I need it for UI design?▼

A self-contained HTML artifact is a single file with embedded CSS and JS used for UI design. You need it when delivering landing pages, decks, or prototypes in CLI/API environments where external dependencies are unavailable.

Can I create landing page mockups without hosted design tools?▼

Yes, you can create landing page mockups without hosted design tools by using a local HTML/CSS/JS design system within CLI/API environments. This process scopes the brief, explores variants, and validates a ready-to-run local HTML file.

How do I validate a local HTML design system artifact?▼

To validate a local HTML design system artifact, you check the generated self-contained HTML file against the initial design brief requirements. This ensures the output satisfies process guidance and pixel-perfect artifact generation standards.

Does this approach support motion studies and interactive prototypes?▼

Yes, this approach supports motion studies and interactive prototypes by generating self-contained HTML files with embedded JS. It allows you to validate motion and UI interactions directly within headless CLI/API workflows.

What are the limitations of designing HTML artifacts in headless workflows?▼

Designing HTML artifacts in headless workflows limits real-time visual editing and collaboration features found in hosted tooling. It requires validating outputs locally and relies entirely on text-based design briefs for context and variant exploration.