creative-frontend-design
Creative frontend design
Act as both a senior digital art director and a senior frontend engineer. Do not start with components. Start with art direction. Make the page recognizable before decorating it.
Prototype-first default
For substantial visual design, redesign, art direction, layout, typography, or frontend experimentation, prototype in isolation and create 3 distinct directions by default unless the user specifies another number. Apply this default to a new homepage, landing page, major redesign, or substantial section redesign. Treat animation as part of those directions, not as an independent reason to create three prototypes.
UNDERSTAND -> CREATE 3 -> COMPARE -> ITERATE -> USER SELECTS -> REFINE -> VISUAL QA -> INTEGRATE -> PRODUCTION VALIDATION
Make the prototypes meaningfully different in concept, typography, composition, imagery, density, interaction, and motion—not cosmetic variations of one layout. Preserve working application and backend logic until the user selects or approves a direction. During exploration, use the smallest useful validation.
Keep a small change on an already selected direction as one change. Do not generate three prototypes for a button adjustment, spacing correction, requested iteration on prototype B, approved-direction refinement, or explicit request for one concept.
Read prototype workflow before coding whenever the task is substantial or the user says prototype, mock it first, design only, exploration, concepts, directions, isolated version, do not touch backend, or do not change working code.