Skip to content
datastudyguides

Special · Claude Code 101

Claude Code from zero: build your first local app

Install Claude Desktop, open Code, choose an empty folder, and build your first local app with ready prompts and no CLI.

10 slides · October 4, 2026

  1. Beginner visual showing the regular Claude desktop app as the first step before opening Claude Code.

    GPT Image visual

    01 Start

    Install Claude Desktop

    Download the normal Claude desktop app for Windows or macOS, install it, then sign in.

    Download Claude ↗
  2. Beginner visual showing the Claude desktop Code tab highlighted, with no command line required.

    GPT Image visual

    02 Easy

    Open the Code tab

    Click Code at the top of Claude. Claude Code is built into Desktop, so you do not need Node.js or a separate CLI install.

    Claude Code desktop quickstart ↗
  3. Beginner visual showing Claude Code Local selected and an empty my-first-app folder being chosen.

    GPT Image visual

    03 Setup

    Choose Local

    Select Local, click Select folder, create an empty folder called my-first-app, and open it.

    Claude Code desktop quickstart ↗
  4. Beginner visual showing the Claude desktop Code workspace where the active model can be selected.

    GPT Image visual

    04 Model

    Pick Opus 5.5

    Use the model dropdown next to Send and select Opus 5.5 when it is available on your Claude plan.

    Claude Code desktop quickstart ↗
  5. Beginner visual showing a first Claude Code prompt creating HTML, CSS and JavaScript files and a local focus timer preview.

    GPT Image visual

    05 Paste in Claude

    Paste your first prompt

    Start with one clear request.

    Paste into chat with Claude Code 
    Build a polished focus timer with HTML, CSS and JavaScript. Start from this empty folder, run it locally and open the preview.
    Claude Code desktop quickstart ↗
  6. Beginner visual showing generated app files flowing into a working local focus timer preview.

    GPT Image visual

    06 Magic

    Watch the app appear

    Claude creates the files and can start the local dev server. The running app opens in the Browser pane inside Claude Desktop.

    Preview your app with Claude Code ↗
  7. Beginner visual showing the focus timer improved with a larger timer, warm theme, dark mode and a today counter.

    GPT Image visual

    07 Paste in Claude

    Improve it with one sentence

    You still do not need to edit code yourself.

    Paste into chat with Claude Code 
    Make it premium: warm cream background, bigger timer, 25/5/15 presets, dark mode and a subtle finish animation.
    Claude Code desktop quickstart ↗
  8. Beginner visual showing a Today counter added to the improved focus timer app.

    GPT Image visual

    08 Paste in Claude

    Add a real feature

    Now change behavior, not just style.

    Paste into chat with Claude Code 
    Remember completed focus sessions, show today's count, and keep it after I refresh the app.
    Claude Code desktop quickstart ↗
  9. Beginner visual showing the local focus timer app ready to be checked after Claude created its files.

    GPT Image visual

    09 Paste in Claude

    Let Claude check it

    Finish with a simple quality check.

    Paste into chat with Claude Code 
    Test the main interactions, fix anything broken, and tell me exactly what you verified.
    Claude Code best practices ↗
  10. Beginner visual showing the finished improved focus timer as the result of the first Claude Code project.

    GPT Image visual

    10 Done

    You built your first app

    Claude Desktop -> Code -> Local folder -> prompt -> preview -> improve. That is enough to build your first working local app.

    Claude Code desktop quickstart ↗
Back to For you