ClaudeAdvanced
Design System Component Spec.
Optimized for Claude, this prompt is specifically designed for design system documentation and engineering handoff. Tested for 2026 cognitive model architectures.
🎨
The Prompt Template
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.
#design system#UX#Figma#UI component
Best Used For
Design system documentation and engineering handoff. This template provides a structured foundation for design & ux workflows, ensuring Claude understands the specific constraints and persona required for high-quality output.
Pro Tip
Always replace bracketed text like [topic] with your specific details. Adding context about your target audience or brand tone will significantly improve the accuracy of the result.