Frontend Design Fix - HTML/CSS

Overview

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

Core Workflow

1. Analysis Phase

• Read existing HTML/CSS files
• 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 markup
• Identify target audience and purpose
• Determine appropriate aesthetic direction based on content