Component Prioritization Matrix
Identify, inventory, and prioritize which design system components to build first based on usage, impact, and dependencies.
Actions
Tags
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
Related Prompts
Brand Consistency Checklist
Create a brand governance review checklist for all teams and channels — covering visual identity, verbal identity, and overall brand fit with a pass/flag/fail scoring system.
Visual Identity System Spec
Turn an approved logo direction into a production-ready full visual identity spec — logo system, color palette, typography, imagery style, and graphic elements.
Product Line Naming System
Build a systematic naming architecture for your product portfolio — choosing the right model (branded house, house of brands, etc.) and defining scalable naming conventions.
Brand Launch Checklist
Generate a complete brand launch or rebrand rollout checklist — every asset, every team, every channel — sequenced from pre-launch through go-live and post-launch.