Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.
Before making changes, deeply understand the context:
Discover the design system: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
CRITICAL: If something isn't clear, ask. Don't guess at design system principles.
Analyze the current feature: Assess what works and what doesn't:
Create a normalization plan: Define specific changes that will align the feature with the design system:
IMPORTANT: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
Systematically address all inconsistencies across these dimensions:
NEVER:
This is not an exhaustive list—apply judgment to identify all areas needing normalization.
After normalization, ensure code quality:
Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.