A practical map of AI coding tools: IDEs, agents, app builders, design-to-code tools and coding models.
A practical guide to understanding the AI coding ecosystem and picking the right tool for different use cases and workflows.
Have you been overwhelmed by AI coding and AI prototyping tools lately? Maybe you’re just deciding which tool to pick. Maybe you’ve started with one and now doubt if it’s the right choice. What’s the real difference between all these tools? I try to cut through the zoo of AI coding options by categorizing them meaningfully, explaining key differences, comparing functionality, and considering use cases based on your starting point. We’ll build a framework to choose the right tool, or chain multiple into a workflow.
Note: This is not a perfect taxonomy. Boundaries are blurring, but these five categories create useful mental models for thinking about tools’ strengths, trade-offs, and how they fit your workflow.
My core audience is design and product folks, but this can be relevant to all builders.
Let’s get started!
Tools ecosystem.
The entire chaotic landscape of AI coding tools can be distilled down into five main categories:
AI foundation models (coding LLMs)
AI-native IDEs
Agentic coding tools
All-in-One App Building Platforms
Design-to-Code Tools
Just to clarify from the start: these five buckets are not rigid scientific classes. The boundaries are blurring, and you will see tools borrowing features from one another all the time. Still, this framework helps organise your thinking. It offers a reliable way to understand a tool’s core strengths and the necessary trade-offs, whatever tool you happen to be looking at.
Category 1: AI Foundation Models (Coding LLMs)
These are the brains, the actual token generators that write code and reason. They’re the heroes enabling everything else. On their own, they’re tough to use productively: access is mainly via API. Even familiar ChatGPT and Claude web interfaces are just smart wrappers, routing your tasks to the actual AI models under the hood.
Leading models are only half the story. There are plenty of smaller or more specialised models that can be faster, cheaper, or better for narrow tasks.
Examples of foundation model families (non-exhaustive):
OpenAI: GPT family, Codex, o-series reasoning models
Anthropic Claude: Opus, Sonnet, Haiku families
Google: Gemini 3.x Pro, Gemini Flash
xAI: Grok 4
DeepSeek: DeepSeek-Coder
Cursor: Composer (proprietary Cursor’s model trained with reinforcement learning for agentic coding)
Don’t mix these up: Claude Code ≠ Claude Opus, and GPT-5.x Codex models ≠ Codex app/CLI (agentic tools, covered next).
Category 2: AI-Native IDEs
An IDE (integrated development environment) predates AI: it’s the hub for file navigation, code editing, terminals, version control, and more. AI started as extensions (Copilot kicked off the revolution), but AI-native IDEs flip this: the AI prompt pane becomes the centrepiece, while retaining classic dev tools.
They’re tightly intertwined with agents today (the next category), but the distinction is the full IDE interface (file tree, editor, diffs, etc.) alongside AI orchestration.
They act as smart routers for choosing the best AI models for a job: analysing tasks and dispatching cheaper, faster models for simple work, or pricier ones for complex reasoning. You can also select preferred models manually.
Examples (most popular first):
Cursor (multi-model: GPT-4o, Claude Sonnet, Composer, etc.)
VS Code + GitHub Copilot (Copilot has been getting more agentic, including MCP support)
Windsurf (proprietary SWE models + multi-model support)
Google Antigravity (Gemini-first, with an agent “Manager” view)
Trae
Kiro (Amazon)
Theia IDE (open-source AI-native fork)
Note: this is where boundaries start blurring hard, because IDEs increasingly include “agent mode”, while standalone agents can be installed inside IDEs.
Category 3: Agentic Coding Tools
This category flips the paradigm: AI is the primary interface, code is secondary.
An agentic coding tool is an orchestrator that can reason, plan, take actions, and verify results. Plus, it has access to tools for filesystem, terminal, testing, and Git. The loop looks like:
Reason → Plan → Execute → Test → Iterate
Some agents live in the terminal. Some run in the cloud and open PRs. Some have a desktop app that manages multiple agents in parallel.
Devin sparked this revolution by exposing their coding agent only via a Slack interface. Now there are also CLI and desktop apps that discourage manual code editing, signalling where things are headed.
Claude Code. Runs in the terminal, but is also available as an extension in IDEs, Slack, and web, or as part of the Claude Cowork app; designed to work directly in your codebase.
OpenAI Codex. A multi-surface platform available across four interfaces: Codex Cloud (web-based at chatgpt.com/codex), Codex CLI (open-source terminal tool), IDE extensions (VS Code, Cursor, Windsurf), and the Codex app.
Google Antigravity. Technically an AI-native IDE, but I’m also adding it here to complete the Google–OpenAI–Anthropic rivalry.
Devin (Cognition) (more autonomous, designed to take on larger chunks of work)
Aider (terminal-based pair programming with strong Git workflows)
Copilot coding agent (asynchronous agent that works via GitHub, or plugged into any IDE)
Amazon Q Developer (essential for the large AWS developer ecosystem)
One more useful distinction inside this bucket: some agents are opinionated about models (they mostly run “their” models), while others are more like a shell where you can plug different models in. Claude Code, for example, is built around Claude models. Codex is built around OpenAI’s Codex stack.
Yet, they can work on the same codebase in parallel. For example, some prefer to use Claude Code to scaffold, Gemini for visual UI, and Codex to review. You can chain them together into a single workflow to achieve the highest quality result.
Category 4: All-in-One App Building Platforms
All-in-one app building platforms go beyond coding and bundle a whole range of features for end-to-end shipping, which saves a ton of effort and lowers the barrier for non-technical builders.
build and preview: run the app to see changes in real time
deploy: publish on a domain and share as a link
collaboration: allow others to make changes and build it together
database and backend scaffolding: dynamic data, complex functionality, API access to other services (for example, AI models or payment providers)
auth: users can create accounts
safety checks: prevent doing something silly and getting hacked
built-in AI integrations (sometimes, for example Lovable AI)
hosting and domains
In IDEs and coding agents, you usually assemble these pieces yourself: run the app locally, connect GitHub, choose a deployment platform (Vercel, Netlify, etc.), pick and connect to a DB, configure API secrets, and so on. Most non-technical coders get overwhelmed by the sheer range of tasks required to build publishable software. All-in-one platforms abstract it all away. That is why they are so approachable, and why they are often the fastest path from an idea to “a working thing with a link”.
Non-exhaustive list:
Lovable — Full-stack app builder with built-in hosting plus database, auth, storage, and edge functions (Supabase under the hood). Big differentiator: two-way GitHub sync so you can graduate to an IDE or collaborate with developers.
v0 — Vercel’s generative UI tool that outputs React + Tailwind + shadcn/ui and plugs neatly into Vercel deploys. Strong on visual UI.
Bolt — Key differentiator versus the tools above: a more flexible tech stack (similar to Replit). Downside: quality and reliability. You hit errors and bugs in Bolt more frequently.
Replit — A full browser-based IDE with an AI Agent that can build complete apps from prompts. Standout: Bolt and Replit shine on framework flexibility; both can scaffold full-stack apps across multiple stacks (React, Angular, Vue, React Native, and others). Replit also offers built-in database, auth, hosting, and real-time multiplayer collaboration. It’s the most powerful and IDE-like tool in this category, but it can feel overwhelming for non-technical users.
Figma Make — Starts where so many designers already live: Figma. Converts existing Figma designs into interactive prototypes with high visual fidelity. Standout: visual precision. It can implement your Figma designs as prototypes that stay visually close to the original layout and styles. The cost is high, though, and the quality and maintainability of the code is low. Figma Make can breathe life into your mockups, but it stumbles when you take it further.
Base44 — Everything lives inside Base44 (DB, auth, analytics, email). The most beginner-friendly option. Standout: mobile app publishing capability. It can scan against Apple and Google guidelines, fix compliance issues with AI, and generate store-ready files directly from the editor. Acquired by Wix for $80M.
Builder.io — Best thought of as a design-to-code pipeline: import from Figma, generate code, and sync into your codebase. Differentiator: multi-framework code generation.
Magic Patterns — Canvas-first prototyping for exploring variations, collaboration, and storytelling, with growing “ship it” features. Differentiator: intentionally frontend-focused, built for visual communication, ideation, and stakeholder alignment rather than full-stack shipping.
They vary a lot in what they support and where they hit a wall. Common limitations I see across this category:
Tech stack constraints: most are opinionated (often React + Next.js + Tailwind + shadcn/ui)
Existing codebases: many struggle to work against a real, long-lived repo (Replit is a frequent outlier here)
Design system reuse: importing an existing component library is possible sometimes, but rarely smooth
Performance on bigger projects: context gets messy as complexity grows
Lock-in and workflow friction: Git workflows differ, and two-way sync is still not universal
Less control over quality: you trade flexibility for speed
Limited parallelism: fewer “true parallel agents” means slower iteration on multiple features at once
Category 5: Design-to-Code Tools
There is a whole class of tools that generate frontend code from designs or prompts but stop short of the full-stack bundling that defines all-in-one platforms. No databases, no auth, no hosting. Just visual UI turned into clean, exportable code.
Why do they deserve their own category? Because they solve a different problem. All-in-one platforms help you ship a working app. Design-to-code tools help you bridge the gap between a visual idea and production-ready UI components or pages that slot into an existing codebase or hand off to developers cleanly. You can still work in a familier design evironment and let your ideas flow in the infinite canvas.
The space has evolved in three waves. The first wave (2017–2022) consisted of Figma-to-code converters that translated design files into code. The second wave (2023–2024) brought prompt-to-UI generators where you describe what you want in text and get visual output. The current third wave (2025–2026) is collapsing the design-code boundary entirely, with tools where the design canvas itself runs on real code, or lives inside your IDE or can push design to coding agents via MCPs.
Here are some notable tools in this category:
Subframe — A visual design tool where every layer maps directly to React + Tailwind CSS. The code output is deterministic (not AI-generated), which means no LLM unpredictability. Components sync to your codebase via CLI. Standout: design system source-of-truth that produces pixel-perfect, maintainable code.
MagicPath — An AI-powered infinite canvas for generating interactive UI from prompts. Exports React and HTML/CSS. A Chrome extension captures HTML from live websites and converts it to React. Standout: high-fidelity Figma import via “Figma Connect” and an intuitive prompt-to-design workflow.
Paper (paper.design) — The design canvas itself runs on real HTML and CSS. Every element is rendered as actual web code, so there is zero conversion loss on export. A bidirectional MCP server lets AI agents both read and write to the canvas. Standout: GPU-accelerated animated shaders (mesh gradients, liquid metal, halftone) and native MCP integration for AI agent workflows.
Pencil (pencil.dev) — Embeds an agent-driven design canvas directly inside Cursor, VS Code, and Claude Code. Design files are JSON stored in your Git repo, versioned alongside code. Standout: design mode lives inside the IDE, eliminating the handoff entirely. Backed by a16z Speedrun. Currently free.
Google Stitch — Google’s free AI UI generator (formerly Galileo AI), powered by Gemini. Generates multi-screen designs from text prompts, images, wireframes, or sketches. Exports HTML/CSS, React, and Figma. Standout: free with generous limits (350 generations/month) and Google’s AI muscle behind it.
Builder.io Visual Copilot — A Figma plugin + CLI that analyzes your existing codebase and generates code matching your components, design tokens, and framework conventions. Supports React, Vue, Svelte, Angular, and more. Standout: codebase-aware conversion that respects your existing patterns, not just generic output.
Magic Patterns — Canvas-first prototyping that generates UI from text prompts, screenshots, or Figma imports. Exports React + Tailwind code and Figma files. Standout: design system integration (import your components from Figma, Storybook, or any website) and a multiplayer canvas for real-time collaboration.
Banani — A visual-first AI copilot generating editable prototypes with up to 5 design variants per prompt. Exports to Figma and HTML/CSS. Standout: multi-variant generation for rapid comparison, positioned as accessible to PMs and founders.
Locofy — Uses proprietary Large Design Models (not general-purpose LLMs) to convert Figma designs to code. Standout: the broadest framework coverage including React, React Native, Flutter, Vue, and Angular, making it the only tool covering native mobile comprehensively.
Framer — Worth mentioning but worth a caveat: Framer is a hosted website builder with a design canvas, not a code export tool. You publish directly to Framer’s infrastructure. AI features include prompt-to-layout and text rewriting, but the output is a hosted site, not downloadable code. It fits better in a “website builders” bucket alongside Webflow.
What these tools unlock:
Rapid exploration of UI concepts without committing to a full project
Clean component handoff from design to development
Integration with AI coding agents via MCP for agentic workflows
Design system consistency across prototypes and production code
Visual storytelling for stakeholders and customer demos
What they do not do:
Backend logic, databases, or authentication
Deployment and hosting (with rare exceptions)
Full application state management
Replace the need for a developer to wire up the logic
Decision framework
There’s no universally best tool. The right choice depends on what you’re trying to build, how far it needs to go, and how much technical setup you are willing to take on.
Since my focus is mainly design and product folks, here are the most common use cases I see. It’s not a complete list, but it covers the majority of real-world scenarios.
01. Web pages
Landing pages
Personal websites
02. Disposable prototypes
Concept validation
Stakeholder alignment
Ideation
03. Polished design prototypes
High-fidelity UI
AI functionality
Motion and interaction
Responsive 3D / WebGL
Creative visualisations
04. Re-usable code
Handoff-ready components
Collaboration in code
Clean repo output
05. Internal tools
Dashboards and admin panels
Micro-apps for ops
Employee onboarding tools
06. Tailored customer demos
Product variations for a specific customer
Onboarding guides and guided walkthroughs
Sales prototypes that feel real
07. Releasable products
Isolated features
Thin-layer products
MVPs
Pet projects
Games
Two questions that decide almost everything
When people get stuck choosing, it’s usually because they are comparing tools feature-by-feature. I find it easier to start with two higher-level questions:
Do you optimise for speed or for control?
Speed + simplicity: you want a working prototype, a feature, or an app quickly, ideally with a link to share, and you do not want to spend your first
hourweek (depending on how technical you are) wiring infrastructure.Control + flexibility: you need to work in a real codebase, follow engineering workflows, use a specific stack, and keep the architecture tidy.
1. If you want speed + simplicity
Start with an end-to-end app building platform when your goal is momentum.
This is the right move when:
you are building prototypes of features and apps, web pages, disposable prototypes, internal tools, or an MVP from scratch
you want backend logic (database, auth, storage, deployments)
you want to add AI behaviour (chat, analysis, generation) without wrestling with keys and SDKs
you’re just getting into AI coding or vibe-coding and don’t feel ready to fight with local setup
If you’ve never done this before, jumping straight into Claude Code or Codex can create a lot of friction: terminals, repos, environment issues. An all-in-one tool keeps the cognitive load low so you can stay in idea → feedback → iteration mode.
If you start directly in a terminal agent or an IDE without context, the learning curve can shrink your ambition. It’s just too many things to cover in one go. You end up thinking like a cautious junior engineer instead of a curious product builder, solving small problems instead of turning the big vision into something tangible.
2. If you want control + flexibility
Choose an AI-native IDE or an agentic tool (and optionally add an agent) when:
you work in existing projects and need to contribute to a shared codebase
you care about code structure, reusable components, refactors, tests, and reliability
you need full flexibility on stack (framework, language, UI library)
you are comfortable with Git and basic terminal workflows
you understand the basics of deployment and backend integration (or you are ready to learn it)
you want to take advantage of advanced agentic features, such as skills, MCPs, parallel agents, etc.
Here, you’ll be happier with AI-native IDEs and agentic coding tools:
Use Cursor, Windsurf, Antigravity, Trae, Kiro, Replit IDE, Theia AI-native when you want a full editor plus powerful agents and multi-model support.
Use Claude Code, Codex, Devin, Aider for repo-level automation, big refactors, or “do this task for me” workflows around an existing codebase.
3. If you want visual UI without the full-stack overhead
Pick a design-to-code tool when your goal is frontend output, not a running application:
you need to prototype UI concepts or compare multiple visual directions quickly
you are handing off components or pages to developers who will wire up the logic
you want to maintain design system consistency across prototypes and production
you care about visual fidelity and clean code export, not databases or deployment
you want to plug into AI coding agents (via MCP) so the design flows straight into the codebase
Use Subframe, Pencil, Paper when you want a design canvas that produces real code with zero conversion loss. Use Magic Patterns, MagicPath, Stitch, Banani when you want AI-generated UI from prompts or screenshots. Use Builder.io Visual Copilot, Locofy when you need to convert existing Figma designs into code that matches your current codebase and framework.
These tools pair well with other categories. A common workflow: explore layouts in Magic Patterns or Stitch, export components, then continue building the application in Lovable, Cursor, or Claude Code.
You are not locked in
Starting in an all-in-one platform does not mean you are stuck there. You can always switch to a more powerful tool once you outgrow the platform and get more comfortable with technical concepts.
The healthiest pattern I see is: start in an all-in-one platform, then mix in agentic tools.
What makes that possible is:
GitHub sync: when you outgrow the platform or need more flexibility, you can export your code and move into Cursor, Windsurf, or a team repo.
Two-way collaboration: tools like Replit or Lovable let different people use different frontends (IDE vs platform UI) against the same project, so devs can use their favourite AI IDE while designers and product people stay in the friendlier UI.
A practical pattern:
Start in a Design-to-code tool with exploring ideas and visual concepts, put together a mood board and inspiration materials. When visual precision matter - mock up your components. Export code snippets of your components and import them to other coding tools, or simply screenshot when your visuals are still raw.
Use All-in-one app builder to add interactivity and functionality to your visual concepts, validate flows, and get something clickable in front of users quickly.
Once the product direction stabilises, export to GitHub and continue in an AI-native IDE with agents, or hand it over to developers.
Keep the platform linked for non-technical teammates, or for spinning up variants and demos while the core product evolves in code.
🚀 Want a live walkthrough? I’m running a free lightning session on this.
Join here, or watch the recording if it’s already happened →
Also, I have explored All-in-one app building platforms in more depth in this article:
