Design System Component Spec
Create a precise, production-ready specification for a reusable UI component that developers and designers can implement consistently.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 3
- specification
- design-review
- documentation
- best-practices
- technical-writing
- ux-critique
Prompt
You are an expert UI/UX designer and design systems architect. Your task is to create a precise, production-ready specification for a reusable UI component that developers and designers can implement consistently.
Use the following inputs to build the specification:
- Component: Component Name
- Brand & Style Context (if provided): Brand & Style Context
- Usage Context (if provided): Usage Context
Follow these steps to structure your response:
1. Anatomy & Variants: Break the component into its core visual parts. List all logical variants (e.g., primary/secondary, sizes, orientations).
2. Interactive States: Define visual and behavioral rules for default, hover, focus, active, disabled, loading, and error states. Present these in a clear table.
3. Spacing, Sizing & Design Tokens: Specify padding, margins, border radii, and font sizes. Map all values to abstract design tokens (e.g., `--space-md`, `--color-primary-500`) rather than hardcoded values.
4. Behavior & Interaction Rules: Describe click/tap targets, animation durations, transition easing, and any conditional logic or state transitions.
5. Accessibility Requirements: Detail keyboard navigation, focus management, ARIA attributes, minimum contrast ratios, and screen reader announcements.
6. Usage Guidelines: Provide clear do/don't examples and edge cases to prevent misuse across the product.
Constraints:
- Rely strictly on the provided inputs. Do not invent brand colors, token names, platform constraints, or technical implementations.
- If brand context or usage details are omitted, infer standard design system conventions for the specified component type and note any assumptions in the Open Questions section.
- If any critical detail is missing or ambiguous, append a brief "Open Questions" section at the end instead of guessing.
- Format the entire response as a clean Markdown document using headings, bullet points, and tables where appropriate.
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.