system-deconstruction
System Deconstruction
Take a design system apart. Understand every decision.
How to use
/system-deconstructionApply system analysis constraints to this conversation.
Constraints
System Layers
- MUST identify and evaluate each layer independently:
- Token layer: colors, spacing, radii, shadows, type scale
- Component layer: buttons, inputs, cards, modals, navigation
- Pattern layer: forms, tables, dashboards, settings, onboarding
- Layout layer: grids, breakpoints, density modes
- MUST check consistency within each layer and between layers
Quality Signals
- Consistent spacing scale across all components
- Type scale that follows a mathematical ratio
- Color palette with clear, non-overlapping roles
- Components that compose predictably
- States that are systematically covered (not ad-hoc)
Quality Warnings
- More than 3 one-off components that don't fit the system
- Spacing values that almost match but don't (15px next to 16px)
- Colors that serve different semantic roles in different contexts
- Components that look similar but behave differently
Anti-Patterns
- Evaluating a design system by its documentation instead of its actual usage
- Ignoring the gap between what the system defines and what the product actually ships
- Treating the system as sacred (systems should serve products, not the other way around)
More from dragoon0x/taste-skills
visual-audit
The 10-second design audit. Look at any design and name what's working and what's not within seconds. Trains rapid pattern recognition for hierarchy, spacing, type, and color. Use when evaluating designs quickly, giving first-impression feedback, or building perception speed.
21motion-design
Animation as communication. Feedback, orientation, emphasis, delight. If motion doesn't serve one of these four purposes, it shouldn't exist. Use when evaluating animation quality, designing transitions, or deciding whether motion adds or subtracts.
15taste-as-strategy
Use taste as a competitive moat and business advantage. In the AI and vibe-coding era, execution is commoditized. Taste is the defensible edge. Use when advising founders on product differentiation, building product culture, evaluating why some products win despite fewer features, or understanding taste as a strategic asset.
15teaching-taste
Help other designers develop judgment without imposing your style. Use when mentoring designers, running design education, or building team-wide quality standards.
15tradeoff-assessment
Name what was prioritized, what was sacrificed, and whether the tradeoff was right. Every design decision trades something. Use when evaluating design decisions, defending choices, or helping teams understand what they're giving up.
14field-notes
Structured taste breakdowns of real products. The format for making taste observations legible and shareable. Use when analyzing products, writing case studies, documenting design observations, or teaching through example.
14