Team 400 Training Portal

Afternoon track · hands-on

Build & ship real things.

The exercises are independent - pick the one that matches what you came for and start there. You won't finish all of them, and you're not meant to. Depth beats coverage.

A note on the prompts: they're starting points, not magic words. Read what the agent does, then steer it in your own words. That is the skill. Facilitators are walking the room - if you're stuck, put your hand up.
Part A

CoWork

No Claude Code needed - these two run entirely in Claude CoWork.

Exercise 1 · ~20 min · the gentle on-ramp

Fundamentals - CLAUDE.md & Markdown

How Claude works on a real folder of files, what a CLAUDE.md is, and how to edit alongside Claude - you in VS Code, Claude in CoWork, on the same files.

1.1Part A · 5 minCoWork

Make the project in CoWork

Create a new project pointed at a fresh folder my-first-project, then ask Claude to set it up.

Ask Claude to set it up
In this project, create a CLAUDE.md that describes what this project is (a sandbox for me to learn how Claude, Markdown and VS Code work together) and how you should behave here - keep things simple, explain what you're doing, and always use plain Markdown. Then create two more Markdown files: notes.md with a few bullets about today's workshop, and tasks.md with a simple checklist. Can you also make a markdown file which shows me the different options in the markdown file.
1.2Parts B & C · 13 minVS Code

Open it in VS Code & edit from both sides

You steer in VS Code; Claude does the heavy lifting - both editing the same folder.

  1. VS Code → File → Open Folder… → your my-first-project (or code . from a terminal in the folder).
  2. Click each file. On notes.md, click Open Preview to see it rendered.
  3. Edit by hand: in tasks.md add - [ ] Try editing a file myself and save (Cmd+S).
Then have Claude edit the same files
Add three more tasks to tasks.md for things you might do this week, and reorganise notes.md under two headings: "What I learned" and "What to try next."
Give Claude something to react to · troubleshooting 
I just added a rough note to notes.md - tidy it up and fold it into the right section.
  • VS Code won't open the folder → File → Open Folder, then pick the folder itself (not a file inside it).
  • Don't see Claude's changes → save your open copy first, then click the file again. VS Code reads from disk; Claude writes to disk.
  • Markdown looks like raw text → that's the source. Open Preview (Cmd+K then V) to see it rendered.
Checkpoint: a folder with a CLAUDE.md and two Markdown files, edited both by hand and via Claude - and you understand it's all just files in a folder.

Exercise 2 · ~25 min

Build your own AI agent

Design a narrow, reliable agent - scope, tools, guardrails - build it with the agent-creator skill, run it, review it like a manager, and have it improve itself.

2.1Steps 1-3agent-creator

Install the skill & write the job description

A clear job, the tools it can touch, hard guardrails, a repeatable output. Here's a real spec (Dave) you can copy and adapt.

agent-creator.skill ↓
Worked example - Dave, Personal Assistant 2.0
Please help me create an AI Assistant. Dave - Personal Assistant 2.0

Job:
Read my emails ([ADD YOUR EMAIL ADDRESS(ES) HERE]) and draft replies for me.

Look at my sent emails to learn my writing style, then draft replies in my voice.

Never send, delete or archive anything - draft only. Default to dry-run: show me what you'd draft before touching anything real.

Please use the agent-creator skill to build it.
2.2Steps 4-6Run & review

Dry-run, review like a manager, schedule

Check inputs and outputs, hold it to every guardrail, then set it up as a scheduled task.

Ensure everything's connected and it can get the data it needs. Check it against the job description - did it respect every guardrail and flag the genuinely urgent items? Send it back if it missed something: “You didn't flag the overdue payment - your job says you must. Redo.”

Iterate, iterate, iterate. The first pass is never 100%. Do the dry runs, check the inputs and outputs until you're happy. Then Co-Work → Scheduled Task → add one for the project (e.g. check emails every hour).

Self-improvement loop & troubleshooting
Practise self-improvement
Look back over the last few runs of this scheduled task. Where did you make mistakes or get stuck? Update your CLAUDE.md and skills so the next run is better - and tell me exactly what you changed and why.
  • It's too generic → you didn't give it enough “folder.” Tell it more about how you actually work.
  • It tried to send / archive → reinforce the guardrail in job-description.md (“NEVER send, only draft”).
  • It does the job differently each time → put the must-dos as explicit checks, not suggestions.
  • Output quality varies → give it an example of a great past deliverable. Examples are the strongest context.
Checkpoint: a job-description.md, at least one SKILL.md, and a real task list that passed your review. Narrow role, clear guardrails, human gate.
Part B

Coding

Start with easy mode - no install at all. Then do the one-time setup and drive Claude Code from the terminal.

Warm-up · no install · 5 min

Easy mode - chat to a website, drag it onto Netlify

From nothing to a live public URL with zero terminal - before you install anything. Describe an idea, download one file, drag it onto Netlify. This is the "wow"; the setup below is only for when you want more.

★Easy mode · 5 minClaude Desktop + Netlify

Build & publish a site with no setup

Describe an idea, get a page, drag one file onto Netlify for a live public URL. Zero terminal, zero cost.

  1. Open the Claude Desktop app and start a new chat.
  2. Paste the first vibe-code prompt. Deliberately short, to show a good idea beats a long spec:
The prompt
Build me a beautiful website, inspired from Steve Jobs, its for iphone 2050.

Claude builds it live as an artifact. Steer it in plain English - a few to run live:

Iterate by feel
Make it darker and more cinematic, one bold headline per screen as you scroll.
Add a hero, a specs section, and a "Reserve yours" call-to-action.
Now make the whole thing feel like a 2050 product launch - big type, lots of space.
  1. Publish free on Netlify - let Claude do it. Turn on the Netlify connector in Claude (Settings → Connectors), then just ask: "Publish this to Netlify." Claude deploys it and hands you back a live public URL like https://iphone-2050.netlify.app - no download, no drag.

No connector yet? Ask Claude for the page as one index.html, then drag it onto app.netlify.com/drop - same result.

Checkpoint: a genuinely good-looking site, live on a public link, built by describing an idea and published by Claude. To update it: change it in Claude and ask it to publish again.
Easy-mode limits: perfect for a landing page or demo - it's a single static file, so no blog, no database, no logins, and updating means re-dragging. Want a real multi-page, SEO-ready site that redeploys on every git push? Install Claude Code below, then do Exercise 3.

Before you code

Setup - install Claude Code

Everything in Part B drives Claude Code from the terminal. Get it installed once now.

Setup~10 min

Install VS Code & Claude Code

You need a code editor, Node.js, and the Claude Code CLI.

  1. Install VS Code from code.visualstudio.com.
  2. Install Node.js 18 or newer (LTS recommended) from nodejs.org.
  3. Install the Claude Code CLI in a terminal:
Install the Claude Code CLI
npm install -g @anthropic-ai/claude-code

Then open a project folder in the terminal, launch it, and log in the first time it asks:

Start Claude Code
claude

The first run opens a browser link to sign in with your Claude account. You can also type /login inside Claude Code.

Troubleshooting
  • command not found: claude - close and reopen the terminal so it picks up the new command.
  • Prefer a one-line installer? On macOS/Linux: curl -fsSL https://claude.ai/install.sh | bash
  • There's a step-by-step PDF in your workshop folder: Claude_Code_Setup_Guide_Recreated.pdf.

Exercise 3 · ~30 min

Vibe-code a website (and deploy it free)

The pro mode version of easy mode above: the Claude Code CLI, a real SEO-ready site with a markdown blog, deployed on GitHub + Cloudflare Pages so every git push redeploys.

3.1Pro mode · 15 minClaude Code CLI

Grab the prompt, plan first, build

React + static-site generation (so it actually ranks), a markdown blog, SEO baked in from day one.

website-core-prompt.md ↓
  1. Setup - new empty folder my-website, open it in VS Code, open a terminal and type claude.
  2. Plan first - in Claude Code press shift+tab to switch to plan mode. Paste the prompt, add your business description, read the plan, change anything you don't like, then say “Good, build it.”
  3. Run it - usually pnpm dev (or npm install then npm run dev). Open the local URL it prints.
Make it Bob's - iterate by feel
Make this Bob's Building Company. Header dark, buttons orange, add Bob's phone number to the top, and three service pages: extensions, decks, bathrooms.
Checkpoint: a real, SEO-ready site running locally with a working blog - built from one prompt, no hand-coding.
3.2Learn · 5 minDNS · Server · Auth

Cross the line on purpose

See where toy ends and real begins - the DNS / Server / Auth conversation, made real on your own project.

Ask the grown-up questions
If I wanted to actually put this live on the internet for real customers, what would I need? Explain DNS, hosting/server, and whether this needs any login or security. Keep it plain.
⚠️ Safety: fine to share as a link or run locally. Not safe to collect customer data or take payments until a real developer adds auth and proper hosting. Never put passwords or API keys in code you'll share publicly.
3.3Deploy · 10 minGitHub + Cloudflare

Deploy it for free - GitHub + Cloudflare Pages

Static sites host free on Cloudflare Pages, and every git push redeploys automatically.

A · Put the code on GitHub. Log into the GitHub CLI first: ! gh auth login (in your terminal), then:

Let Claude Code do the git work
Initialise a git repo here, add a sensible .gitignore for a Node/Vite project, commit everything, then create a new private GitHub repo called bobs-website and push to it using the gh CLI.
B · Connect Cloudflare Pages · C · The magic loop

B - dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git → choose your repo. Build config:

  • Framework preset: None
  • Build command: npm run build
  • Build output directory: dist

Save and Deploy → ~1–2 min → a live URL like https://bobs-website.pages.dev.

C · The magic loop - change something with Claude Code (“add a contact page”), then say “commit and push.” Cloudflare redeploys on its own. That's continuous deployment, for free.

Cloudflare build fails? Open the build log. Build command must be npm run build, output dist. Node-version error → add env var NODE_VERSION = 20. Paste the log to Claude and it'll fix it.
Final checkpoint: your site is live on a public URL, and pushing a change redeploys it automatically - total hosting cost: $0.

Exercise 4 · ~30 min · hardest, pair up

Build and run a local MCP

Understand MCP by building the smallest possible one, for an API with no off-the-shelf connector.

4.1Build & connectClaude Code

Scaffold it, run it, connect it

A connector is someone else's pre-built MCP. When there's none, you build your own small server and Claude can call it.

Create my-first-mcp, open it in VS Code, open the terminal, launch claude.

Let the agent scaffold it - you supervise
Help me build a minimal local MCP server in [Python or Node - your choice]. It should expose ONE tool that calls a free public API - let's use a weather API or a public holidays API that needs no key. Plan it first, then build it, then tell me exactly how to run it.
Connect it, then force Claude to use it
Claude Desktop: Using my local MCP, what's the weather in Brisbane? / what are the next public holidays?
Bring it home · troubleshooting 
Now imagine this pointed at our internal system instead of a weather API. That's how you'd connect Claude to [your CRM / your database]. Same pattern, different endpoint.
  • Server won't start → paste the full error to the agent. Missing dependency is the usual cause.
  • Claude can't see the tool → check the MCP is registered and running; restart Claude if needed.
  • Stuck >5 min → grab a facilitator. This exercise has the most moving parts.
Checkpoint: Claude answered using a tool you built and ran locally. That round-trip - Claude → your MCP → the API → back - is the whole concept.

Advanced Vibe Coding · 60–90 min

Advanced Vibe Coding: TaskFlow

Build a working Next.js task tracker step by step, then deploy it. You don't need to understand every line - the goal is the engineer's loop: Ask → Review → Approve → Run → Check → Improve.

Part 5(a) · Build it locally

Build TaskFlow

5.1Next.js · Prisma · SQLite

Build it one small step at a time

Create, complete, filter and delete tasks, saved in a local SQLite database. Do one step at a time; run or refresh after every prompt.

Step 1 - create the project
npx create-next-app@latest taskflow --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd taskflow
claude
Step 2 - ask Claude to understand it & plan (don't edit yet)
Inspect this new Next.js project and explain the important files in simple language.
Then propose a short plan for building a beginner-friendly full-stack task tracker called TaskFlow.

The app should use:
- Next.js App Router
- TypeScript
- Tailwind CSS
- Prisma with SQLite for local database storage
- Server Actions or API routes, whichever is simpler for this project

Do not edit files yet. First explain the plan and wait for me to approve it.
Show steps 3–9 (UI → database → features → polish → memory)
Step 3 - first UI with sample tasks
Build the first version of the TaskFlow home page using temporary sample tasks only.

Requirements:
- Replace the default Next.js starter page.
- Show the title "TaskFlow" and a short subtitle.
- Show an input box and an Add button (they don't need to save yet).
- Show 3 sample tasks with a completed state.
- Show filter buttons for All, Active, and Completed.
- Use clean Tailwind CSS styling and keep it beginner-friendly.

After editing, tell me which files changed and how to run the app.
Step 4 - add the database
Add local database storage for tasks using Prisma and SQLite.

Requirements:
- Install and configure Prisma if not already installed.
- Create a Task model with id, title, completed, createdAt, and updatedAt.
- Add a seed step with a few example tasks.
- Keep the database local; explain every terminal command.
- Do not remove the UI from the previous step.
Step 5 - connect UI to real tasks
Connect the TaskFlow page to the real SQLite database.
- Load tasks from the database and display them.
- Add a new task on submit; prevent empty tasks; show a validation message.
- Use Server Actions or API routes consistently.
- Tell me how to test adding a task in the browser.
Step 6 - complete, delete, filter
Add the main task management features to TaskFlow.
- Mark a task completed or active; delete a task.
- Make the All, Active, and Completed filters work.
- Show a progress summary like "2 of 5 tasks completed".
- Give me a manual browser checklist to verify the features.
Step 7 - polish · Step 8 - review · Step 9 - memory
Polish the TaskFlow app: spacing, colours, layout, empty states, small loading states. Keep it clean, not flashy. Do not add new major features.

Then: Review this project as if I am new to coding - what it does, key files, how the frontend talks to the backend, how tasks are saved, and how to run it tomorrow. List any bugs before fixing.

Finally, run /init to create CLAUDE.md, then add a rule: keep this project simple and beginner-friendly. Prefer small, readable changes over clever code.
Done when: npm run dev runs, you can add / complete / delete / filter tasks, they survive refresh, the design is clean, and there's a CLAUDE.md.

Part 5(b) · Vibe Coding Parts 2 & 3

TaskFlow Deployment - GitHub & Railway

Back up your build online, then put it on the internet with a public link.

5.2Part 2 · GitHub

Push your project to GitHub

Create an empty private repo taskflow (don't add README/.gitignore/license), sign in with gh auth login, then let Claude do the git work.

Paste into Claude Code
I have created an empty private GitHub repository at:
<PASTE YOUR REPOSITORY URL HERE>

Please:
- Initialise git in this project if it is not already.
- Make sure a sensible .gitignore is in place (node_modules, .env, the local SQLite file).
- Create a first commit.
- Add that GitHub repository as the remote named "origin".
- Push the code to the main branch.

Explain each command before you run it, and stop if anything needs my GitHub login.
5.3Part 3 · Railway

Deploy to Railway

Sign up at railway.com (sign in with GitHub), install the Railway CLI, run railway login, then ask Claude to deploy.

Paste into Claude Code
I have installed the Railway CLI and run `railway login`.

Please deploy this Next.js app to Railway using the Railway CLI:
- Create a new Railway project for this app.
- Configure the build and start commands correctly for a Next.js app.
- Give me the public URL once it is live.

Note: this app uses a local SQLite database. Please explain in simple language what that
means for a deployed app, and set up the simplest option that keeps my data working on
Railway. Explain each command before you run it.
Heads-up: a local SQLite file doesn't automatically persist on a host. Let Claude recommend the simplest option - a persistent volume or a Railway-hosted database - and explain it.
Bonus

Your own always-on bot

Optional, and mostly web-based - deploy a chat bot you can message from your phone.

Bonus · setup guide

OpenClaw - easy setup

Deploy your own chat bot on Railway, pay-per-token via OpenRouter, and chat with it from Telegram.

6.1Railway · OpenRouter · Telegram

Deploy & connect

The great part: once it's running you just chat with it to set things up - and via Railway, Claude can go in and fix it for you.

  1. Sign up at railway.com → dashboard.
  2. Click Template, search openclaw, use the one from Techulus.
  3. Wait for deployment. Find your URL under Deployments and setup_password under Variables.
  4. Open the URL, log in with username admin + that password, and run the setup via the web UI.
  5. Add your OpenRouter key - pick a model (e.g. deepseek/deepseek-v4-flash: cheap but smart). Paid models don't use your data for training.
  6. Set up a channel - Telegram is easiest. Paste your bot token, note the pairing code, then Manage Devices → Connect, and start chatting.
Troubleshooting - debug with Claude
  1. From the OpenClaw config, get the raw config JSON.
  2. Put it into Claude and ask Claude to help debug.

If you log into Railway locally via the CLI, Claude can go in and fix OpenClaw directly for you.

Note: the original guide's screenshots live in your workshop folder under Afternoon/OpenClaw/.

Wrap-up

What to take home

📁

Your workshop folder

Every skill and instruction file you built is yours to keep and use Monday.

💡

The one sentence

An agent is the model + your context + tools + guardrails.

🔁

The habit

When you do something twice, build the folder once.

After the training

Where to go from here with Team 400

Four ways we can keep you moving - from self-paced learning to a trained AI engineer embedded in your team.

See what's next →