skills.rest
paxlabs-inc
paxlabs-incCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Generate self-contained HTML design artifacts with CSS and JavaScript.

7|1|Updated Jul 26, 2026
Search Tags:#design#ui#html#prototype#creative#ux#artifact
One-click install
npx skills add https://github.com/paxlabs-inc/ion-agent --skill claude-design-paxlabs-inc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/paxlabs-inc/ion-agent/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/paxlabs-inc/ion-agent --skill claude-design-paxlabs-inc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of generating high-fidelity, thoughtful design artifacts in CLI or API environments where hosted design tools are unavailable, preventing generic AI design slop.

Core Features & Use Cases

  • Surface-First Design: Forces a commitment to specific surface archetypes (Monitor, Operate, Decide, etc.) to ensure compositional integrity before cosmetic styling.
  • Artifact Generation: Produces self-contained, production-ready HTML/CSS/JS prototypes, decks, and landing pages.
  • Slop Diagnostic: Includes a rigorous 10-point self-audit to identify and eliminate common AI design patterns like unearned blurs, generic grids, and tech gradients.

Quick Start

Use the claude-design skill to create a responsive landing page prototype for a new SaaS product using a minimalist aesthetic.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I generate high-fidelity HTML prototypes in a CLI environment?▼

You can generate high-fidelity HTML prototypes in a CLI environment by using this skill to produce self-contained HTML, CSS, and JavaScript files without needing hosted design tools.

What is the best way to avoid generic AI design slop when creating landing pages?▼

To avoid generic AI design slop when creating landing pages, this skill applies a 10-point self-audit to eliminate unearned blurs, generic grids, and tech gradients during artifact generation.

How do I ensure compositional integrity before applying cosmetic styling to a UI design?▼

To ensure compositional integrity before cosmetic styling, this skill forces a commitment to specific surface archetypes like Monitor, Operate, or Decide prior to generating the UI design.

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

Yes, you need local file system access because this skill writes and verifies the generated HTML, CSS, and JavaScript files directly to your local environment to produce production-ready artifacts.

Can I use this skill to create design decks and landing pages for a SaaS product?▼

Yes, you can use this skill to create self-contained, production-ready design decks and landing pages for a SaaS product by applying specific surface-archetype composition and rigorous aesthetic validation.

Why does my generated UI design look generic and lack compositional structure?▼

Your generated UI design may look generic because it lacks a defined surface archetype; this skill solves this by forcing a commitment to specific surface archetypes before applying cosmetic styling.

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
cxnaivecxnaive

claude-design

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

Community
Advanced
fefogarciafefogarcia
1

design-consistency-auditor

Audits frontend applications for design system consistency and accessibility.

Community
Advanced
icyzhicyzh
1

claude-design

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

Community
Advanced