Frontend Design

Build distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Gotchas

• Adding import { motion } from 'motion/react' without checking the dependency is installed will break the build. Verify the package exists in package.json before using it.
• Google Fonts CDN calls create third-party network requests that may be blocked by enterprise CSP policies or raise GDPR concerns. Always include local font fallbacks.

Instructions

Step 1: Understand Requirements

Extract from the user's request:

• What to build: Component, page, full application, or beautification of existing UI
• Framework: HTML/CSS/JS, React, Vue, etc. — infer from the project if not stated
• Purpose: What problem does this interface solve? Who uses it?
• Constraints: Accessibility, performance, branding, or technical requirements

If beautifying existing code, read it first to understand the current structure and framework.