skills.rest
TylerSimons1127
TylerSimons1127COMMUNITY
Explore all skills by this author →
GitHub

claude-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing high-fidelity UI artifacts from a CLI or API agent environment often produces generic, templated-looking output. This Skill provides a structured design process—brief scoping, context gathering, surface selection, and anti-slop auditing—so agents produce thoughtful, original HTML artifacts instead of default SaaS layouts. ## 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 compositional design slop. - Self-Contained HTML Artifacts: Produces portable single-file deliverables with embedded CSS/JS for landing pages, prototypes, decks, component labs, and motion studies, with versioned revisions. - Slop Diagnostic Audit: Scores artifacts against ten predictable AI-design tells (tech gradients, feature-tile grids, unearned blur, wrong surface) and repairs matched to the diagnosis. - Use Case: Ask for a dashboard concept and receive a density-focused Monitor-surface HTML file with a Tweaks panel, keyboard-navigable states, and a verified on-disk path. ## Quick Start Ask the agent to design a landing page or interactive prototype as a self-contained HTML file and save it to a local path.

Frequently Asked Questions about claude-design

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

FAQPage Schema
How do I create a high-fidelity HTML prototype with an AI agent?▼

Describe the brief, audience, and fidelity level, and the agent gathers context from your repo or brand docs before building a self-contained HTML file. The primary flow is made clickable with default, hover, loading, empty, and error states included.

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, and design-md authors formal DESIGN.md token spec files. They can be combined within one project.

Can the agent build designs inside an existing repo instead of standalone HTML?▼

Yes. When asked for implementation in an existing repo, the agent inspects theme files, tokens, global stylesheets, and components, then generates code in the repo's actual stack rather than forcing a standalone HTML artifact.

How does the skill avoid generic AI-looking design output?▼

It commits to one of seven surface archetypes before any visual tokens, then runs a ten-point slop diagnostic covering tech gradients, feature-tile grids, glassmorphism, and wrong-surface compositions. Repairs are matched to the diagnosis: re-layout for compositional tells, recolor for palette tells.

What slide deck formats does the HTML deck output support?▼

Decks use a fixed 1920x1080 16:9 canvas scaled to the viewport, with keyboard navigation, visible slide count, and localStorage persistence of the current slide. Text should be 24px or larger, and speaker notes are excluded unless requested.

When should I not use this skill for design work?▼

Do not use it for pure DESIGN.md token authoring; use design-md for that. It is also unnecessary for small tweaks or when the user wants a known brand's exact look, where popular-web-designs is the better starting point.

Related Skills

Explore More Design & Creative Skills→
brittb-devbrittb-dev
1

claude-design

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

Community
Advanced
alinur527alinur527

ckm:slides

Create strategic HTML presentations with persuasive slide structures and Chart.js visualizations.

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