Claude Code can turn a plain-language request into files and a working app inside Visual Studio Code. For a beginner, the important first steps are not writing a perfect prompt. They are installing the official extension, opening the right project folder, understanding what the agent wants to change, and checking the result in a browser before asking for more.

Install and connect Claude Code

Visual Studio Code, also called VS Code, is Microsoft’s free code editor for Windows, macOS, and Linux. Install it, then open the Extensions panel from the left sidebar. You can also press Ctrl+Shift+X on Windows or Linux, or Cmd+Shift+X on macOS.

Search for Claude Code and choose the official extension published by Anthropic. Multiple search results may appear, so check the publisher before selecting Install. The extension adds a Claude Code panel to the editor’s sidebar.

Open that panel and follow the sign-in request in your browser. Sign in with your Claude account, then return to VS Code to confirm that the prompt field is ready. Access requires a paid account: Claude Pro costs $20 per month, while Claude Max plans for heavier use run from $100 to $200 per month. A free account does not provide access to the extension.

Code editor with a new sidebar extension beside a browser window showing a sign-in confirmation checkmark

▲ Extension installation and account sign-in

The editor may look busy at first. The left sidebar holds the file list and extensions, the center displays open files, and the terminal sits at the bottom. A terminal is a text interface for running commands. Claude Code works alongside these panels, so you can see the files it creates and the commands it runs without moving between separate apps.

Open a clean folder before your first prompt

Create an empty folder for your app, such as ClaudeProject. In VS Code, choose File > Open Folder and select it. This folder becomes the workspace: the set of files Claude Code will work on.

Open the integrated terminal from the application menu or with Ctrl+ on Windows or Linux and Cmd+ on macOS. Check that the terminal’s current path points to the same folder you opened in VS Code. This is an easy detail to miss. If the terminal is operating elsewhere, generated files or installed packages may land in the wrong place and disrupt the build.

Claude Code can create and edit files, organize folders, install dependencies, and run commands. Dependencies are packages an app needs in order to work. That ability removes much of the copy-and-paste work associated with browser-based AI chat, but it also makes review worthwhile. When the editor presents a proposed command or file edit for approval, look at the affected files and the change before allowing it. A diff is a view of what an edit adds or removes.

Build in four focused requests

A small productivity app called Daybook shows how to move from an empty folder to something usable. It has a journal and a to-do list, with a shared design. Rather than requesting every feature and visual detail at once, give Claude Code one job, test it, and then move on.

  1. Create the foundation. Ask for a basic journal-and-task web app with a clean layout and navigation between the two sections. Ask Claude Code to set up the project and its dependencies and make it run locally. In this example, it created configuration and source files, installed frontend packages, and started a local development server—a process that lets you open the unfinished app in your browser. Check that both sections appear and that you can switch between them.
  2. Add the journal. Ask for an entry form with a title, writing area, mood choice, and optional tags, plus a list of saved entries. The example used LocalStorage, browser storage that keeps the app’s data on that browser after a refresh or closed tab. Create an entry, confirm it appears, refresh the page, and test deletion before moving on.
  3. Add tasks. Ask for task creation, Low, Medium, and High priority choices, due dates, completion controls, and filters for All, Active, and Completed tasks. Test a new task, mark it complete, and switch filters. Then return to the journal to make sure this addition did not disturb the feature you already checked.
  4. Polish the design. Once both sections work, ask for consistent typography and spacing, a light-and-dark theme toggle, and a layout that adapts to smaller screens. The Daybook example used green accents and rounded cards inspired by Evernote. Test both themes and inspect the app at desktop and mobile screen widths, including whether forms remain usable without horizontal overflow.

Laptop and phone showing journal cards and prioritized tasks in light and dark layouts with green accents

▲ Daybook across devices and themes

Keep each request specific enough to make its result testable. A foundation prompt should produce a running app, not a finished journal. A journal prompt should improve that feature without replacing working navigation. Compared with a single request for a fully polished app, this sequence makes it much easier to tell which change introduced a problem.

Check the files as well as the browser

A page that opens is a good start, but it is not the only check. After each request, look at the file tree in VS Code and review proposed edits when approval is requested. Then use the browser to try the behavior you asked for: switching sections, saving and deleting entries, completing tasks, filtering lists, and toggling the theme.

The finished Daybook project contains ordinary local source files, including a package configuration, components, styles, and assets. Those files can be kept, passed to another engineer, or deployed through a hosting provider. That portability sets this approach apart from building inside a proprietary no-code platform. Note, however, that an app running on your computer is not yet hosted online; deploying it is a separate step.

Start small, then verify each change

To try the approach, install Visual Studio Code and Anthropic’s official Claude Code extension, sign in with an eligible account, and open a fresh project folder. Confirm the terminal points to that folder before entering your first prompt. Ask for a minimal running app, review any requested changes, and test it in a browser. Add one feature at a time, leaving the broad design pass until the underlying features work.