Design in Code
Fast, low-fi planning before visual polish.
Start low-fi
- Plan the layout with ASCII wireframes (Markdown or a comment block).
- Build structure first; make it usable before pretty.
- Use constraints early (grid, spacing, type scale).
Copy what works
- Start from a gold-standard product; match layout, spacing, and hierarchy, then adapt to context.
- When refreshing a product, keep a live old/new toggle behind a feature flag to compare fast.
- Tune colour and token changes in the running product, then sync exact values to the design system.
- During polish ask: what should hold focus, which controls are louder than the task, which borders or icons can be removed with no loss of meaning.
Tools (defaults)
- shadcn/ui + Tailwind tokens.
- Keep components boring and conventional for fast iteration.