I Stopped Connecting Screens. I Started Designing Behavior

Hiring takes time, especially in the early stages. Recruiters spend hours defining roles, aligning with hiring managers, screening candidates, and manually moving people through the pipeline. Much of that time is spent clarifying expectations and filtering information. That led me to a simple question:

How might we reduce hiring effort by leveraging AI?

That’s how Workable Agent was born a conversational AI tool that helps recruiters define roles, ask clarifying questions, structure job requirements, and move the top candidates forward in the pipeline. It’s not just a chatbot. It’s not just a job description generator. It’s an AI collaborator embedded in the hiring workflow.

[embed]

Designing the experience

When I started exploring the experience, I experimented with different approaches. Should it feel like a chat? A structured form? Or a collaborative document where recruiters and AI co-create the role definition? After many iterations, the core interaction became clear.

The experience begins with one focused question:“Who are you looking to hire?” From there, the Agent guides the user with step-by-step clarifying questions. Once enough information is gathered, the interface transitions into a split view (the chat history on the left and a live view of the Ideal Candidate Profile on the right) Instead of simply filling out a form to create a new role, recruiters can watch the role take shape in real time as the conversation unfolds.

But that’s when the real challenge appeared:

How do you prototype something that doesn’t follow a fixed sequence?

Screens of the conversational flow

Why traditional prototyping wasn’t enough

Traditional prototyping assumes a linear path: one screen after another, with predefined transitions and predictable behavior. My design wasn’t linear. Users could type freely. Every input could reshape the Ideal Candidate Profile.

The system needed to interpret context, adapt in real time, and guide the conversation forward. Static screens can simulate predictable paths, but they struggle to capture the fluidity of a conversation or the unpredictability of real user input.

To truly understand the experience, I needed to test real scenarios: users improvising, skipping steps, or introducing unexpected details, and observe how the system reacted. That s when it occurred to me:

Instead of fighting the limitations of traditional prototyping, why not leverage AI itself?

A typical Figma prototype

The making of

Step #1 — Starting point

I began by uploading a screenshot of the first screen and asked Figma Make to recreate it. This wasn’t just about replicating the visuals it was about setting the stage for the interaction itself. The screen had to show not only the layout but also how the conversation would start. With that first screen in place, I finally had a foundation to begin iterating.

Creating the very first screen of the flow

Step #2 — Polishing

Once the first screen was complete, I shifted my focus to refining the UI. Details like spacing, alignment, and replacing the avatar became important because they shaped how the Agent would ultimately look and feel. With each adjustment, the prototype moved closer to feeling like a real, interactive experience rather than just a static mockup.

UI Polishing

Step #3: Defining behavior

The most important step was defining how the prototype would actually behave. I turned to ChatGPT to help craft a prompt specifically for Figma Make. I explained the full experience: after the first screen, the Agent should ask clarifying questions, and once enough information was gathered, it should generate the Ideal Candidate Profile on the right side of the canvas. The interface needed to reflect this transition clearly.

I shared the designs with Figma Make so it could understand how the states should evolve and how the interface needed to respond to user input. The process wasn’t instant — it involved many prompts, repeated errors, and waiting for generations to complete. Each iteration refined the prototype a little more.

Defining the prototype behaviour

The actual test

Once the prototype was ready, I tested it with users. One participant decided to take a shortcut: instead of going step by step, they copied the entire role description and pasted it into the first input field. The prototype crashed. The Ideal Candidate Profile didn’t load. After some time, it displayed an empty state. The user didn’t give up. They explored, typed around, and finally wrote:

“Can you create this please?

and then it happened!

The AI immediately understood the input and generated the Ideal Candidate Profile. That moment hit me! In a typical Figma prototype, this scenario wouldn’t exist. Predefined flows can’t handle real user improvisation. With Figma Make, I was seeing real friction, real recovery, real behavior. A prototype isn’t just a way to show what s supposed to happen. It s a tool to reveal what actually happens when people interact with a dynamic system.

The actual test with real users

My learnings

Some real takeaways from this prototype:

• Provide clear context: The AI works best when it understands the full picture. At the start, I realized I couldn’t just give Make a single screen and hope it would “get it.” I needed to explain what the experience was, how the conversation should flow, and what the final outcome should look like. The more context I provided, the better the prototype behaved.
• Draft your prompts with an LLM first: A single vague instruction in Make can easily break your prototype. Instead of guessing, use Gemini or ChatGPT as a sounding board to refine and tighten your prompts before you paste them in. Dialing in your instructions with a conversational AI first drastically improves the speed and accuracy of the final design output.
• Use visual guidance for precision: Screenshots and Figma make pointer weren’t just nice-to-haves. They were critical. They told the AI exactly what to modify, where to focus, and how subtle layout or interaction changes should behave.
• Take smaller bites: It’s tempting to ask the AI to build an entire end-to-end user flow in a single prompt, but the results are usually chaotic. Breaking the request down and generating screen-by-screen or even component-by-component allows for much better quality control and less time spent untangling confused layouts.
• The “Clean Room approach: Figma Make doesn’t just look at a picture of your design; it reads the underlying structure and metadata. If your file is a mess of unnamed vectors and ungrouped text, the AI will hallucinate. Before you even open the Make prompt, apply Auto Layout, name your layers logically (e.g., Input Field, “Date Picker ), and set up clear responsive constraints. A clean file structure is the best prompt you can give.
• Test real conditions: The biggest insight came from watching real users interact with the prototype. Unexpected inputs, improvisation, and mistakes revealed friction points I could never have predicted. Testing in realistic scenarios not just idealized flows uncovered the true gaps in both design and AI behavior.

Building this prototype changed the way I think about prototyping. For years, prototyping meant connecting screens in Figma. Creating flows. Deciding what happens when someone clicks “Next. That works when interactions are predictable. But this experience wasn’t predictable. Users could type anything. They could skip steps, paste full descriptions, or phrase things in completely different ways. The system had to understand the input and respond accordingly. With Figma Make, I didn’t have to fake that behavior by linking static screens together.

Instead of designing a fixed sequence of steps, I focused on defining how the system should react. Instead of simulating clicks, I tested real interaction.

No more connecting art boards just to imitate a dynamic experience. No more gap between what users actually do and what the prototype allows. When a prototype behaves closer to the real product, you stop assuming and start learning.

And that’s where the magic happens! ✨

If you enjoyed this article, feel free to give it a clap!

Thanks for reading 😊

Note: This article includes content generated with the help of ChatGPT, used as a supportive tool.