Frontend Design Fix - Vue

Overview

Transform bland, generic Vue 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 Vue component files (.vue, CSS modules, styles)
• 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