skills.rest
agtktID
agtktIDCOMMUNITY
Explore all skills by this author →
GitHub

claude-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing high-fidelity UI artifacts in a CLI/API environment often produces generic, templated output. This Skill provides a structured design process that turns a brief into a polished, self-contained HTML artifact while avoiding common AI design slop. ## 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 any visual tokens, preventing generic hero-plus-cards layouts. - Slop Diagnostic Audit: Scores artifacts against ten predictable AI design tells (tech gradients, feature-tile grids, unearned blur, etc.) and repairs them in the correct register. - Multiple Artifact Formats: Produces landing pages, interactive prototypes, 1920x1080 HTML slide decks with keyboard navigation, component labs, and motion studies as single 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 single self-contained HTML file with embedded CSS and JavaScript. It commits to a surface archetype first, then defines colors, type, and spacing before building the artifact.

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

claude-design provides the 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 rather than rendered artifacts.

Can this skill build slide decks in HTML?▼

Yes, it creates fixed-size 1920x1080 HTML decks with keyboard navigation, visible slide counts, and localStorage persistence for the current slide. Text is kept at 24px or larger and slides stay sparse with at most two background colors.

Does the skill work inside an existing code repository?▼

Yes, when the user asks for implementation in a repo, 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 design output?▼

It runs a slop diagnostic scoring ten common tells such as tech gradients, feature-tile grids, and wrong surface composition. Repairs are matched to the diagnosis: compositional tells trigger re-layout, while palette and type tells trigger recoloring.

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 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→
laicluselaicluse
4

art-director

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

Official
Advanced
corvo007corvo007
793

frontend-design

Design and implement production-grade frontend interfaces with HTML/CSS/JS or frameworks.

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