Design Frontend

Use before substantial frontend design or redesign work.

Workflow

1. Identify the screen job.

   • Name the user's current goal.
   • Pick one primary action for the state.
   • Name the state: empty, loading, normal, error, confirming, or done.

2. Ground the visual direction.

   • Read named local design docs, screenshots, mockups, or brand references.
   • Inspect images directly when available.
   • Extract rhythm, density, hierarchy, typography, spacing, color roles, and component behavior.