skills.rest
loteiron
loteironCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

claude-design

Generate self-contained HTML design artifacts like landing pages, decks, and prototypes.

Updated Sep 10, 2026
Search Tags:#design#ui#html#landing page#design system#prototype#slide deck
One-click install
npx skills add https://github.com/loteiron/ZeusAgent --skill claude-design-loteiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/loteiron/ZeusAgent/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/loteiron/ZeusAgent --skill claude-design-loteiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing high-fidelity UI artifacts in a CLI/API environment often produces generic, templated-looking output. This Skill brings a structured design process—brief scoping, context gathering, surface-first composition, and anti-slop auditing—to produce thoughtful local HTML artifacts without hosted design tools. ## Core Features & Use Cases - Surface-First Composition: Commits to one of seven surface archetypes (Monitor, Operate, Compare, Configure, Decide/Learn, Explore, Command/Inspect) before choosing colors or type, eliminating generic hero-plus-cards layouts. - Slop Diagnostic Audit: Scores artifacts against ten common AI design tells (tech gradients, feature-tile grids, unearned blur, default type) and guides targeted repair by diagnosis type. - Multiple Artifact Formats: Produces landing pages, interactive prototypes, 1920×1080 HTML slide decks with keyboard navigation, component labs, and motion studies as self-contained HTML files. - Use Case: Ask for a dashboard concept and receive a dense, glanceable Monitor-surface HTML file with a Tweaks panel for theme and density, verified to open cleanly in a browser. ## Quick Start Use the claude-design skill to create a landing page prototype for my product as a self-contained HTML file.

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 prototype with an AI agent?▼

Describe the brief, audience, and fidelity level, and the skill produces a self-contained HTML file with embedded CSS and JS. It commits to a surface archetype first, defines a small design system, and verifies the file before reporting the exact path.

What is the difference between claude-design, popular-web-designs, and design-md?▼

claude-design provides design process and taste for one-off artifacts. popular-web-designs supplies ready-to-paste design systems matching known brands like Stripe or Linear. design-md authors formal DESIGN.md token spec files. They can be combined in one workflow.

Can this skill build slide decks in HTML?▼

Yes, it creates fixed-size 1920×1080 HTML decks with keyboard navigation, visible slide counts, and localStorage persistence for the current slide. Text stays at 24px or larger and slides use at most one to two background colors.

Does the skill work inside an existing code repository?▼

Yes, when asked for repo implementation it inspects theme files, tokens, global stylesheets, and component files, then generates code in the repo's actual stack instead of forcing a standalone HTML artifact.

How does the skill avoid generic AI-looking designs?▼

It runs a ten-point slop diagnostic covering tech gradients, feature-tile grids, glassmorphism, and wrong surface composition. Compositional tells trigger re-layout, while palette and type tells trigger recoloring or re-typesetting, with re-scoring after repair.

When should I not use claude-design?▼

Do not use it for pure DESIGN.md token authoring; use design-md for that. It is also unnecessary when the user only needs a known brand's visual vocabulary, which popular-web-designs provides directly.

Related Skills

Explore More Design & Creative Skills→
laicluselaicluse
4

art-director

Define brand identity, visual language, and design-system architecture before UI implementation.

Official
Advanced
mulyovedmulyoved

design-shotgun

Generate and compare multiple AI design variants on a side-by-side board.

Community
Advanced
maopujie10-sysmaopujie10-sys
1

popular-web-designs

Generates HTML and CSS styled after 54 real-world design systems like Stripe, Linear, and Vercel.

Community
Intermediate
AradotsoAradotso
3

design-md-format

Create and validate DESIGN.md design system files with WCAG contrast checks.

Official
Intermediate