| 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:
- visual thesis
- content plan
- interaction thesis
- 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