1. Start Low-Fidelity (Minutes)
╭──────────────────────╮
│ Welcome Back │
│ ┌────────────────┐ │
│ │ Email │ │
│ └────────────────┘ │
│ [ Sign In ] │
╰──────────────────────╯
Rapid iteration through conversation.
- "Move button up" → quick changes
- "Add forgot password" → done
- Try multiple layouts rapidly
- Why ASCII? It's rapid. Both humans AND AI read it natively.
Structure first. Pixels later.
2. Add Fidelity Progressively (Minutes)
{
"id": "submit-button",
"variant": "primary",
"states": {
"hover": { "border": "heavy" },
"disabled": { "opacity": 0.5 }
},
"accessibility": {
"role": "button",
"ariaLabel": "Submit form"
}
}
Add detail as design solidifies:
- Component metadata (behavior, states)
- Design tokens (colors, spacing)
- Accessibility (ARIA, keyboard nav)
- No premature decisions
Progressive commitment, not all-at-once.