Design with Code

Exercise 18

Explore AI Tools

Get a practical map of the AI tool landscape — from online prototyping tools to desktop code editors — so you can make informed choices.

What you'll learn

Key takeaways from this exercise

  • Understanding the AI tool landscape: online prototyping tools vs desktop code editors
  • Learning when to use quick online tools vs desktop tools like Cursor and Claude Code
  • Understanding the difference between AI models and AI apps
  • Comparing how the same component gets built in two different tools

Introduction

You've built a portfolio site and a weather app. You've used a code editor throughout the course for editing code and running commands. But the AI tool landscape is much bigger than a single editor. Before you start using AI tools for real work, it helps to understand what's actually out there. The landscape is growing fast, and different tools serve different purposes. Knowing which tool to reach for — and when — is a real skill.

Online vs desktop tools

At the broadest level, AI coding tools fall into two categories: online tools for fast prototyping and desktop tools for real work.

Online tools like Lovable, v0, and Bolt let you generate UI components or even entire applications from a text prompt or an image. You describe what you want, and the tool produces code — often in seconds. These are fantastic for quick experiments, exploring ideas, and building one-off prototypes. The tradeoff is control: you have less say over how the code is structured, which files it creates, and how it integrates with an existing project. They're great for starting from zero, but harder to use when you need to work within an existing codebase.

Desktop tools like Cursor and Claude Code work differently. They run directly in your local development environment, which means you stay in full control of your project. You decide which files to create, how to structure things, and when to accept or reject AI-generated changes. Cursor is an AI-first editor built around collaborating with AI inside the editing experience. Claude Code is more terminal- and agent-oriented: instead of living in a traditional editor UI, it helps you work through prompts and commands directly in your codebase. Both are excellent for anything beyond a quick prototype.

AI models vs AI apps

The tools you see and use are interfaces built to interact with code and AI. But behind every such interface is an AI model — the brain that actually generates the code. Companies like Anthropic (Claude), OpenAI (GPT), and Google (Gemini) build the models. The apps — Cursor, v0, Claude Code — are the interfaces that connect you to those models.

This distinction matters because models change fast. A model that's best today might be surpassed next week. But the app you choose matters more for your day-to-day workflow: how does it integrate with your editor? How does it handle file context? How does it let you review changes? Most modern AI apps let you switch between models, so you're not locked in.

What you'll do

You've been using a desktop code editor throughout this course. In this exercise, you'll also try online tools and then compare them with a desktop workflow. The goal isn't to pick a winner — it's to understand the landscape so you can choose the right tool for the right situation. Quick experiment? Online tool. Real project? Desktop tool. Sometimes you'll start an idea in v0 and refine it locally in Cursor, Claude Code, or another editor. That's a perfectly valid workflow.

Create a free account to access the full course

In order to access full course content and track your progress, please sign in