skills.rest
AtlasOmnia
AtlasOmniaCOMMUNITY
Explore all skills by this author →
Website𝕏@AtlasOmniaGitHub

claude-design

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

115|9|Updated Aug 5, 2026
Search Tags:#design#ui#html#landing page#prototype#slide deck#artifact
One-click install
npx skills add https://github.com/AtlasOmnia/donna-starter --skill claude-design-atlasomnia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/AtlasOmnia/donna-starter/tree/main/skills/creative/claude-design
Command: npx skills add https://github.com/AtlasOmnia/donna-starter --skill claude-design-atlasomnia

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—context gathering, surface-first composition, variation exploration, and a slop self-audit—so agents produce deliberate, verified HTML design artifacts instead of default-looking mockups. ## 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 the hero-plus-three-cards anti-pattern. - Multiple Artifact Formats: Produces self-contained HTML files for landing pages, interactive prototypes, 1920x1080 slide decks with keyboard navigation, component labs, and motion studies, with embedded CSS/JS and localStorage persistence. - Slop Diagnostic: Runs a 10-point self-audit (tech gradients, feature-tile grids, unearned blur, wrong surface, etc.) and repairs artifacts based on whether the issue is compositional, chromatic, or decorative. - Use Case: Ask for a dashboard concept and receive a dense, glanceable Monitor-surface HTML file with three layout variants, a Tweaks panel for density and theme, and verified browser rendering. ## 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. It produces a self-contained HTML file with clickable primary paths, key states, and a Tweaks panel for variants, then verifies the file locally.

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

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

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 stays at 24px or larger, and slides use at most one or two background colors.

Does it work inside an existing code repository?▼

Yes, when asked for repo implementation it inspects theme files, tokens, global styles, and components, then generates code in the repo's actual stack. It avoids forcing a standalone HTML artifact when production code is requested.

How does it avoid generic AI-looking design output?▼

It commits to one of seven surface archetypes before choosing colors or type, then runs a ten-point slop diagnostic covering gradients, feature-tile grids, glassmorphism, and wrong-surface compositions. Repairs are matched to whether the issue is compositional, chromatic, or decorative.

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

Do not use it for authoring DESIGN.md token spec files; use design-md instead. Also avoid it when you only need a known brand's visual vocabulary, where popular-web-designs is the better starting point.

Related Skills

Explore More Design & Creative Skills→
80portisfound80portisfound

claude-design

Generates self-contained HTML design artifacts such as landing pages, prototypes, and slide decks.

Community
Advanced
corvo007corvo007
793

frontend-design

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

Community
Advanced
InneiInnei
61

generate-design-md

Extract a brand's design system into a standards-compliant DESIGN.md document.

Community
Advanced
PlaidmustachePlaidmustache

design-md

Lint, diff, and export DESIGN.md token files to Tailwind or DTCG formats.

Community
Intermediate