Design

AI-assisted UI generation, refinement, rapid prototyping, and implementation

Use AI tools and agents to generate first-draft UI layouts, wireframes, polished screens, design-system-constrained drafts, rapid A/B or concept variants, and interactive or functional prototypes from prompts, structured specs, or existing design-system context, then refine and validate the outputs against real product, accessibility, and engineering constraints.

Why the human is still essential here

The designer defines requirements, constraints, and system rules, then judges what to keep and what to change—checking hierarchy, missing states, responsive behavior, accessibility, interaction quality, and implementation fidelity before anything is tested, handed off, or shipped. AI speeds production, but design judgment and accountability remain human.

How people use this

Onboarding flow wireframes from text

Turn a short product brief into a set of onboarding screens (welcome, permissions, profile, success) to establish structure before detailed UX decisions.

Uizard Autodesigner

Design system-compliant screen drafts

AI creates new screens that follow the existing spacing, color, and component rules so teams can extend a product faster while staying consistent.

Figma AI

Prompt-to-clickable prototype in Figma

Use a natural-language prompt to generate a fully editable, interactive prototype and iterate live during a design review to explore interaction approaches quickly.

Figma Make

Need Help Implementing AI in Your Organization?

I help companies navigate AI adoption -- from strategy to production. Whether you are building your first LLM-powered feature or scaling an agentic system, I can help you get it right.

LLM Orchestration

Design and build LLM-powered products and agentic systems

AI Strategy

Go from idea to production with a clear implementation roadmap

Compliance & Safety

Build AI with human-in-the-loop in regulated environments

Related Prompts (4)

Latest community stories (10)

Personal Story
Blog

How I Use AI as a Web Designer: 4 Practical Workflows

Four practical ways I use AI in my Squarespace design business: wireframing in Claude Design, prototyping in Figma Make, cleaning up client feedback, and building small apps in Base44.

OK
Olga KolgushevaSquarespace designer and copywriter
Aug 28, 2026
How-To
X

How I Design with AI.

As an engineer who is not a designer and hates slop.

Every landing page, app and tui look the same. They're slop and most of them are incomprehensible.


Here's how I de-slop my product design.


1. Always consider the whole.


The design process is roughly 3 steps:


Lay out all the constraints you are designing for.


Consider an array of solutions that satisfy those constraints.


If you realize a constraint must be added or one can be removed, go to #1.


This is from Notes on the Synthesis of Form by Christopher Alexander. It's a pleasingly rigorous exploration of the design process.


Constraints can take many forms. They could be font and sizing rules, workflows you must support or business-logic states. The important thing is that you decide the constraints.


The common problem is skipping Step 3 and playing design wackamole.


A user gets confused and it's natural to jump into solution mode. Our team gets nerd sniped by this all the time. Especially with the left sidebar because it packs so much information into a small space. The temptation is to spot-fix but that road leads to ruin.


The problem from skipping laying out the constraints is that you get a disjoint patchwork that randomly prioritizes some interactions over others. AI exacerbates the draw to wackamole design. It encourages prompting "Make X more prominent" or "Add an affordance to do Y". In the end, more users are confused.


When feedback arrives, evaluate if it changes your design constraints before jumping to solutions. The way we handle this is keeping a document tracking papercuts and annoyances. We move fast on obvious fixes but track the minor ones so that when it comes time to redesign, we have a collection to address cohesively. The important thing is that we avoid being overly reactive and creating more mess.


2. Remove stuff.


Agents love to add stuff. Your job is to remove the unnecessary parts.


This should be very familiar because agents do exactly the same thing in code and plans. They love belt-and-suspenders, wrapping an extra try-catch or re-implementing the same utility over and over.


In UI designs, agents do the same thing. They love adding extra copy, lines and icons. You end up with real designs that look better than most engineers would create by hand but are actually kind of bad.


An easy step is just look at every element of a design and for every element ask "Do I actually need that?"


3. Iterate in a design tool.


You should not be iterating on design in the product. Use a tool that gives you fine control and lets you iterate quickly with minimal extra context.


Prototype gravity is the silent killer. This is when you have the agent build the first version in your code base then it feels easier to just refine that instead of exploring other options. Designing in your real codebase also forces the agent to build a version that grafts onto your real


Figma is still the GOAT and the AI integration is getting better every week. Cursor Design Mode, Claude Design, a bunch of new startups and even HTML prototypes are great too.


Just please use a tool meant for design and have AI generate 3-4 variants of everything.


4. Use components and libraries.


This one is probably obvious to most engineers but it's very important so I'll say it quickly.


Separate views and logic. Create reusable components.


It's not hard and it pays dividends. Your app will be visually cohesive rather than a patchwork of re-implemented buttons.


To do this at Ref, we maintain a /showcase page. We have agents build the UI component there first to play with them before connecting to the main app.


5. Use preview deploys.


The best way to evaluate a design is with real data. Preview deploys allow you to try the new designs with your real backend.


It's important to remember, there will always be some polish and re-work necessary. Even if the agent builds exactly what you told it, you may still hold it in your hands with real data and realize it's not right.


For a large feature that involves frontend and backend, preview deploys can be tricky. At Ref we solve this by separating frontend and backend PRs. Backend changes can be verified with unit and integration tests. Frontend changes require human verification and preview deploys make it easy to share a link.


6. Steal stuff.


Most UX problems have been solved already and you should be taking pieces and putting them together. Spend some time looking at products solving a similar problems or communicating similar ideas.


Every cracked designer I've worked with starts every single project by pulling together a bunch of screenshots. You should do the same, it makes amazing context to send to your agent.


7. Explore your taste.


This is the fun part!


Taste is reflecting on your own reaction to something. And my apologies to Kyle Chayka but reflecting on one's experience is not proprietary to parties in Brooklyn lofts. It's necessary to create and not create slop.


Product engineers are excellent at identifying when a design doesn't work but have a hard time knowing how to fix it. What engineers lack is the solution library from experience to pull from. Building that just takes reps trying things and reflecting.


It's fun to play and explore. But it can also feel pretty brutal because its a deluge of critique until something is good enough.


At Ref we don't have a full-time designer so we resort to an agricultural threshing approach to refining our taste. We throw a design in the middle and beat it with sticks until we feel good about it.


That's all I've got. GLHF.

MD
Matt DaileyFounder at Ref.
Aug 26, 2026
Personal Story
Medium

🤖 AI Didn’t Replace My Design Process — It Changed How I Think

A short, honest field guide to using AI across the UX/UI workflow — from research to shipping — without losing the judgment that makes design good.

KS
Kshama SinhaUI/UX designer
Aug 20, 2026
Opinion
LinkedIn

"AI can create screens. So... do we still need designers?"🤔

"AI can create screens. So... do we still need designers?"🤔

This question has been on my mind for a while.


And honestly, I understand why many founders and companies are asking it.


Today, AI can generate wireframes, polished UI, landing pages, prototypes, design systems, and even production-ready code in minutes.🥲


So if a designer's only contribution is drawing screens in Figma...


...then yes, AI is already catching up.


But I think we've been asking the wrong question.


The real question isn't:

"Do we need designers?"


It's:

"Are we using designers for what they were actually hired to do?"👏


Over the last few years, I've realized something that changed how I look at my own career.


Many designers including me at one point spend most of their energy executing requirements instead of questioning them.💭


We become screen makers.


Instead of product thinkers.


The biggest value of a designer was never pushing pixels.


It's asking:


💭 Why is this feature needed?

💭 Is this solving the right user problem?

💭 What happens when users fail?

💭 Can this experience be simpler?

💭 How does this decision impact the business?


These are questions AI cannot answer on its own.


AI generates possibilities.🤞


Humans decide which possibility is worth building.🌻


Research consistently supports this idea.


• McKinsey's "The Business Value of Design" found that companies investing in design significantly outperform industry peers in revenue growth and shareholder returns.


• IBM has reported substantial ROI from investing in UX practices, emphasizing that understanding users early reduces costly redesigns later.


• Nielsen Norman Group continues to show that many usability problems originate from missing user understanding not from weak visual design.


Notice something?✋️


None of these studies say beautiful UI is the competitive advantage.


They point toward research, decision-making, validation, and strategic thinking.


Today, I use AI every single day as a product designer.


It helps me:


- explore more ideas

- challenge my assumptions

- identify edge cases

- improve UX copy

- critique flows

- prototype faster


But every important decision is still mine.


AI is my assistant.


Not my judgment.🌱


I believe the designers who will thrive in the next few years won't necessarily be the fastest people in Figma.


They'll be the ones who combine product thinking, business understanding, user empathy, and AI.


So maybe AI isn't replacing designers.


Maybe it's exposing the difference between designing screens and designing products.


I'm curious to hear different perspectives.


If AI can generate almost any interface today... where do you think the real value of a designer begins?👇


#uxdesign #productdesign #artificialintelligence #designthinking #uidesign #aidesign #productmanagement #uxresearch #careergrowth #figma #uiux #designercommunity #juniordesigners #learning #designers #aIindesign #aidesigntools #ai #ailearning #aidesigners #linkedin #creators

MS
Mayuri SalunkeProduct Designer
Jul 25, 2026
Personal Story
LinkedIn

AI doesn't build final drafts. You do.

AI doesn't build final drafts. You do.

There's a myth that you type a prompt, walk away, and a finished product appears. What actually appears is a first draft. A starting point. Something that looks right until you look closer. It's the opportunity for a conversation.


The distance between that first draft and something real people can actually use? That's the whole job. And that part is yours.


With Tiny Clothing Swap, AI got me a working version fast. But "working" isn't "finished." I had to keep asking the questions AI won't ask on its own: What happens when a parent lists something no one wants? Is this actually simple enough for someone juggling a toddler? Does this feel trustworthy enough that a stranger will swap with another stranger? How do improve the UX? Every one of those judgment calls came from me — and each one turned a rough draft into something closer to done.


That's the piece I think people miss about building with AI. It's fast at drafts. It is not a substitute for taste, standards, or knowing your user. You still have to decide what "good" means and refuse to stop until it's there.


AI got me to a draft in record time. Getting to the final version — the one worth shipping — was the human part. It always is.


If your AI output feels mediocre, it's probably because you stopped at the draft. Don't. The last 30% is where the product actually lives, and that part is still yours.

KS
Kennady S.Director of Publishing
Jul 27, 2026
News
Article

Vibe coding that matches your vision: Canva Code 2.0 is now available to all

Canva Code 2.0 is here: vibe code websites, apps and interactive experiences, then edit like a Canva design.

CT
Canva TeamNewsroom team at Canva
Jul 14, 2026
Personal Story
Medium

How AI became part of my UX design workflow

And what it looked like to work on a design team that intentionally experimented with AI for several months

It’s been a while since I posted here. I was honestly getting a little tired of the “AI is replacing designers” or “the design process is dead” headlines.


When I opened Medium to write this article, I found a draft I’d started back in 2023 about how I was using ChatGPT in my day-to-day as a product designer. I never published it. Looking back, I think I was afraid of how the UX community would react, so I eventually gave up on it.


Finding that draft reminded me how much my workflow has changed since then. So, here’s my second attempt at writing this article. If you’re reading this… I finally hit Publish. 😅

LL
Laís Lara VaccoProduct Designer
Jul 15, 2026
News
Blog

GPT-5.6 is now available in Figma Make

With accurate first results and fast iterations, OpenAI’s GPT-5.6 gives your builds a strong start in Figma Make.

From a rough sketch to a polished prototype, or even production code, teams can use Figma Make to move faster from idea to execution. Today we’re adding GPT-5.6—OpenAI’s newest model—to Make. From our early tests, GPT-5.6 raises both the quality and speed of what Make produces on a first pass. From clean UI to responsive layouts to high fidelity interactions, you can get quality prototypes, fast.

GS
Gui SeizDesign Director of AI, Figma
Jul 9, 2026
Opinion
LinkedIn

A few thoughts on the new Figma AI Agent after spending the last few days testing it.

A few thoughts on the new Figma AI Agent after spending the last few days testing it.

Short version: it's fun, occasionally useful, and already capable of accelerating certain workflows. But today it feels more like hiring a junior designer than a senior one.


The biggest limitation isn't the model quality itself. It's the surrounding system.


First, the agent doesn't appear to retain persistent project knowledge between sessions. Instructions such as "never overlap screens" or other project-specific rules often need to be repeated. Once a new session starts, much of that context seems to disappear. Whether that's an intentional design decision or a technical limitation, it creates friction for long-running design work.


Second, there is very little transparency around model routing. Figma is likely leveraging multiple foundation models behind the scenes and routing requests depending on task type, latency, cost, or other factors. That's reasonable.


But for professional users, I would rather have control.

If a task requires deep reasoning over large design systems, PRDs, specifications, and product context, let me explicitly choose the best model and charge me accordingly through Figma credits.


Enterprise users optimize for outcomes, not token savings.

Third, the system appears to operate within some form of scope or blast-radius constraints, but those controls feel underdeveloped.


Three things I'd love to see:


• A visible blast-radius estimate before execution. Show me what the agent expects to modify before it starts.

• A lightweight deterministic layer that detects ambiguous intent and asks clarifying questions before actions are executed.

• Most importantly: a dedicated knowledge layer.


Where is my design-system-rules.md?

Where is my figma.md?

Where is my Agent-Oriented Product Ontology?

Where do my PRDs, specifications, business rules, entity relationships, workflows, permissions, and UX constraints live?


Current AI tools seem heavily optimized around generating interfaces.

The next generation will be optimized around understanding products.

A mature enterprise application isn't just a collection of screens. It's a network of entities, relationships, permissions, workflows, business rules, and design constraints.


Without access to that knowledge layer, the agent is forced to infer too much. That's where hallucinations, inconsistency, and design-system drift start appearing.


For generating landing page variations, quick explorations, and lightweight A/B concepts, the current experience is already valuable.


For large enterprise products with complex domains, I think we're still early.


David Kossnick Dylan Field Kris Rasmussen Nadia Singer Figma

LL
Leonardo LopesAI Product Designer
Jun 13, 2026
News
LinkedIn

Use Codex to build and share interactive prototypes.

Use Codex to build and share interactive prototypes.

The Product Design plugin helps teams turn ideas into live prototypes they can use and refine in Codex. You can bring the prototype into Figma so teams can collaborate, refine the design, and keep moving in their tools. With Sites, you can turn those prototypes into apps your teams can use


A faster way to move from concept to something people can actually react to.


Check out the demo below.

OF
OpenAI for BusinessBusiness showcase page at OpenAI
Jun 5, 2026