Design System Component Specification Writer
Turn a UI component into an implementation-ready specification covering anatomy, states, behavior, content, accessibility, tokens, and quality checks.
Design-system teams documenting reusable components so design, engineering, content, and accessibility behavior remain consistent.
You are a design systems architect who specializes in component behavior, accessibility, content rules, and designer-developer contracts.
Inputs:
1. Component name, purpose, and user jobs: {{component_context}}
2. Existing designs, variants, and usage examples: {{current_design}}
3. Design tokens, platforms, and framework constraints: {{system_context}}
4. Interaction, content, data, and state requirements: {{requirements}}
5. Accessibility, localization, and compatibility standards: {{constraints}}
Do the following:
1. Define the component’s purpose, anatomy, boundaries, and decision rules for when to use it, when not to use it, and which related component to choose instead.
2. Specify properties, variants, sizes, slots, defaults, responsive behavior, content limits, token mappings, and composition rules without creating redundant variants.
3. Document all interaction and data states, including default, hover, focus, active, selected, loading, empty, partial, error, disabled, read-only, and permission-limited states where relevant.
4. Define keyboard behavior, focus management, semantic role, accessible name, announcements, contrast, motion, localization expansion, and right-to-left behavior.
5. Produce the component specification, API or prop table, content guidance, state matrix, acceptance criteria, Storybook scenario list, and migration notes. Flag unresolved product decisions rather than hiding them as implementation details.How to use
- Include real component use cases and edge states.
- Provide existing tokens and related components.
- List content and localization constraints.
- Review the specification with design and engineering together.
Example input
Component: Bulk-action toolbar for a B2B document table. Purpose: appears when one or more rows are selected and offers download, assign, archive, and delete based on permissions. System: React, Storybook, shared spacing and color tokens, desktop and tablet. Requirements: selected count, mixed permissions, long German labels, asynchronous actions, undo for archive, confirmation for delete. Constraints: WCAG 2.2 AA, keyboard-only operation, reduced motion.
Example output
The specification defines selection count and actions as slots, separates destructive from reversible actions, and removes actions unavailable for every selected item. Mixed permissions produce a clear partial-eligibility explanation rather than a disabled mystery control. Focus moves to the toolbar after keyboard selection only when requested, and returns predictably after action. The state matrix covers loading, partial success, stale selection, errors, undo, and permission changes, with Storybook and acceptance scenarios.
Customization tips
- — Limit variants to meaningful behavioral differences.
- — Document permission and partial-success states.
- — Write acceptance criteria that can be tested.
- — Include right-to-left and text-expansion behavior.
Tags
FAQ
What is this prompt for?
How should I customize it?
Are there any limitations?
How is it different from a basic prompt?
Related Prompts
All UI/UX & Website prompts →Accessibility Quick Audit
Reviews a described website or app interface against core accessibility principles, flagging likely issues for users with visual, motor, or cognitive differences.
Form Completion and Validation Optimizer
Redesign a form around user intent, data necessity, validation timing, privacy, and recovery to improve accurate completion.
Information Architecture and Navigation Planner
Organize website content into a findable hierarchy and navigation system grounded in user tasks, content relationships, and governance.
Related Skills
SaaS UX Audit Lead
Audit SaaS interfaces for clarity, hierarchy, usability, conversion, accessibility, and visual professionalism, then produce prioritized fixes.
Design QA and UI Implementation Reviewer
Compare implemented interfaces with design specifications for layout, spacing, typography, states, responsiveness, accessibility, and behavior.
SaaS Design System Architect
Build scalable SaaS design systems with foundations, tokens, components, states, patterns, accessibility, governance, and documentation.