prompt

Design System Component Spec

Specs a UI component with its variants, states, sizing, and usage rules for a design system.

VettedUpdated June 2026
The prompt
Write a component spec for a {{component}} in a design system. Cover its variants ({{variants}}), interactive states (default, hover, focus, active, disabled), sizing options, spacing and alignment rules, accessibility notes, and one do and one don't for usage. Keep it implementation-ready.
Did it work? Rate this prompt

Variables

componentComponent
variantsVariants

Example output

Component: Button. Variants: primary, secondary, ghost, destructive. States — default: solid fill; hover: 8% darker; focus: 2px outline offset for keyboard users; active: 12% darker; disabled: 40% opacity, no pointer. Sizing: small 32px, medium 40px, large 48px height, with 12/16/20px horizontal padding. Spacing: 8px minimum between adjacent buttons; icon and label gap 8px. Accessibility: label is real text not an image, focus ring always visible, hit target at least 44px. Do: use one primary per view. Don't: rely on color alone to signal the destructive variant — add an icon or clear label.

Details

Author

AI Khazna

License

—

Security

Vetted

Type

prompt

Related assets

More curated picks in Design & Creative.

skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/
Canvas Design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/
Slack Gif Creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users…★ 4.8 · 2,500+
prompt
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Accessibility Contrast Checker
Checks color pairs against WCAG contrast rules and suggests accessible fixes.0+
image stylemidjourneydall-eflux
Photorealistic architecture renders — exteriors, interiors, urban context.
Architectural Render Style Pack
Photorealistic architecture renders — exteriors, interiors, urban context.0+
prompt
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Dark Mode Palette Adapter
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

Automated Web Security Scan

security

PageSpeed Analyzer

performance

AI Content Quality Test

arabic content

AI Agent / MCP Server Tester

ai testing

Site Stack Detector

migration

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Readability Score

arabic content

Schema / JSON-LD Builder

ai visibility

AI Cost Calculator

ai testing

Headline Analyzer

arabic content

More in Design & Creative