DESIGN.md Design System Spec for AI-Built UI
Applies opinionated design conventions for color, type, spacing, states and banned defaults so AI-built UI looks designed, not generic.
Before & after
Same prompt, same agent — the only difference is the skill.
Claude's design output is influenced by the guidance it receives. You could provide style examples or design inspiration links. Describing your aesthetic preferences and brand guidelines would help. You might also include references to well-designed products in your space. Sharing a design system or component library if you have one could give more concrete direction. Have you considered sharing mockups or screenshots of designs you like?
DESIGN CONVENTIONS INSTALLED This skill provides Claude with a curated set of high-quality design principles to follow when building UIs. CONVENTIONS APPLIED Spacing: 8px grid system with 4px options for fine-tuning Typography: single serif typeface for display, single sans for body; 6-8 weights max Color palette: 5-7 semantic colors plus 3 neutrals; no arbitrary colors Components: cohesive pattern library with consistent interaction states Layering: clear z-index hierarchy; shadows use single light source Responsive: mobile-first, single breakpoint at 768px Contrast: WCAG AA minimum on all text Motion: 300-400ms transitions, ease-out timing EXAMPLE OUTPUT CHANGE Before skill: Generic button with 4-5 different hover states, varied spacing, inconsistent colors After skill: Button follows 8px grid, uses single transition, semantic color from palette, consistent icon sizing BEFORE SKILL: Artifact used 12 different shades of blue AFTER SKILL: Artifact uses 3 semantic colors: primary (blue), success (green), warning (orange) IMPACT UIs look intentional, not AI-generated Consistency increases with each component Design reviews faster: conventions are visible No custom configuration needed. Skill runs by default.
About this skill
Every screen your AI assistant builds looks like the same template: purple gradient, centered hero, three icon cards, gray-on-gray text. And the buttons on page five don't match the buttons on page one. This skill applies a curated set of opinionated design conventions whenever you design or build UI, so the result looks intentional and stays consistent. It uses exact values instead of adjectives, and it can capture them in a DESIGN.md when you want a record to build against.
What it does
- Turns a vague direction ("calm, dense, trustworthy") into specific decisions: a tinted neutral ramp, one accent color with clear usage limits, a type scale matched to the product's density, and a 4px spacing scale
- Computes WCAG contrast ratios for text and UI-boundary pairs instead of guessing, and flags pairs that fail
- Applies every component state (hover, active, focus-visible, disabled, loading) plus empty and error states for data views
- Steers away from the generic AI-UI defaults by name, so agents stop drifting back to them
- Reviews existing CSS, Tailwind config or screenshots against the same conventions, grouping near-duplicate values and pointing out where the UI has drifted
- Outputs implementation-ready tokens as CSS custom properties or a Tailwind theme
What you get
Design decisions and fixes that follow the conventions, written as real hex values, contrast ratios, sizes and states, plus a token snippet for your stack. If you want a persistent reference, you get a DESIGN.md of about 300 lines or less that you can drop in your repo root.
Best for
Solo developers, founders and small teams who build UI with Claude Code or other coding agents and want screens that look designed, without a full-time designer or a heavyweight design system.
SKILL.md preview
---
name: design-md-design-system-spec
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.