Wireframing 8 screens in one session with Claude and Figma
The restart: in one working session, Claude and I turned the PRD into wireframes for all 8 key screens in Figma, two directions each.
Turn the PRD into wireframes for every key screen, fast enough to compare directions side by side
Two versions of every screen made each one a real decision.
In late April 2026, I picked the Check In App back up after more than a year. I sat down with Claude for one long working session: synthesize the research, write a PRD, then wireframe every key screen in Figma.
Claude worked directly in my Figma file. For each of the 8 screens in the PRD, it built two versions side by side, so I could compare directions instead of settling on the first one:
- Landing: stacked patient-type cards vs. side-by-side tiles
- Reason for visit: a vertical list vs. a card grid, with a line explaining why the answer matters
- New patient form: one question at a time vs. a sectioned form, both with a "Why are we asking this?" disclosure
- Returning patient: one confirm card vs. three stacked task cards
- Uncomfortable question: a soft "Prefer not to answer" vs. a deliberate pause with equal-weight Answer and Skip buttons
- Pre-fill confirmation: celebratory vs. a receipt-style summary
- Waiting room: three concepts, an activity hub, trivia and a health feed
- "I don't know" state: an inline help panel vs. an AI companion
Along the way, we set up a starter design system as Figma variables: a soft blue-lavender palette, Fraunces for headings, Rubik for UI text, and spacing and radius scales.
What worked
- Two directions per screen. Seeing both versions side by side turned each screen into a real decision.
- The PRD as the brief. Every screen traced back to a feature or a research finding, so nothing was decoration.
- A session summary at the end. Claude wrote up what we built and where to start next, so the next session didn't start from zero.
What didn't
- Eight open decisions. Two directions per screen is great for exploring, but every one still needs a call, and the waiting room is still undecided.
- The design system stayed a placeholder. The variables existed, but no real components yet. In May, I experimented with having Claude build it out, with mixed results.
Two versions of every screen made each one a real decision.
After a year away, the hardest part of a side project is momentum. One focused session that went from research to wireframes gave the project shape again.
It also changed my role. Claude drafted the screens and I judged them. Comparing two versions of every screen kept me in the designer's seat, deciding what the product should feel like instead of pushing pixels.