Agentic Chat UX
How I used AI to speed up the timeframe from concept to high-fidelity prototype in 4 days
AI Tools Claude Skills User Testing Prototyping Product Design
Challenge
To turn technical requirements into an interactive prototype in days, not weeks. I immediately ran a whiteboarding session with the lead engineer to uncover requirements and technical constraints, and to define the MVP versus the north star deliverable. I created a chat-based AI audit widget in 3 days for a major Klaviyo conference demo.
My Role
Lead designer and AI workflow architect, responsible for translating complex technical requirements into a high-fidelity product experience.
Primary user testing moderator working with users to validate concepts, identify gaps, and rapidly iterate on the interface.
Skill creator creating and orchestrating AI-powered skills to accelerate the path from concept to working prototype.
Solution
I used an agentic design-to-code workflow to turbocharge the prototyping process. I used two Claude skilled I designed to get as close to one-shot PRs into GitHub. From there, I deployed working prototypes to Vercel and put them directly in front of users for rapid feedback.
This workflow enabled me to create and test three viable options within days, rather than following a traditional 10 day sprint design cycle.
Impact
My expertise in agentic workflows, combined with my ability to define and communicate complex technical and design requirements, enabled me to deliver a high-fidelity, working prototype within a week. The accelerated workflow made it possible to iterate daily, validate multiple directions quickly, and move the concept toward production 40% faster.
Turbocharged Workflow
As an expert in agentic workflows, I converted a dense tech doc into a high fidelity prototype in 4 days - 6 days faster than standard turnaround.
Engineering PRD
I reviewed the technical scope with the lead engineer and quickly white-boarded how the user flow could evolve to support versioning and undo/redo in the editor.
Collaborating directly with engineering helped me uncover a strong, actionable direction for the design.
User Flows
Within hours of the white board session, I used Claude to transform the technical PRD into a Figjam, which I then reshaped into a clear user flow.
I shared it with the design and engineering teams to build alignment on each phase, from MVP to the polished final experience.
AI Chat POC
Sometimes, a good old-fashioned wireframe is all you need to test a concept. It was effective in showing two potential user flows and how widget interactions could work with the LM behind the scenes.
Putting It All Together
I had the technical feasibility, stakeholder buy-in, usability POCs, and a clear user flow. I brought it all together within days using high-fidelity designs in Claude, then pushed the work to Git so other designers could fork, iterate, and build on it.
That’s the power of this workflow. The design isn’t tethered to a Figma file or my desktop. It becomes something the entire team can access, evolve, and build from in code which means shipping to prod faster.