skills.rest
lxt070409
lxt070409COMMUNITY
Explore all skills by this author →
GitHub

claude-design

Design custom HTML artifacts for landing pages, prototypes, and decks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you design one-off HTML artifacts like landing pages, prototypes, and decks without the need for specialized design tools.

Core Features & Use Cases

  • Design Process: Offers a structured design process from scoping a brief to producing variants and verifying HTML artifacts.
  • Design Systems: Supports various design systems and allows customization of colors, typography, spacing, and more.
  • Formats: Provides options for static visual comparisons, clickable prototypes, fixed-size HTML decks, component labs, and motion studies.
  • Use Case: If you need a custom landing page for a product launch or a high-fidelity prototype for a new feature, this Skill can help you create it.

Quick Start

Use the claude-design skill to create a landing page for your product.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I create an HTML landing page or prototype without specialized design tools?▼

You can design custom HTML artifacts like landing pages and prototypes directly using HTML, CSS, and JavaScript. This skill provides a structured design process from scoping a brief to producing variants and verifying the final HTML output.

Do I need to know HTML CSS and JavaScript to design custom HTML artifacts?▼

Yes, designing custom HTML artifacts requires knowledge of HTML, CSS, and JavaScript, along with familiarity with design systems. It is built for UX/UI designers, product managers, and developers handling one-off design tasks.

Can I customize design systems for my HTML prototypes and decks?▼

Yes, the design process supports various design systems and allows customization of colors, typography, and spacing. This ensures your clickable prototypes and fixed-size HTML decks match your specific visual requirements.

What formats can I generate for UX UI design tasks?▼

You can generate static visual comparisons, clickable prototypes, fixed-size HTML decks, component labs, and motion studies. These formats cover high-fidelity prototyping needs for new features or product launches.

What is the best way to structure a one-off HTML design task for a product launch?▼

The best way is to follow a structured design process that moves from scoping the initial brief to producing design variants and finally verifying the HTML artifacts. This ensures the landing page meets launch requirements.

Related Skills

Explore More Design & Creative Skills→
richardaumrichardaum

design-tokens

Generate CSS variables and config files for design tokens from design briefs.

Community
Intermediate
XyHalcyonXyHalcyon

claude-design

Design and prototype HTML artifacts using a structured design process.

Community
Advanced
StarryCodStarryCod
11

claude-design

Design self-contained HTML artifacts with embedded CSS and JavaScript for CLI/API workflows.

Community
Advanced
brittaniebuffiecsubrittaniebuffiecsu
1

claude-design

Generate custom HTML artifacts for UX/UI design and web prototypes.

Community
Advanced