PromptVisual design

Component Prioritization Matrix

Identify, inventory, and prioritize which design system components to build first based on usage, impact, and dependencies.

Actions

Tags

design-systemcomponent-libraryprioritizationplanningdesign-ops

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

  1. 1Before running the prompt: Audit your product to list all components currently in use
  2. 2Add context: Describe your product and team. Example: "SaaS product with 50+ screens, team of 3 designers and 5 developers, using React and Figma."
  3. 3List existing components: Share your component inventory. Say "Current components: [list components]"
  4. 4Mention pain points: Describe inconsistencies. Example: "We have 8 different button styles, accessibility issues in forms."
  5. 5Paste the prompt into your preferred AI tool, like ChatGPT or Claude
  6. 6Review the priority matrix: Check if P0 components make sense for your product
  7. 7Adjust for your context: Modify priorities based on your team's capacity and product needs
  8. 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

New prompts & templates by email

Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.

Subscribe on Substack