skills.rest
ashiqcodeleaf
ashiqcodeleafCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

Generate self-contained HTML artifacts with embedded CSS/JS for design purposes.

Updated Jun 22, 2026
Search Tags:#landing page#design system#ux design#prototype#html design
One-click install
npx skills add https://github.com/ashiqcodeleaf/long-Run-Agents --skill claude-design-ashiqcodeleaf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/ashiqcodeleaf/long-Run-Agents/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/ashiqcodeleaf/long-Run-Agents --skill claude-design-ashiqcodeleaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating one-off HTML artifacts like landing pages, prototypes, and decks, providing a design-focused approach without the complexities of a full web UI.

Core Features & Use Cases

  • Design Process and Taste: Offers guidance on scoping briefs, producing variants, and verifying local HTML artifacts.
  • Brand and Token System Integration: Supports design with known brands or token systems when specified.
  • CLI/API Compatibility: Optimized for CLI/API environments, providing a local HTML file with embedded CSS/JS.
  • Use Case: Ideal for generating custom landing pages, high-fidelity prototypes, or interactive product mockups without the need for a hosted web UI.

Quick Start

Use the claude-design skill to create a landing page for a new product, specifying the desired layout and brand guidelines.

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 local HTML landing page with embedded CSS and JS?▼

You can generate a self-contained HTML landing page with embedded CSS and JS using this Skill in CLI or API environments. It provides design process guidance and integrates with specified brand token systems for accurate high-fidelity prototypes.

Can I use my existing design system and brand tokens to create HTML prototypes?▼

Yes, you can apply existing brand and design token systems to create HTML prototypes. When specified, the Skill integrates these tokens to ensure generated local HTML artifacts match your established visual guidelines.

What is the best way to create high-fidelity product mockups without a hosted web UI?▼

The best way to create high-fidelity product mockups without a hosted web UI is by generating local HTML artifacts. This Skill streamlines producing interactive mockups by outputting self-contained files optimized for CLI/API environments.

Do I need local HTML editing capabilities to use this design Skill?▼

Yes, local HTML editing capabilities and familiarity with design principles are required. The Skill operates in CLI/API environments, meaning you manage and verify the generated self-contained local files directly.

Does this approach support scoping design briefs and producing layout variants?▼

Yes, this approach supports scoping design briefs and producing layout variants. The Skill provides design process guidance to help scope briefs, generate multiple variants, and verify the resulting local HTML artifacts.

When should I avoid using local HTML files for UX design prototypes?▼

Avoid using local HTML files for UX design prototypes if your project requires a full hosted web UI or complex server-side routing. This Skill targets one-off artifacts like landing pages and decks rather than full web applications.

Related Skills

Explore More Design & Creative Skills→
JuanMS20JuanMS20

claude-design

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

Community
Advanced
rkz91rkz91
264

clone-website

Clone websites into self-contained HTML prototypes with inline CSS and JS.

Community
Advanced
fluid-commercefluid-commerce

fluid-design-os

Start and stop the Fluid Design OS canvas for reviewing and annotating marketing assets.

Official
Intermediate
richardnguyen0715richardnguyen0715

sketch

Generate disposable HTML mockups with interactive elements for UI/UX comparison.

Community
Intermediate