Preparation

Complete these steps before 16 September, on the computer you will bring to the workshop. Time required: about 30 minutes.

The last step is a prompt: your coding agent checks the setup and lists anything that is missing.

Requirements

• A laptop with macOS, Windows or Linux on which you can install software. If you cannot install software, use a GitHub Codespace instead, as described at the end of this page.
• A paid Claude Pro or Max or ChatGPT Plus subscription. The free plans do not include the command-line agents.
• No programming experience is required.

What the workshop covers

A coding agent builds a page from the Figma design. A separate program, which the agent also writes, checks the page against the design and reports every difference. The agent fixes the reported problems and runs the program again until it passes. The page is then published on Netlify.

Accounts

Operating system

Open a terminal

A terminal is a window for running programs by typing commands. Every command on this page has a Copy button: copy the command, paste it into the terminal, press Enter, and wait for the prompt to return before running the next one.

How the terminal behaves

Install the tools

brew install node gh

winget install --id OpenJS.NodeJS.LTS

winget install --id Git.Git

winget install --id GitHub.cli

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

sudo apt install -y curl git gh

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash

nvm install --lts

Coding agent (one of the two)

Install the agent that matches your subscription.

npm install -g @anthropic-ai/claude-code

npm install -g @openai/codex

Netlify CLI

Publishes the site at the end of the workshop.

npm install -g netlify-cli

A browser for the checker

The checker you build in the workshop opens the page in Chromium through Playwright. Downloading it now saves about 150 MB on the conference wifi. On Linux, if it reports missing libraries, run npx playwright install --with-deps chromium instead; it asks for your password.

npx playwright install chromium

If a command reports command not found right after installation, close the terminal and open a new one.

Sign in

Each sign-in command opens the browser. Approve access there, then return to the terminal. The status command confirms the result.

GitHub

gh auth login

Answer with the arrow keys and Enter: GitHub.com → HTTPS → Yes (authenticate Git) → Login with a web browser. Copy the one-time code, press Enter, paste the code in the browser and click Authorize.

Check:

gh auth status

Coding agent

claude auth login

claude auth status

codex login

codex login status

Netlify

netlify login

Click Authorize in the browser, then return to the terminal.

Check:

netlify status

Create the repository

This command creates a private repository named turbine on your GitHub account and clones it into a turbine folder in the current directory.

gh repo create turbine --private --clone

cd turbine

The workshop starts in this folder: cd turbine, then start the agent. Do not add files to it.

Check:

git remote -v

If a repository named turbine already exists on your account, choose another name and use it wherever this page says turbine.

Check the setup

The agent checks every item from the previous steps and reports what is missing. It does not change anything.

1. Go to the project folder:

   cd turbine

   Copy
2. Start the agent: claude or codex. If it asks whether to trust the folder, answer yes.
3. Paste the prompt below and press Enter.

Check that this computer is ready for a workshop. Do not install, sign in to or change
anything: only inspect, and run whatever commands you need to do that.

Check each item and report the result as a table with three columns: what you checked,
what you found, OK or NOT OK.

1. Node is installed, version 22.15 or newer, and npm works.
2. Git is installed and has a user name and email configured.
3. The GitHub CLI (gh) is installed and signed in.
4. The Netlify CLI is installed and signed in.
5. You, the agent running this check, are installed and signed in. State which agent you are.
6. This folder is a git repository with a GitHub remote, and that repository exists on
   GitHub under the account gh is signed in as.
7. This folder contains nothing except git's own files.
8. Playwright's Chromium browser is already downloaded (look in Playwright's browser cache;
   do not download it yourself).

For every NOT OK item, give the fix in one or two plain sentences, with the exact command
if there is one. End with one line: READY, or NOT READY and the number of items left.

The agent asks for permission before each command; allow it. Fix every NOT OK item and run the same prompt again until the result is READY. If the agent does not start, repeat Sign in.

Without installing: GitHub Codespaces

If you cannot install software, use a GitHub Codespace: a cloud computer in the browser with Node, Git and GitHub CLI preinstalled and already signed in to GitHub.

1. On github.com, click + → New repository. Name: turbine. Visibility: Private. Select Add a README file, because a Codespace cannot be created for an empty repository. Click Create repository.
2. On the repository page, click Code → Codespaces → Create codespace on main. The terminal is the panel at the bottom, already in the repository folder.
3. Delete the README so the folder is empty:

   rm README.md

   Copy
4. Install the agent and the Netlify CLI with the commands from Install the tools. For the browser use npx playwright install --with-deps chromium. Node, Git and GitHub CLI are already installed.
5. Sign in to the agent and to Netlify as described in Sign in. The terminal prints a link instead of opening the browser: hold Ctrl or Cmd and click it. For Codex, use the device sign-in:

   codex login --device-auth

   Copy

   If Codex reports that device code login is not enabled, turn it on in ChatGPT → Settings → Security and run the command again.

6. Run Check the setup in the Codespace terminal. Skip cd turbine: the terminal is already in the project folder.

The GitHub free plan includes 120 core-hours of Codespaces per month; the workshop uses about 3. On the day, reopen the same Codespace from github.com/codespaces.

FAQ

On the day

• Bring your laptop and charger.
• If the setup check did not report READY, come 15 minutes before the start.