frontend-direction

name	frontend-direction
description	Use for any request to create or redesign a UI, landing page, dashboard, hero, marketing page, or other visual frontend.

frontend-direction

Before coding, write:

1. visual thesis
2. content plan
3. interaction thesis
4. tokens

Hard rules

• The first viewport must read as one composition.
• The brand or product must be obvious on the first screen.
• Use one dominant visual anchor.
• Default to no cards, especially in the hero.
• Each section gets one job.
• Keep copy short and concrete.
• Limit the design system to at most two typefaces and usually one accent color.
• Define tokens up front.
• Add only two or three restrained motions that improve hierarchy.
• If browser tools are available, verify desktop and mobile behavior after implementation.
• If screenshots, mood boards, or image search are available, use them early.
• If Figma context is available, use it before inventing layout.

Avoid

• generic SaaS card grids
• hero cards
• floating badges
• pill clusters
• stat strips
• busy imagery behind text
• filler copy
• decorative motion
• weak first-screen branding
• purple-on-white defaults

Output

## Visual thesis

## Content plan

## Interaction thesis

## Tokens