Side project · Designing with AI
Could we design with AI and skip the pixel-perfect step?
Discovery and handoff became about 50% faster.
- My part
- Process, prototypes
- With
- BA teammates (requirements), devs
- Period
- 2026
- Tools
- Pencil.dev with Claude
The problem
The usual process had seven steps: the BA gathers and writes requirements, the designer draws wireframes, the BA checks, the designer builds a hi-fi prototype, then developers start.
What I found
Most of the waiting sat in two places: getting from requirements to something people could react to, and getting from an approved design to code.
The decision
Option A
Keep the classic process: wireframes by hand, then a pixel-perfect prototype in Figma.
Why not: slow at both ends.
Option B
Why not
Option C · chosen
AI drafts, people decide: AI makes the wireframe, and the hi-fi is built directly in HTML.
Why this one: developers get code.
The solution
1 Wireframe by AI
AI turns the UI requirements into a first wireframe.
2 Hi-fi in HTML
The polished version is built as a working page, not a mockup.
3 Handoff as code
Developers receive code, or it goes straight to test.
Result
faster discovery and handoff
pixel-perfect mockups by hand
source of truth: Figma
What I'd do differently
AI output needs a lot of fine-tuning. Figma is still the single source of truth, for documentation and for training material.