frontend-dev

• Building web components or pages
• Creating dashboards or applications
• Styling or beautifying web UI
• React, Vue, HTML/CSS development
• Landing pages or marketing sites

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick a direction: brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
• Constraints: Technical requirements (framework, performance, accessibility)
• Differentiation: What makes this memorable?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

Typography

Choose fonts that fit the aesthetic. Pair display fonts with body fonts thoughtfully. Consider the project's existing typography system first.

Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency. Strong primary colors with intentional accents create memorable interfaces.

Motion

Use animation purposefully - for feedback, transitions, and delight. Focus on high-impact moments over scattered micro-interactions.

Spatial Composition

Consider unexpected layouts, asymmetry, overlap, grid-breaking elements. Balance negative space with density based on the design direction.

Visual Texture

Create atmosphere through background treatment, shadows, borders, and layering. Avoid flat, sterile defaults.

NEVER create generic AI-generated aesthetics:

• Predictable layouts without character
• Cookie-cutter components that could be from any project
• Designs that converge on the same "safe" choices

Interpret creatively. Make unexpected choices. No two interfaces should look the same.

Match implementation complexity to the aesthetic vision:

• Maximalist designs need elaborate detail
• Minimalist designs need restraint and precision

Commit fully to the chosen direction.