Frontend Design Fix - React

Overview

Transform bland, generic React component designs into visually distinctive interfaces by systematically applying the 5 design dimensions from Anthropic's design framework.

Core Workflow

1. Analysis Phase

• Read existing React component files and CSS/CSS-in-JS
• Identify generic elements (Inter/Roboto fonts, purple gradients, centered layouts, no animations, solid backgrounds)
• Score current design against anti-patterns checklist
• Generate "before" snapshot with metrics

2. Assessment Phase

• Understand brand/context from existing content and component props
• Identify target audience and purpose
• Determine appropriate aesthetic direction based on component usage