Tools & Workflow
A practical guide to choosing among visual prototyping, Figma context, coding agents, app builders, and creative-production tools based on where the work needs to land.
The AI design stack no longer has one center. Some tools make prototypes, some preserve Figma context, some work inside repos, and some operate production tools like Photoshop, Blender, and Premiere.
Claude Design and Figma Make for visual prototypes. Figma MCP for system context. Codex, Claude Code, v0, and Cursor for repo work. Lovable, Bolt, and Replit for app-builder demos. Claude and Adobe connectors for creative production.
The more AI tools can generate, the more valuable design judgment becomes. Designers need to know where the output should land, what needs to stay editable, and when generated work still needs critique.
The useful question is not which tool is smartest. It is where the work needs to land, what context the tool can actually use, and whether you can inspect the result well enough to keep it.
The useful split is workflow fit, not brand hype. Use the tool that matches the problem in front of you.
Use it for
Explore polished directions through conversation, comments, edits, and design-system context
Not for: Durable Figma systems or final production UI
Review before shipping
Check export quality, editability, brand context, and interaction logic
Use it for
Turn existing frames or prompts into interactive experiences without leaving Figma
Not for: Replacing careful design-system work
Review before shipping
Check responsive behavior, real content, and the path back into maintained design work
Use it for
Let agents read, write, and map design context against a maintained Figma system
Not for: Messy files with vague components, tokens, and states
Review before shipping
Check whether tokens, components, states, and Code Connect mappings are actually available
Use it for
Delegate implementation work, inspect diffs, and move between code and editable Figma layers
Not for: Designers who cannot review code or product behavior yet
Review before shipping
Review the diff, tests, rendered behavior, and any assumptions made outside the brief
Use it for
Describe a larger task, then review the finished patch
Not for: Designers who cannot evaluate the output yet
Review before shipping
Review the plan, changed files, tests, and final product behavior
Use it for
Turn a specific interface idea into reviewable product UI code
Not for: Replacing design judgment or product strategy
Review before shipping
Check component fit, responsive states, accessibility, and maintainability
Use it for
Work in the editor and see changes as they happen
Not for: Hands-off feature delivery without review
Review before shipping
Watch the edits, run the work, and inspect what changed beyond the requested surface
Use it for
Generate several directions before refining the strongest one elsewhere
Not for: Final systems, accessibility, or product-specific logic
Review before shipping
Check whether the direction survives real content, states, and system constraints
Use it for
Build a rough product so a designer can see what needs fixing
Not for: Polished design craft or differentiated product UI
Review before shipping
Check generic UI defaults, account flows, empty states, and ownership of the generated code
Use it for
Try a working app idea quickly before investing in stack
Not for: Long-term product design systems
Review before shipping
Check the generated stack, responsive behavior, error states, and what happens after the demo
Use it for
Use Design Canvas and Agent 4 to explore, plan, build, and deploy in one workspace
Not for: Polished interface craft without design review
Review before shipping
Check the design canvas, app structure, deployment choices, and maintainability
Use it for
Batch edits, retouching, 3D scene changes, scripting, resizing, and cross-tool handoff
Not for: Replacing product UI systems or Figma collaboration
Review before shipping
Check file integrity, destructive edits, rights, and every batch operation before applying it broadly
Use it for
Orchestrate multi-step creative edits while keeping Adobe tools and creator control in the loop
Not for: Product UI source-of-truth workflows
Review before shipping
Check source files, edit history, rights, and whether the result remains controllable in Adobe tools
The AI design-tool conversation changed again. A few months ago it was reasonable to compare Stitch and v0 as though they were fighting for the same job. That framing is too small. Claude Design, Figma Make, Figma MCP, Codex, Claude Code, v0, Cursor, Lovable, Bolt, Replit, Adobe Firefly, and Claude's creative connectors solve different parts of the workflow.
The useful question is no longer "Which AI design tool is best?" The better question is: where does the work need to land? A Figma system? A high-fidelity prototype? A GitHub pull request? A working founder demo? A Photoshop file? A Blender scene? A deck? Pick the tool by destination.
Send the generated screen before you polish it for hours. We'll flag what feels generic, what is working, and what to fix first.
Visual prototypes are where Claude Design, Figma Make, and Stitch matter. They help you get from a written idea to something people can react to. The output can look polished, but it still needs product judgment, interaction logic, accessibility, and taste.
Figma systems and code roundtrips are where Figma MCP, Codex, and Claude Code matter. This is the lane for teams that need Figma to remain a shared source of truth while real code changes are happening.
Repo work is where Codex, Claude Code, v0, and Cursor matter. These tools are not just drawing screens. They are editing files, running code, creating diffs, opening pull requests, and making changes that have to survive review.
App builders are where Lovable, Bolt, and Replit matter. They can get a founder or designer to a working demo fast. The danger is mistaking a working demo for a finished product.
Creative production is the new lane most AI design articles miss. Claude's Adobe, Blender, Autodesk, Ableton, Splice, Affinity, SketchUp, and Resolume connectors are not about replacing Figma. They are about operating inside the production tools creative people already use.
Claude Design belongs in the visual-prototype lane. Anthropic launched it on April 17, 2026 as a research preview for Pro, Max, Team, and Enterprise users. It creates designs, prototypes, slides, one-pagers, and other visual work, then lets you refine through conversation, inline comments, direct edits, and generated controls. It can also apply a team design system when it has access, which makes the supplied context especially important.
Use Figma Make when the work should stay in Figma. Figma describes it as a prompt-to-app tool for functional prototypes, web apps, and interactive UI. It can start from a prompt or from existing Figma designs, preserve structure and metadata, add interactions and data, and give you a code editor when you need more control. For a designer already working in Figma, that continuity matters more than novelty.
Stitch is useful for widening the option set. Google's March 2026 Stitch update rebuilt it around an AI-native canvas, voice interaction, a design agent, and fast multi-screen UI exploration. Whether it fits depends on what you need to do with the chosen direction afterward.
These tools make first drafts cheaper. They do not remove the need for critique. Expect generic hierarchy, thin interaction logic, awkward states, and visual sameness unless a designer pushes the work past the first acceptable version.
Figma's role is changing. It is still a design canvas, but the more important 2026 role is structured context. Figma's own framing is now code and canvas: product work can start in a prompt, a terminal, a Figma file, a rendered browser state, or a sketch, then move between those surfaces.
OpenAI and Figma's Codex integration makes that shift explicit. Codex can use Figma Design, Figma Make, or FigJam context to implement UI, and can also turn rendered UI from code into editable Figma designs. That is more relevant to designers than a generic coding-agent comparison because it softens the boundary between design exploration and implementation.
Claude Code has a similar lane through Figma's plugin and MCP setup. Figma's Claude Code docs recommend the remote Figma MCP server for most users and package MCP settings plus Agent Skills through the Figma plugin. In practice, that means Claude Code can pull design context, tokens, layout details, variables, and Code Connect mappings when implementing work.
The catch is simple: Figma MCP amplifies your system quality. Clean components, variables, tokens, semantic names, explicit states, and Code Connect mappings make agents better. A messy file does not magically become a product-ready interface because an agent can read it. It just produces messy implementation faster.
Use this lane when design needs to stay editable, code needs to stay reviewable, and neither side can be treated as a disposable export.
This is where tool choice stops being a pure design decision. If the output lands in a repo, you need to care about diffs, environment setup, tests, product behavior, and whether you can review the result.
Codex deserves more weight than the old version of this article gave it. OpenAI describes Codex as a coding agent that can read, edit, and run code, work in cloud environments, and create pull requests. It can also run in the editor, terminal, cloud, web, and desktop app workflows. For designers working close to engineering, the value is not that Codex "codes." The value is that you can delegate scoped implementation tasks and review actual product changes.
Claude Code fits tasks where you want an agent to read a codebase, make multi-step changes, run checks, and return a patch. The Figma plugin makes it especially relevant for designers implementing from real design files, but it still requires someone who can judge whether the final behavior and code are acceptable.
v0 supports repo-connected UI generation and front-end implementation bridging. Vercel rebuilt it around GitHub import, sandboxed repo work, environment-aware previews, and a Git panel. It is useful when you can describe a specific interface and review the resulting React code.
Cursor fits supervised editing and learning in the editor. If seeing changes happen as you work is part of how you understand and review them, that interaction model may fit better than a fully delegated cloud-agent workflow.
Lovable and Bolt still belong in the app-builder lane: fast, useful, and often generic. They are good for getting a working thing in front of people. They are not proof that the product is designed well.
Replit now deserves a spot here. Replit Agent 4 added a more creative build workflow: apps, mobile apps, dashboards, AI tools, a Design Canvas before committing to code, planning, parallel tasks, and tool connections. For founders and solo builders, that is a serious app-builder story.
For designers evaluating these tools, the question is not "Can it build?" It can. The question is whether you can identify what the builder skipped: empty states, account flows, layout resilience, hierarchy, accessibility, brand voice, pricing clarity, onboarding, and the places real users will get stuck.
This is the part most product-design roundups miss. On April 28, 2026, Anthropic announced Claude for Creative Work: connectors that let Claude work alongside creative tools instead of only generating standalone artifacts.
The Adobe connector is the headline for visual designers. Anthropic says it draws from 50+ Creative Cloud tools, including Photoshop, Premiere, Express, and more. Adobe's own Firefly AI Assistant is moving the same direction: a conversational agent that orchestrates multi-step workflows across Firefly, Photoshop, Premiere, Lightroom, Express, Illustrator, and other Adobe apps.
Blender is the other signal worth watching. Anthropic says Blender's connector uses the Python API so Claude can analyze scenes, debug setups, batch-apply changes, and create tools inside Blender. That matters for 3D, product renders, motion, architectural visualization, game assets, and designers who touch spatial or cinematic workflows.
This lane is not a Figma replacement. It is production assistance inside the tools creative people already use. For many readers, that may be more useful than another prompt-to-landing-page tool.
There's a common read of the AI tool landscape that says AI is making design easier, faster, and therefore the bar is lowering. That's backward.
Taste — the judgment about what's worth making, what the specific product needs, what makes this interface different from every other AI-generated interface — becomes more valuable, not less.
The tools are converging on the same patterns because they're trained on overlapping data. Shadcn-styled components everywhere. The same card grids, the same dashboard layouts, the same hero sections. If your work looks like it could have come out of any of these tools, it probably did — or it reads that way to anyone paying attention.
The useful approach is to let AI speed up a first pass, then apply taste, intent, and product judgment wherever the tool relied on defaults or lacked context. That human review is what makes the result specific to the product instead of merely competent-looking.
Specific prescriptions by designer type:
Learn Figma first because the component model, constraints, variables, and collaboration habits still matter. Then use Claude Design, Figma Make, or Stitch to explore faster. Start using Cursor on small personal projects to build coding intuition. Before any tool matters, browser fluency matters more. You need to know how interfaces behave before you can judge AI output.
Cursor is still the right starting point if you want to see what is changing. Add v0 when you want specific UI turned into reviewable React. Add Codex or Claude Code when you can review larger diffs. Pair all of that with Figma MCP if your design system needs to inform the code. This is where the designers-shipping-code path actually opens up.
Your investment is in infrastructure, not novelty. Clean up your Figma tokens and components so MCP reads them coherently. Decide whether Codex, Claude Code, Cursor, or v0 is the right repo workflow for your team. Use Figma Make or Claude Design for exploration, but keep Figma as the place where decisions become system context. The payoff comes from getting the whole team producing higher-quality AI output through better shared systems.
Lovable, Bolt, or Replit are the right call for fast MVPs. Use them to learn whether the idea has legs. When the product gets real users and starts to matter, bring design craft in — whether by hiring, by using a product critique workflow, or both.
Practice the same small product surface through different destinations: Claude Design for directions, Figma Make for an interactive prototype, v0 for UI code, Codex or Claude Code for repo changes, and Figma MCP for design-code context. The meaningful skill is knowing what each tool is allowed to decide. That's the design engineer skill in practice.
Watch Claude's creative connectors and Adobe Firefly AI Assistant closely. This is the lane for Photoshop, Illustrator, Premiere, Lightroom, Firefly, Blender, SketchUp, Autodesk Fusion, Ableton, Splice, and production work that gets repetitive. It will not replace taste, but it can remove a lot of tool friction.
QuestionsAnswers
A few practical details before you keep going
AI raised the baseline of what anyone can produce. That means the gap between "AI-generated competent" and "actually considered and shipped well" is where design work now lives. The tools are the easy part. The harder skill is looking at AI output and knowing what's wrong with it — specifically, actionably, and in a way that makes the work better.
That's the skill that underpins every phase of this workflow. And it's what The Crit is built around. The tools change every six months. The ability to evaluate, refine, and improve design work — whether it came from a human or an agent — doesn't go out of date.
Written by
Nikki KippleProduct Designer, Builder & Design Instructor
Designer, educator, founder of The Crit. I've spent years teaching interaction design and reviewing hundreds of student portfolios. Good feedback shouldn't require being enrolled in my class — so I built a tool that gives it to everyone. Connect on LinkedIn →
Send one generated screen, URL, or prototype. We'll point out what looks generic, what works, and what to fix before sharing.
