From brief to live prototypes: how I work with AI while staying in control of design decisions.
“Hey Olha, here’s the brief for the next project!”
Sounds familiar, right?
But between receiving a brief and handing off a design, there's a lot more happening than creating screens. Research, conversations, decisions, experiments, iterations—and now, AI is part of almost all of it.
AI has changed how quickly I can move through this process, but it hasn't removed the need to question requirements, understand users, or make thoughtful design decisions.
So, what does my design workflow actually look like in 2026? And where do I take the lead?
Step 1
Understand the brief and the domain
AI helps me learn faster. I decide what needs clarification
Before opening Figma, I need to understand the domain well enough to recognize what I don’t know.
I read the brief, explore terminology and the surrounding market using AI, search, and videos, then return to the brief with sharper questions for the team.
When I worked on a Trends discovery tool, my early questions were basic on purpose: What does it mean to explore trends? Who does this work, and what are they trying to learn? What is the terminology they use? Getting comfortable with the language helped me prepare for more meaningful conversations.
I don't treat the brief as a fixed list of requirements. As I explore the domain and understand the problem, I may challenge initial assumptions, suggest a different approach, or identify opportunities that weren't included in the original scope. When I do, I bring these ideas to the team and explain the potential value for users and the business.
Step 2
Research Users and Competitors
AI gathers the evidence. I verify the sources and connect the findings
I use AI to explore existing products, identify competitors, and find publicly available user feedback. This helps me understand common pain points, user expectations, and established UX patterns.
I ask AI to organize the findings and provide links to original reviews, screenshots, and product examples so I can verify the information myself.
The goal isn't to copy competitors or treat AI-generated summaries as research findings. It's to build context, understand existing patterns, spot opportunities, and identify questions worth exploring further.
Recently, I designed Leave management functionality for a payroll platform. I used AI to collect publicly available user feedback about similar products. It provided links to original sources, which I checked and captured as screenshots for evidence. Together with AI, I refined the strongest findings and highlighted which ones the team should consider for V1.
When I have access to real users, I prefer to talk to them directly.
I prepare interview questions based on the brief and early research, then use AI to identify blind spots and suggest additional questions. After the interviews, AI helps me summarize the conversations and highlight key findings, which I review myself.
For example, while working on the Trends Discovery Tool, the initial brief included several chart types. Instead of designing all of them, I spoke with users to understand which visualizations would actually help them explore trends.
Their feedback challenged our initial assumptions and changed what the team decided to build. We prioritized the most useful visualizations rather than implementing everything originally requested.
AI could suggest visualization options, but it couldn't tell us what our specific users needed. That insight came from talking to them.
Step 4
Define the flow and explore solutions
AI suggests alternatives. I shape the experience and evaluate the trade-offs
I usually start by mapping the core user flow in Figma, connecting user goals, business rules, and the sequence of actions.
AI helps me challenge the flow, identify missing states, and brainstorm alternative approaches. I might use Figma Agent or Claude to explore different interaction concepts, but I evaluate each suggestion against the product's logic and constraints.
When uncertainty or risk is high, I discuss the direction with users or the team before moving into detailed design. The goal isn't to generate as many options as possible, but to find an approach worth developing further.
Step 5
Build or extend the design system
Faster setup doesn't mean skipping the details
For an existing product, I work with its established design system. For a new product, I create the foundations: colors, typography, design tokens, and reusable components.
Figma Agent speeds up this work significantly. I provide references and direction, then review and refine the output to ensure consistency, code-friendly tokens, and scalability. I treat AI as a junior design partner: it handles much of the groundwork, while I remain responsible for quality and structure.
For example, while working on the Leave Management feature, I had only a few component examples and brand colors to start with. Since I planned to build a live prototype to demonstrate the flow, I used Figma Agent to quickly set up design variables and reusable components, then reviewed and refined the results myself.
Step 6
Figma-first or Code-first
The project determines where I start, not the tool
I use two approaches depending on what I need to explore.
Code-first: When I want to experiment with a specific interaction, I may start directly in Claude Code. I first turn research findings, requirements, and product constraints into project rules so AI has the right context. Then I build a working prototype to explore the interaction quickly.
I review the generated result rather than accepting everything AI suggests. Sometimes it introduces unnecessary animations, inconsistent components, or interactions that don't fit the product. I simplify or change those elements based on the user's task and the existing design system.
Figma-first: When I want more control over the UX and visual direction, I start by designing the core screens in Figma. I may use Figma Agent to extend the flow with existing components, then move into Claude Code to build a live prototype. This gives me space to think through interaction states and edge cases before implementation.
I often move between the two. A working prototype can reveal a missing state, while returning to Figma can help me clarify an interaction that's difficult to explain through prompts alone.
Neither approach is automatically better. I choose based on the problem and what I need to learn.
Step 7
Test the working experience
From early validation to a polished, handoff-ready experience
I start with a draft live prototype, built using Claude Code in VS Code and shared with users or teammates through Vercel. A working experience helps reveal issues that static screens might miss: confusing interactions, missing states, or unexpected behavior. I may also show alternative designs in Figma or quickly create variations to discuss different approaches.
Sharing a working prototype also makes team discussions more concrete. Instead of explaining interactions through static screens, I can demonstrate how they behave, discuss alternatives, and gather feedback before development.
Based on that feedback, I iterate on the prototype, gradually turning the initial draft into a polished, almost production-ready UI with refined interactions and states, ready for developer handoff.
The prototype evolves from a tool for testing ideas into a clear reference for implementation, even if the underlying code isn't production-ready.
Step 8
Check edge cases and accessibility
AI helps spot potential issues. I review and verify them
Once the main direction is validated, I use AI as an extra pair of eyes to review the experience more thoroughly.
I ask it to identify missing steps, gaps in user flows, overlooked edge cases, and situations that might confuse users. It's especially useful for exploring what happens outside the happy path.
I also use AI to flag potential accessibility issues based on WCAG guidelines, including contrast, interaction states, and keyboard navigation.
AI doesn't catch everything, and its feedback isn't a complete accessibility audit. I review the suggestions, verify relevant issues, and make the necessary improvements before moving forward.
Step 9
Handoff and post-launch work
My responsibility doesn't end at handoff
At handoff, I make sure the team understands the intended behavior, not just how the screens look. Figma Agent helps me prepare specifications, and I add supporting documentation or references in GitHub when needed.
I still review the documentation for missing states, ambiguous interactions, and inconsistencies between the design, prototype, and implementation notes.
After launch, I review the implemented feature to make sure it works and behaves as intended. I also collect user feedback, identify opportunities for improvement, and iterate on the experience based on what we learn from real usage.
Takeaways
What I don’t delegate to AI
AI supports the process. I remain responsible for the decisions and outcomes
AI is involved in almost every stage of my workflow, helping me research, explore ideas, design, and prototype faster. But delegating tasks isn't the same as delegating decisions. I still take responsibility for understanding the problem, challenging assumptions, prioritizing user needs, and making sure the experience works for real people.
My workflow will keep evolving as the tools improve. But the goal stays the same: make better product decisions and create better experiences, not just produce designs faster.
“I'm not particularly loyal to any tool. If something helps me work better, I'll try it.”
My current toolkit includes Claude and ChatGPT for research, brainstorming, and reviewing ideas; Figma and Figma Agent for design and design systems, user flows, and interface design; and Claude Code with VS Code for building interactive prototypes. I use Vercel to share prototypes for testing and GitHub to manage code and documentation.
My toolkit will keep changing, and that's part of what makes this work exciting. I'm always exploring new tools and approaches, keeping what genuinely improves my process.