Three ways to start

When to use it: you have a clear idea, you want to build something from scratch without going through GitHub, and you want to move fast.

Requirements: a Claude Pro or Max account. Nothing more.

What happens in practice

Claude Code points to a folder on your computer and creates files inside it. It's like having someone working directly in your Finder, in real time.

Step 1: Create the project folder

Inside dev_projects, create a new folder with a clear name: portfolio-2026, prototype-login, landing-client. No spaces, no capitals, no accents.

Step 2: Point Claude Code at that folder

In the Desktop app: switch to Code mode, click "Choose folder" and select your folder.

In VSCode: open VSCode, then File > Open Folder, select your folder. Open the integrated terminal (Cmd+`) and run claude.

Step 3: Describe what you want to build

Create an index.html file with a minimal portfolio page.
White background, dark typography, a hero section with my name
and title, a grid of 6 projects with title and description,
a footer with my links. Use Tailwind CSS via CDN.

Step 4: Iterate and deploy

vercel          # Preview URL
vercel --prod   # Final public URL

Path A doesn't go through GitHub. Your files exist only on your computer (and on Vercel if you deploy). That's enough for most prototypes and solo projects.

When to use it: you want to quickly explore several visual directions before committing to a file structure.

Requirements: a Claude account (even a free one for initial prototyping), Git, a GitHub account, VSCode.

The idea

Claude chat can generate HTML directly in an artifact: a preview window that opens inside the conversation. You see the result in real time, you can ask for changes, and when the interface looks right, you grab the source code.

HTML artifacts are particularly useful for exploring layouts, testing color palettes, or showing a direction to a client in a matter of minutes.

The steps

1. Prototype in a Claude artifact
2. Copy the HTML code (click the artifact, copy the code)
3. Create a GitHub repository
4. Add the HTML file to the repository
5. Clone the repository in VSCode (Cmd+Shift+P > Git: Clone)
6. Run claude in the integrated terminal and keep iterating
7. Sync with GitHub and deploy

git add .
git commit -m "Add hero section and navigation"
git push origin main
vercel --prod

Time saver: Claude Code can handle the entire Git process for you. Just tell it: "save the changes with the message 'navigation redesign' and push to GitHub".

When to use it: you want a visually polished interface very quickly, or you want to leverage the specific strengths of another tool for the exploratory phase.

What each tool brings

Lovable generates complete React applications. It exports natively to GitHub in one click, making it the simplest to connect to Claude Code.

Google AI Studio with Gemini is particularly strong for data-heavy interfaces, dashboards, and components with business logic.

Bolt and v0 (Vercel) also export to GitHub and generate React interfaces with Shadcn components.

Steps for Lovable to Claude Code

1. Build and develop the interface in Lovable.
2. Click "Connect to GitHub" in Lovable.
3. Clone the GitHub URL in VSCode.
4. Run claude in the integrated terminal.
5. Keep iterating with Claude Code.

Before changing anything, give Claude Code this instruction first: "Read the project structure, identify the stack and existing conventions. Summarize them before doing anything."

If you've never used Git, here are the four things you need to understand. Nothing more.

Repository: a project folder hosted on GitHub, with the complete history of all its changes.

Clone: downloading a copy of a repo to your computer, with the connection to GitHub maintained.

Commit: a named save. git commit -m "Navigation redesign" creates a snapshot of the project at that point. The equivalent of duplicating a Figma file before a major change.

Push: sending your local commits to GitHub. Without git push, your saves exist only on your computer.

You don't need to understand branches, pull requests, or merge conflicts to get started.