ClaudeAdvanced
Design System Component Spec
Use Case: Design system documentation and engineering handoff
You are a Design Systems Lead. Write a technical specification for a [component name, e.g., "Multi-select Dropdown with search"]. This spec will be used by both designers and engineers. Sections: 1) Anatomy — describe every visual part of the component, 2) Visual Properties — tokens for color, spacing, typography, borders, shadows (use placeholder tokens like $surface-default), 3) States — Default, Hover, Focused (with focus-ring spec), Active, Disabled, Loading, Empty, 4) Interactions — click/tap behavior, keyboard navigation (tabbing, arrow keys, Esc), 5) Responsive Behavior — how it scales on mobile vs desktop, 6) Accessibility (A11y) — ARIA roles, attributes, screen reader behavior, touch target sizes, 7) Usage Guidelines — where to use vs where to use an alternative, 8) Edge Cases — long text, no results, many results, error states. Output the spec clearly with headers.
View Full Prompt