Component Prioritization Matrix
Identify, inventory, and prioritize which design system components to build first based on usage, impact, and dependencies.
Use Case
Planning design system component builds, prioritizing which components to create first, or auditing existing component libraries.
Prompt
Help me create a component inventory and prioritization plan for our design system. Include:
1. Component Discovery
Audit existing product to identify:
- All UI components currently in use
- Component variations and states
- Inconsistent versions of the same component
- Missing components that are needed
- Component frequency across pages/screens
2. Component Categories
Organize components into:
- Foundational: Typography, colors, spacing, icons, grid
- Basic: Buttons, inputs, checkboxes, radio buttons, toggles
- Forms: Text fields, select dropdowns, date pickers, file uploads
- Navigation: Nav bars, tabs, breadcrumbs, pagination, side nav
- Feedback: Alerts, toasts, modals, tooltips, progress indicators
- Display: Cards, lists, tables, avatars, badges, tags
- Layout: Containers, dividers, spacers, sections
- Complex: Data tables, charts, calendars, rich text editors
3. Prioritization Criteria
For each component, evaluate:
**Usage Frequency** (1-5 scale)
- How often is this component used across the product?
- 5 = On every page, 1 = Rarely used
**Impact** (1-5 scale)
- How much would standardizing this component improve consistency?
- How much time would it save designers/developers?
- 5 = High impact, 1 = Low impact
**Complexity** (1-5 scale)
- How difficult is this component to build well?
- How many variations and states does it have?
- 5 = Very complex, 1 = Very simple
**Dependencies**
- What other components does this depend on?
- What components depend on this one?
- Which should be built first?
**Current State**
- How inconsistent are current implementations?
- Are there accessibility issues?
- Are there performance problems?
4. Priority Matrix
Create a 2x2 matrix:
- High Usage + High Impact = **Must Build First** (P0)
- High Usage + Low Impact = Build Second (P1)
- Low Usage + High Impact = Build Third (P2)
- Low Usage + Low Impact = Build Later (P3)
5. Build Order Recommendation
For each priority tier, list:
- Component name
- Why it's in this tier
- Estimated effort (S/M/L)
- Dependencies to resolve first
- Suggested timeline
6. Phase 1 Components (Must Build First)
Typically includes:
- Design tokens (colors, typography, spacing)
- Button (primary, secondary, tertiary, states)
- Input fields (text, textarea, states, validation)
- Basic icons set
- Grid system
Rationale: Most used, other components depend on these
7. Phase 2 Components (Build Second)
Common components:
- Form controls (checkbox, radio, select, toggle)
- Navigation (tabs, nav bar)
- Feedback (alerts, toasts)
- Cards and lists
Rationale: High usage, depends on Phase 1
8. Phase 3+ Components (Build Later)
Complex or less common:
- Data tables
- Rich text editors
- Complex charts
- Date pickers
Rationale: Lower usage or high complexity
9. Component Relationships Map
Show dependencies:
- Modal → Button, Icon
- Data Table → Button, Checkbox, Sort Icon, Pagination
- Form → Input, Button, Checkbox, Radio, Select
10. Resource Planning
- Estimated design time per phase
- Estimated development time per phase
- Team members needed
- Tools and resources required
Format as a comprehensive component prioritization plan with clear build order and rationale.How to use
- 1Before running the prompt: Audit your product to list all components currently in use
- 2Add context: Describe your product and team. Example: "SaaS product with 50+ screens, team of 3 designers and 5 developers, using React and Figma."
- 3List existing components: Share your component inventory. Say "Current components: [list components]"
- 4Mention pain points: Describe inconsistencies. Example: "We have 8 different button styles, accessibility issues in forms."
- 5Paste the prompt into your preferred AI tool, like ChatGPT or Claude
- 6Review the priority matrix: Check if P0 components make sense for your product
- 7Adjust for your context: Modify priorities based on your team's capacity and product needs
- 8Share with team: Use the plan to align on build order and timelines
Pro Tips
- • Include screenshots: Share examples of component inconsistencies to get better prioritization advice
- • Consider quick wins: Sometimes build simple high-impact components first for momentum
- • Account for dependencies: Always build foundational components (tokens, buttons) before complex ones
- • Validate with usage data: Use analytics to verify which components are actually most used
- • Plan in phases: Don't try to build everything at once - focus on one phase at a time
- • Get team input: Share the prioritization matrix with designers and developers for feedback
Tags
Related Prompts
Logo System Spec Writer
Turn a chosen logo direction into production-ready logo system specs: lockups, spacing, sizing, color, and usage rules.
SMART Goal Creator
Turn a vague objective into clear goals using the SMART framework: Specific (clear outcome and scope), Measurable (metrics or observable signals), Achievable (realistic given constraints), Relevant (aligned to user or business value), and Time-bound (deadline or milestones). Includes success criteria and checkpoints.
Research Request Prioritization
Score and rank incoming research requests against capacity using business impact, urgency, knowledge gap, feasibility, and customer impact (weighted), plus roadmap order and a template to communicate deprioritization.
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.