prompt
Design System Component Spec
Specs a UI component with its variants, states, sizing, and usage rules for a design system.
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.
Variables
componentComponentvariantsVariantsExample 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
Frequently asked questions
What is the Design System Component Spec prompt?
Specs a UI component with its variants, states, sizing, and usage rules for a design system.
Is Design System Component Spec free?
Yes, it is free to use.
Related assets
More curated picks in Design & Creative.
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.
Turns a vague design ask into a structured creative brief a designer can act on.
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.
Runs a structured critique of a screen or layout across hierarchy, spacing, and clarity.
Audit before you install
Run any source through our checks - AI visibility, security, performance, and stack detection.
AI Agent / MCP Server Tester
ai testing
Automated Web Security Scan
security
AI Content Quality Test
arabic content
Site Stack Detector
migration
PageSpeed Analyzer
performance
AI SEO / AEO / GEO Audit
ai visibility
llms.txt Generator
ai visibility
Schema / JSON-LD Builder
ai visibility
Readability Score
arabic content
AI Cost Calculator
ai testing
Headline Analyzer
arabic content