skills.rest
richardnguyen0715
richardnguyen0715COMMUNITY
Explore all skills by this author →
GitHub

claude-design

Design HTML artifacts with customizable themes and variations from the command line.

Updated May 11, 2026
Search Tags:#web design#ux design#prototype#ui design#html design
One-click install
npx skills add https://github.com/richardnguyen0715/keep-it-real --skill claude-design-richardnguyen0715
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/richardnguyen0715/keep-it-real/tree/main/refer-projects/hermes-agent/skills/creative/claude-design
Command: npx skills add https://github.com/richardnguyen0715/keep-it-real --skill claude-design-richardnguyen0715

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides the ability to design one-off HTML artifacts, such as landing pages, prototypes, and decks, directly from the command line or API, offering a comprehensive design experience without the need for a hosted UI.

Core Features & Use Cases

  • HTML Artifacts Design: Generate HTML-based designs for various applications including landing pages, prototypes, and presentations.
  • Design System and Variations: Customize color schemes, typography, and other design elements, along with providing different variations of design artifacts.
  • Use Case: Suppose you need to design a landing page for a new product. With Claude Design, you can quickly create and iterate on the design based on your requirements, all within a terminal or API interface.

Quick Start

To design a landing page, simply type: claude-design create landingpage "Product Name" --theme "dark" --variant "conservative"

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 design artifacts from the command line?▼

You can generate HTML design artifacts from the command line by using this Skill to create landing pages, prototypes, and decks without needing a hosted UI. It emphasizes component-based design and responsive layouts for quick prototyping.

Can I design responsive UI prototypes without a hosted design interface?▼

Yes, you can design responsive UI prototypes without a hosted interface by running this Skill in command-line or API-based environments. It targets professionals needing to iterate on UI elements with minimal setup directly from the terminal.

How do I apply custom themes and variations to UI design components?▼

You apply custom themes and variations to UI design components by specifying parameters like theme and variant during creation. The Skill handles custom color schemes, typography, and different design variations for your HTML artifacts.

What file formats are supported for designing and iterating on web layouts?▼

The file formats supported for designing and iterating on web layouts include HTML, CSS, and JavaScript. This allows you to build component-based design artifacts and handle custom theming options directly within your terminal.

Is this approach suitable for professionals needing to iterate on UI elements with minimal setup?▼

Yes, this approach is explicitly intended for professionals needing to design and iterate on UI elements with minimal setup. It provides a comprehensive design experience for one-off HTML artifacts directly from the command line or API.

Related Skills

Explore More Design & Creative Skills→
wot-uiwot-ui
284

generate-theme

Generate a single-file SCSS theme for Wot UI with fixed color tokens.

Official
Intermediate
ArieGoldkinArieGoldkin

design-to-production

Convert HTML prototypes into React components with shadcn/ui and validation.

Community
Intermediate
RUSHYOPRUSHYOP

frontend-design

Generate production-grade frontend interfaces with design constraints and UX guidelines.

Community
Advanced
zunyiqingfeng-codezunyiqingfeng-code
2

web-design-engineer

Create HTML/CSS/JavaScript/React web artifacts with design-system coherence.

Community
Advanced