Taking a Design Further with Claude Code
From a real product brief to a working Knowunity prototype in 2.5 weeks.
Overview
Knowunity is a study app. The brief was to design a practice activity where students explain a concept in their own words and receive written feedback.
During a 2.5-week sprint with Yummy Labs, I took the project from brief to deployed prototype. I designed the experience, extended Knowunity’s Figma design system, and built the interface with Claude Code, documenting the components in Storybook.
The work kept coming back to one question: how do you encourage someone to keep trying without overstating what they know?
Designing the feedback
Explaining what you know can be uncomfortable. You lose your train of thought, leave something out, or discover that a familiar concept is harder to describe than you expected. The experience needed to make those moments manageable, with a hint, another attempt, or a way to move on.
The summary needed to give students a clear account of their progress. Remembering something independently, answering with a hint, and repeating an answer you’ve just read each tell a different story.
Two details helped me make that distinction tangible.
- Give a second attempt its own language. The original summary used the same wording after an initial attempt and after a review. Someone could read an answer, try again, and receive a result that sounded as though they had known it all along. I changed the review summary to identify which topics had been recalled during review. The score stayed the same; the wording explained what it counted. Students could still feel pleased with a successful attempt while recognizing that the answer was fresh in their memory. That became a useful rule for the feedback: acknowledge the progress and keep the circumstances visible.
- Remember the choice someone already made. Students could type when speaking wasn’t practical. Yet returning for review initially switched the interface back to voice. Someone who had already chosen to type had to make that choice again. They might still be on a bus, in a shared room, or somewhere they felt uncomfortable speaking. I updated the review flow to restore their input preference. It removed an unnecessary step and prompted me to look more closely at choices across the experience: what should carry forward so someone can simply continue?
Building with Claude Code
I started by working through the brief, reference screens, and existing design system. Establishing the flow and deciding what belonged in the sprint gave Claude Code a clear starting point for implementation.
I set a few practical rules for the build. Existing components came first, and their documented properties had to be checked before use. When a screen needed something the library couldn’t provide, the gap went into a log so I could decide how to address it.
I also added an automated check for design-token violations, with exceptions recorded explicitly. Storybook gave me a place to inspect component states and check changes before using them across the interface.
Once the prototype was running, I could examine the experience between screens. I could switch input methods, leave and return to a review, and see what happened when microphone access was unavailable. Each interaction gave me something concrete to assess and revise.
Testing and refinement
I used human walkthroughs to understand where the experience was confusing, alongside separate AI review passes against a shared rubric.
One review uncovered a missing recovery path: students could enter the review flow without seeing the initial microphone permission screen. If access was denied, tapping the microphone appeared to do nothing. I added two options: retry microphone access or continue with text.
The reviews also clarified the next steps: standardize retry behaviour and improve feedback during recording and processing. The visual states are in place; their timing and transitions still need refinement.
What I’m taking forward
The sprint produced three tangible outputs:
- A live prototype covering the practice flow, feedback, and review.
- A component library for this project, built from Knowunity’s design system and documented in Storybook.
- A reusable AI toolkit containing workflow rules and review methods for future projects.
Claude Code helped me carry more of the work through within the time available. I could make a design decision, try it in a working interface, inspect the result, and make another pass.
I still had to decide what the product should say, which details mattered, and whether a change addressed the problem. Having the implementation within reach gave me more opportunities to examine those decisions and follow through on what I found.
Speech recognition and answer evaluation were simulated. The sprint did not measure learning outcomes.
