Analyze and redesign the feature to perfectly match design system standards, aesthetics, and established patterns.
Mandatory Preparation
Invoke /design-frontend — it contains design principles, anti-patterns, and the Context Gathering
Protocol. Follow the protocol before proceeding. If no design context exists yet, run
/design-context first.
Plan
Before making changes, deeply understand the context:
Discover the design system: Search for design system documentation, UI guidelines, component libraries, or style guides. Study it thoroughly until you understand:
- Core design principles and aesthetic direction
- Target audience and personas
- Component patterns and conventions
- Design tokens (colors, typography, spacing)
If something is not clear, ask. Do not guess at design system principles.
Analyze the current feature: Assess what works and what does not:
- Where does it deviate from design system patterns?
- Which inconsistencies are cosmetic vs functional?
- What is the root cause — missing tokens, one-off implementations, or conceptual misalignment?
Create a normalization plan: Define specific changes that will align the feature with the design system:
- Which components can be replaced with design system equivalents?
- Which styles need to use design tokens instead of hard-coded values?
- How can UX patterns match established user flows?
Great design is effective design. Prioritize UX consistency and usability over visual polish alone.
Execute
Systematically address all inconsistencies across these dimensions:
- Typography: Use design system fonts, sizes, weights, line heights. Replace hard-coded values with tokens.
- Color and Theme: Apply design system color tokens. Remove one-off color choices.
- Spacing and Layout: Use spacing tokens. Align with grid systems.
- Components: Replace custom implementations with design system components.
- Motion and Interaction: Match animation timing and easing to other features.
- Responsive Behavior: Ensure breakpoints align with design system standards.
- Accessibility: Verify contrast ratios, focus states, ARIA labels.
- Progressive Disclosure: Match information hierarchy to established patterns.
NEVER:
- Create new one-off components when design system equivalents exist
- Hard-code values that should use design tokens
- Introduce new patterns that diverge from the design system
- Compromise accessibility for visual consistency
Clean Up
After normalization, ensure code quality:
- Consolidate reusable components into the design system or shared UI path.
- Remove orphaned code made obsolete by normalization.
- Verify quality: lint, type-check, test. Ensure no regressions.
- Ensure DRYness: consolidate duplication from refactoring.
1---2name: design-normalize3description: Audit and realign UI to match design system standards, spacing, tokens, and patterns. Use when asked about consistency, design drift, mismatched styles, tokens, or bringing a feature back in line with the system.4---56Analyze and redesign the feature to perfectly match design system standards, aesthetics, and established patterns.78## Mandatory Preparation910Invoke /design-frontend — it contains design principles, anti-patterns, and the Context Gathering11Protocol. Follow the protocol before proceeding. If no design context exists yet, run12/design-context first.1314---1516## Plan1718Before making changes, deeply understand the context:19201. **Discover the design system**: Search for design system documentation, UI guidelines, component libraries, or style guides. Study it thoroughly until you understand:21 - Core design principles and aesthetic direction22 - Target audience and personas23 - Component patterns and conventions24 - Design tokens (colors, typography, spacing)2526 If something is not clear, ask. Do not guess at design system principles.27282. **Analyze the current feature**: Assess what works and what does not:29 - Where does it deviate from design system patterns?30 - Which inconsistencies are cosmetic vs functional?31 - What is the root cause — missing tokens, one-off implementations, or conceptual misalignment?32333. **Create a normalization plan**: Define specific changes that will align the feature with the design system:34 - Which components can be replaced with design system equivalents?35 - Which styles need to use design tokens instead of hard-coded values?36 - How can UX patterns match established user flows?3738 Great design is effective design. Prioritize UX consistency and usability over visual polish alone.3940## Execute4142Systematically address all inconsistencies across these dimensions:4344- **Typography**: Use design system fonts, sizes, weights, line heights. Replace hard-coded values with tokens.45- **Color and Theme**: Apply design system color tokens. Remove one-off color choices.46- **Spacing and Layout**: Use spacing tokens. Align with grid systems.47- **Components**: Replace custom implementations with design system components.48- **Motion and Interaction**: Match animation timing and easing to other features.49- **Responsive Behavior**: Ensure breakpoints align with design system standards.50- **Accessibility**: Verify contrast ratios, focus states, ARIA labels.51- **Progressive Disclosure**: Match information hierarchy to established patterns.5253**NEVER**:5455- Create new one-off components when design system equivalents exist56- Hard-code values that should use design tokens57- Introduce new patterns that diverge from the design system58- Compromise accessibility for visual consistency5960## Clean Up6162After normalization, ensure code quality:6364- Consolidate reusable components into the design system or shared UI path.65- Remove orphaned code made obsolete by normalization.66- Verify quality: lint, type-check, test. Ensure no regressions.67- Ensure DRYness: consolidate duplication from refactoring.
stuffbucket