The most powerful dev tools.01 / 22

The most powerfuldev tools.

As a dummy (Ian), for dummies.

Start reading
The cover of Web Design For Dummies.

Scroll, use the nav, or press P to present

Claude Code

Build

  • You describe the outcome. It handles the code, git and GitHub.
  • Reads your Figma frames through connectors and builds them in your project folder.
  • Shows a plan, a diff and a live preview, so you review before anything ships.

Example prompt

read this figma frame, plan the build, implement it in this project, and show it in the preview

Sessions on the left, the conversation in the middle, a live preview on the right. Diff, terminal and plan panes open alongside.
code.claude.com/docs

What it can do

  • Reads designs
  • Plans first
  • Builds
  • Live preview
  • Reviews diffs
  • Opens PRs
  • Parallel sessions

Claude Code is its own thing.

Separate from Chat and Cowork.

TabWhat it’s forWhat it knows
ChatEveryday conversations with Claude.Its own chat history.
CoworkDispatch and longer agentic work.Its own tasks and history. Dispatch can start a Code session with a task.
CodeBuilding software in a project folder.One session’s history, the project folder, CLAUDE.md and auto memory. Nothing from your Chat or Cowork conversations.

Each tab keeps its own conversations. What I tell Chat or Cowork doesn’t carry into Code.

Connectors and skills are shared: set them up once under Customize.

Folders on your computer.

Plus its own saved context.

Your folder

Project folder

Pick a folder or repo when you start a session. Claude reads, edits and runs commands there.

Worktrees

For Git projects, each session can work in its own copy under .claude/worktrees, so parallel tasks don’t collide.

Terminal

The built-in terminal opens in the same folder, with the same environment as Claude.

What it remembers

Session history

Each session has its own history, saved on your computer. A new session starts fresh.

CLAUDE.md

A file in the project with instructions you write. Claude reads it at the start of every session.

Auto memory

Notes Claude writes itself from your corrections and preferences, carried into later sessions.

What that looks like on disk

my-project/            the folder I pick
├─ CLAUDE.md           instructions I write
├─ .claude/
│  ├─ worktrees/       one copy per parallel session
│  └─ settings, skills, rules
└─ …your files
~/.claude/             global settings, skills, rules

Claude Code: setup and use.

Install it. Open a folder. Go.

Use it when

Any build or edit task: reading a design, changing code, running the app.

Day to day

Describe outcomes, not commands. Claude handles the files, git and tooling. Add services any time from + → Connectors.

Access it uses

Your project folder, plus whatever the permission mode and connectors allow.

How to set it up

Point at it. Say what to change.

Selections become edit requests.

Select an element

Pick it in the live preview (Cmd+Shift+S), then say what to change about it.

Mark it up

Draw arrows, boxes, circles or text on the preview, then click Add to chat.

Comment on the diff

Click any line to leave a comment. Submit all your comments at once.

Attach a reference

Drop in a screenshot or mockup and say what to match.

Try it. Pick something, then say what to change.

localhost:3000

Spring sale starts Friday

Pick anything on this page, then tell Claude what to change.

After pointing, I say:

Click the heading, the paragraph or the button.

Permissions.

How much Claude asks first.

ModeWhat it does
ManualAsks before each edit and command.
Accept editsAuto-accepts file edits and common file commands like mkdir and mv. Still asks before other terminal commands.
PlanReads and plans. No edits until you approve the plan.
Bypass permissionsRuns without permission prompts. Anthropic’s docs recommend isolated environments. Safety checks still prompt on external sites.

Connections act with your account’s access. Each service page lists what that covers.

Press the white box to mark the two modes on the table.

How it all connects.

Claude Code sits in the middle.

Claude CodeConnectors reach into each tool.
FigmaDesign GitHubVersioning VercelDeployment SupabaseData RailwayScheduled tasks

Added when a prototype needs real data or scheduled work.

Other Connectors

  • CloudflareHosting and storage
  • NotionDocs and specs

Figma

Design

  • The source of truth for styles, variables, grids and components.
  • Manual control where precision matters. The agent takes repetitive canvas work.
  • Claude reads your frames and variable bindings, so builds inherit your tokens.

Example prompt

build this frame as a working page using my variables, text styles and components

The Figma editor with a frame selected and its Fill bound to a variable in the right-hand panel.
That fill is bound to a variable (bg/charcoal). Claude reads bindings like that when it builds from your file.
figma.com

What it can do

  • Design
  • Components
  • Variables and styles
  • Prototyping
  • Collaboration
  • AI agent

Figma: setup and use.

Connect once. Work from links.

Use it when

You have a frame or design system to build from.

Day to day

Paste a frame link, ask for the build, compare it with the design, and go again in small steps. Claude reads your styles and variables too.

Access it uses

Your Figma access: reads frames, styles and variables, and can edit files you can edit.

How to set it up

GitHub

Version control

  • Every change is versioned, so any earlier state is recoverable. Claude makes the commits.
  • Branches isolate experiments. Claude creates them and merges the keepers.
  • Pull requests make a change reviewable. Claude opens them and watches the checks.

Example prompt

take care of GitHub for me, and try a bolder layout so I can compare the two

A GitHub pull request with a comment pinned to a point on an image.
Pull requests support comments on images, so visual changes get reviewed in place.
github.com

What it can do

  • Version history
  • Branches
  • Pull requests
  • Collaboration
  • Hosting (Pages)
  • Automation (Actions)
  • Issues

GitHub: I ask. Claude does.

I’m a designer, not a developer.

I askClaude does
“take care of GitHub for me”Creates the repo and keeps every change saved.
“make the hover effect less intense”Edits the code and saves it as a new version.
“try a bolder version so I can compare”Makes a branch and builds it. The original stays untouched.
“I like that one”Merges that branch into the main version.
“go back to how it was”Reverts to the earlier version.
“do whatever works”Picks the approach, does it, and tells you what it did.

Git, GitHub, PRs and merges are Claude’s job. Mine is the design call.

How GitHub works.

Four terms. Claude handles all of them.

main branch worktree: this branch in its own folder pull request merge

Branch

A parallel line of work in the same repository.

Enables: trying a layout variant without touching the version that is live.

Worktree

A separate checkout of the repo, on its own branch, in its own folder.

Enables: parallel Claude sessions that can’t overwrite each other’s files.

Pull request

A proposal to merge one branch into another, shown as a diff.

Enables: review, comments and automated checks before anything lands.

Merge

Folding one branch’s changes back into another, usually main.

Enables: approved work becoming the shared version, ready for Vercel to deploy.

Claude runs all of this. You just describe the change.

GitHub: setup and use.

Connect once. No manual syncing.

Use it when

Any project you want versioned, shared or reviewed. Start from the first session.

Day to day

Claude makes the commits, branches and PRs, watches the checks, and can merge when they pass if the repo allows it. You review the preview and say what to change.

Access it uses

Your repo access via the connector and gh: reads and writes code, branches and PRs.

How to set it up

Vercel

Deploy

  • Builds and hosts every branch at its own URL.
  • Reviewers test the real build on real devices, with no setup.
  • Claude deploys it and sends you the link.

Example prompt

deploy this branch to vercel and give me the preview url

Vercel's Deployments page listing preview builds for branches and production builds from main.
Each row is a deployment. Preview rows are branch builds, and Production rows come from main.
vercel.com

What it can do

  • Deploy
  • Preview URLs
  • Hosting
  • Domains
  • Environment variables
  • Rollbacks

Vercel: setup and use.

Import the repo. Get previews.

Use it when

You want a shareable URL for review, or a host for the front end.

Day to day

Open the preview URL on a phone, send it for comments, and Claude ships it when it looks right. If a deploy fails, ask Claude to check the build output.

Access it uses

Your Vercel team access: deploys, and edits project settings and variables.

How to set it up

Supabase

Data and auth

  • A hosted Postgres database, browsable and editable as a table.
  • Sign-in and user management that Claude sets up for you.
  • Real data to design against, including empty, loading and error states.

Example prompt

add sign-in and a favorites table to this prototype using supabase

The Supabase table editor showing a table with rows of data.
The table editor shows live rows and lets you edit cells directly.
supabase.com

What it can do

  • Database
  • Sign-in
  • File storage
  • Auto-generated APIs
  • Realtime
  • Edge functions

Supabase: setup and use.

Connect it. Keep keys in .env.

Use it when

The prototype needs real data, sign-in or file storage.

Day to day

Describe the data, let Claude write the migration, then open the table editor to see the rows. Use real data to design empty, loading and error states.

Access it uses

Your project access: schema, data, SQL and migrations. Can be limited to one project or read-only.

How to set it up

Railway

Hosting and scheduled tasks

  • Runs services that have to stay up: APIs, workers, databases.
  • Scheduled tasks, like a nightly data refresh, that Claude sets up and deploys.
  • Logs and metrics show what happened when a run fails.

Example prompt

set this up as a scheduled task that runs every morning and deploy it to railway

A Railway project canvas with a card for each service and an activity feed of deploys.
Each card is a service in the project. The activity feed lists deploys and restarts.
railway.com

What it can do

  • Run services
  • Scheduled tasks
  • Databases
  • Variables
  • Logs and metrics
  • Deploy from GitHub

Railway: setup and use.

Deploy from the repo. Schedule it.

Use it when

Something has to stay running or run on a schedule: an API, a worker, a nightly refresh.

Day to day

Ask Claude to write the task, set the schedule and read the logs when a run fails. Claude handles the config.

Access it uses

Your project access: deploys, variables and logs.

How to set it up

One feature, start to finish.

Then rinse and repeat.

  1. 1

    Prep the design, wireframe etc

    Components, auto layout, named layers, variables, claude will read it all

    • Figma
  2. 2

    Start a session

    Paste the frame link and say what you want. Connectors on.

    • Claude Code
  3. 3

    Plan, then build

    Approve the plan, then watch the live preview as it builds.

    • Claude Code
  4. 4

    Check against the design

    Ask for every difference from the frame. Fix in small steps.

    • Claude Code
    • Figma
  5. 5

    Claude opens the PR

    It pushes the branch, opens the PR and watches the checks.

    • GitHub
    • Vercel
  6. 6

    Claude merges it

    Once checks pass, it merges and Vercel ships it. Then the next feature.

    • GitHub
    • Vercel

Add Supabase for real data, Railway for scheduled tasks.

01 / 22 Slide 0:00 of 0:30 Total 0:00 of 30:00