AI Agents for UX/UI & Why This Workflow Actually Works
Most AI design tools still feel like they are trying to do too much with one assistant.
You give one AI the whole context of your project and it has to remember everything while building the ui at the same time.
And then it has to understand the product, remember the pages, keep the styling consistent, create the layout, manage the components, think about UX, and somehow prepare everything for handoff.
That’s usually why things break.
You get inconsistent screens, weak component structure, generic styling, missing states, and a design that looks impressive at first glance but falls apart when you actually inspect it.
That’s why I’ve been using Pencil.dev recently.
Pencil is a UI design platform built around AI agents. Instead of relying on one assistant to handle the entire design process, Pencil can deploy multiple agents at the same time, each working on a specific part of the project.
The important part is that Pencil also has a top-level coordination layer that acts like a project manager.
It handles the project data, assigns tasks to the agents, and keeps everything synchronized.
So instead of one AI being overwhelmed by the full project context, each agent focuses on a smaller task.
That means:
Less confusion
Fewer hallucinations
Faster output
Better consistency
A more structured design workflow
In the video below, I show how I used Pencil to design an app with multiple screens, then improved the output by guiding the agents with better prompts.
Because this is the key point:
AI agents are powerful, but they still need direction.
If you simply ask for “a travel app,” you’ll probably get something average.
But if you tell the agents exactly how to think, what to audit, how to structure the design system, and how to prepare the project for handoff, the results get much better.
The Prompts I Used
Here are a few prompts you can use inside Pencil or any AI design tool.
User Journey Agent
Act like a senior UX designer. Map the complete user journey from first visit to successful outcome. Make sure every step, decision point, user need, and possible friction point is covered.
UX Audit Agent
Act like a senior UX designer. Audit the current design for clarity, usability, friction, missing steps, confusing flows, weak hierarchy, and anything that could prevent users from completing their goal.
UI Direction Agent
Act like a senior UI designer. Define a clean visual direction for the product, including layout style, spacing, typography, color usage, component style, and overall product feel.
Visual Design Agent
Act like a senior UI designer. Improve the interface so it feels polished, modern, consistent, and production-ready while keeping the user experience simple and clear.
Design System Agent
Act like a design system expert. Audit all components, buttons, inputs, cards, modals, spacing, typography, colors, states, and variants to ensure consistency across the entire product.
Use components where applicable. create the components in a separate page, and use instances in the ui design pages.
My Favorite Trick from the Workflow
The most interesting part is that Pencil saves your project as a .pen file.
But under the hood, that file is basically structured like JSON.
So you can duplicate the file, change the extension to .json, and give it to an AI coding tool like Claude, ChatGPT Codex, or Google AI Studio.
That gives the coding tool a much more accurate understanding of your design than a screenshot.
Instead of guessing from an image, it can read the actual structure of the project and turn it into a more accurate interactive prototype.
That means your workflow can become:
Design in Pencil
Export the project file
Convert it to JSON
Give it to an AI coding tool
Generate an interactive prototype
Prepare a stronger handoff package
That’s a much better workflow than just taking screenshots and asking AI to recreate the design from scratch.
Watch the Full Breakdown
In the full video, I show:
How Pencil’s multi-agent system works
Why agents are better than one overloaded AI assistant
How to generate multiple UI screens
How to improve consistency with prompts
How to create components and design systems
How to audit the project for handoff
How to turn the Pencil file into an interactive prototype
Watch the video here:
Final Thought
AI agents are not replacing design knowledge.
They are making design knowledge more valuable.
The better you are at directing the agents, the better the output becomes.
So the real skill is not just prompting.
It’s knowing what a good product design process looks like, then using AI agents to execute that process faster.
Jad