Workshop
Saturday, 1 August, 9:00 AM · Conference Room, Level 2
Before You Arrive
No experience needed — just curiosity. The AI Fundamentals course is a full, self-paced course rather than a quick primer, so start as early as you can before the workshop. Five modules take you from the basics to using AI responsibly:
Each module includes videos, readings, hands-on exercises, and discussion.
Start the AI Fundamentals CourseSee the reminders at the top of the page for what to bring on the day.
Workshop Curriculum
Hour 1 · Foundations
Welcome
AI Workshop for Volunteers and Staff at a Community Group in Singapore. Today, you'll go from zero coding experience to a live app on the internet. Let's get started.
Slide 1 of 73
Hour 1 · Foundations
Software that can understand language, spot patterns, and generate new content — text, code, images. It doesn't think like a human, but it follows instructions remarkably well.
Slide 2 of 73
Hour 1 · Foundations
AI Is Not Magic
It reads input, applies logic, and produces output.
Slide 3 of 73
Hour 1 · Foundations
AI Does Not Replace Judgement
It removes the manual steps between data and decision.
Slide 4 of 73
Hour 1 · Foundations
Does reliably
Doesn't do reliably
Slide 5 of 73
Hour 1 · Foundations
An AI assistant built by Anthropic. It can read, write, analyze — and, most importantly for today, write working software when you describe what you want in plain English.
Slide 6 of 73
Hour 1 · Foundations
Reading your prompt happens in one pass. Writing the reply means predicting one word, then the next, then the next — a new step for every word. That's why generating output costs more than reading input.
Slide 7 of 73
Hour 1 · Foundations
You explain what you need in everyday language. Claude writes the code. You test it, tweak the wording, and publish it. No syntax to memorize.
Slide 8 of 73
Hour 1 · Foundations
By day's end you'll have a real app, deployed and live on the internet, with a URL you can share. No coding required — we'll show you how to guide Claude.
Slide 9 of 73
Hour 1 · Foundations
Each team builds something useful for their own work today. Say hi to the people next to you.
Slide 10 of 73
Hour 1 · Foundations
Slide 11 of 73
Hour 2 · PRD Workshop
Garbage In, Garbage Out
Output quality depends entirely on the quality of the instruction.
Slide 12 of 73
Hour 2 · PRD Workshop
A Prompt Is an Instruction
Better instruction means better output.
Slide 13 of 73
Hour 2 · PRD Workshop
A Product Requirements Document: a short, plain-English description of what you want built — the problem, the users, what “done” looks like. It's how you talk to Claude.
Slide 14 of 73
Hour 2 · PRD Workshop
Claude builds exactly what you describe. A clear PRD means a clear app. A few extra minutes writing it down saves hours of back-and-forth later.
Slide 15 of 73
Hour 2 · PRD Workshop
Slide 16 of 73
Hour 2 · PRD Workshop
Problem: bills are long and technical. Goal: paste a bill, get a plain-English summary with key points highlighted. Users: admin team prepping for meetings. Output: a simple web page.
Slide 17 of 73
Hour 2 · PRD Workshop
Problem: captions take too long. Goal: enter a topic, get 3 draft captions in OTG's voice, ready to edit. Output: a one-page generator tool.
Slide 18 of 73
Hour 2 · PRD Workshop
Problem: tracking resident requests is messy. Goal: log requests, mark status, see what's outstanding at a glance. Output: a simple tracker page.
Slide 19 of 73
Hour 2 · PRD Workshop
With your team: pick a real problem you face, write the goal, who it's for, and what the finished app should do. Keep it to a few sentences — simple wins.
Slide 20 of 73
Hour 3 · Live Demo
A real app, live, start to finish, using only plain English — the same process you'll use this afternoon. Watch how I describe, refine, and check the result.
Slide 21 of 73
Hour 3 · Live Demo
Step 1 of 3
A short PRD in plain English — the problem, the goal, what it should look like. No jargon, no code, just a clear description of the app I want.
Slide 22 of 73
Hour 3 · Live Demo
Step 2 of 3
I paste the PRD into Claude and ask it to build the app. Claude reads the description and generates working HTML, styling, and logic — a real webpage.
Slide 23 of 73
Hour 3 · Live Demo
Step 3 of 3
I'll show you the generated code, test it in the browser, then drag it onto Netlify Drop to publish — no servers to configure, no setup, completely free.
https://app.netlify.com/dropSlide 24 of 73
Hour 3 · Live Demo
It's Live
A real URL — anyone can visit it. That's the whole loop: describe, build, ship. You'll repeat it for your own app after lunch.
Slide 25 of 73
Before Lunch · Beyond the Prompt
Beyond the Prompt
Before we break for lunch: a look at what's possible past a single prompt. The same describe → build → ship loop scales up — from a one-page tool to a full, real application.
Slide 26 of 73
Before Lunch · Beyond the Prompt
Instead of one instruction, you guide Claude through multi-step work — planning, building, testing, fixing — across many files, more like directing a small engineering team than writing a single prompt.
Slide 27 of 73
Before Lunch · Beyond the Prompt
Slide 28 of 73
Before Lunch · Beyond the Prompt
The screen, the buttons, the upload field. It takes the user's input and sends it to the backend, then receives and displays the result clearly. Your apps use React — a standard web interface framework.
Slide 29 of 73
Before Lunch · Beyond the Prompt
The user clicks a button. The backend does the work — reads the file, calls the AI, applies the rules. The user never sees this, only the result. Your apps use FastAPI — a Python backend framework.
Slide 30 of 73
Before Lunch · Beyond the Prompt
A login screen. A password. A token. Without it, anyone can open your app. For internal tools, company email login is enough — it doesn't need to be complex to be secure.
Slide 31 of 73
Before Lunch · Beyond the Prompt
Without one, every session starts from zero. With one: history, audit trail, reprocessing on demand. Uploaded files, AI outputs, approval status — all saved. Your apps use PostgreSQL — a standard relational database.
Slide 32 of 73
Before Lunch · Beyond the Prompt
A waiter between two systems that don't speak the same language. One asks, the other answers, in a fixed, agreed format.
Slide 33 of 73
Before Lunch · Beyond the Prompt
An API is a door between two systems. App A finishes, App B picks up the output — no manual handoff, no email, no re-keying. This is how a workflow becomes a platform.
Slide 34 of 73
Before Lunch · Beyond the Prompt
Beyond the Five Things
A solid app needs more than just the five components. Think about cybersecurity, infrastructure, and budget from the start.
Slide 35 of 73
Before Lunch · Beyond the Prompt
Who can see the data? Who can edit it? Encrypt sensitive information. Log who did what and when. Add rate-limiting to stop brute-force attacks. The more sensitive your data, the more careful you need to be.
Slide 36 of 73
Before Lunch · Beyond the Prompt
Today your app runs on one server. What if a thousand people use it tomorrow? Can your database handle it? Will your monthly bills explode? Plan for growth: caching, load balancing, distributed databases.
Slide 37 of 73
Before Lunch · Beyond the Prompt
A simple app costs $10–20/month to run. A complex one, $100–500. If you expect massive usage, costs can spike. Build with your infrastructure choices in mind — serverless scales down when nobody's using it; always-on servers don't.
Slide 38 of 73
Before Lunch · Beyond the Prompt
Your apps talk to each other through APIs. Agentic AI needs to talk to dozens of tools at once — a different problem, with its own name: MCP.
Slide 39 of 73
Before Lunch · Beyond the Prompt
One standard connector, instead of custom wiring for every AI-to-tool pairing. Anthropic calls it “USB-C for AI” — plug in once, connect to anything.
Slide 40 of 73
Before Lunch · Beyond the Prompt
Slide 41 of 73
Before Lunch · Beyond the Prompt
It reads the task, plans the steps, and picks a tool for each one — file, spreadsheet, search, app. It checks its own result, and repeats until the task is actually done.
Slide 42 of 73
Before Lunch · Beyond the Prompt
The core loop doesn't change: describe, build, check, refine. What changes is scope and structure — more features, more iterations, and clearer instructions to keep it on track.
Slide 43 of 73
Before Lunch · Beyond the Prompt
I'll walk through a few real apps built this exact way — how they started small, how they grew, and the prompts and techniques behind them.
Slide 44 of 73
Before Lunch · Bonus: Gemini in Drive
One More Tool You Already Have
Gemini, built into Google Drive. No new login, no new app — just a different way to ask.
Slide 45 of 73
Before Lunch · Bonus: Gemini in Drive
Slide 46 of 73
Before Lunch · Bonus: Gemini in Drive
From what's already there: ask it to draft a reply based on a document's content, or turn a summary into a new Doc, or a table into a new Sheet.
Slide 47 of 73
Before Lunch · Bonus: Gemini in Drive
It only sees Google content — Drive, Docs, Gmail, Chat, Calendar, nothing outside — and only what's already shared with you; it can't grant new access. New files land in the folder you had open, or in My Drive.
Slide 48 of 73
Before Lunch · Bonus: Gemini in Drive
Slide 49 of 73
Before Lunch · Beyond the Prompt
AI is confident but not always correct. Always verify: Does this match your experience? Can you spot-check the facts? Does it answer what you actually asked? If unsure, ask a second AI or a human expert.
Slide 50 of 73
Before Lunch · Beyond the Prompt
Identify repetitive tasks: email summaries, document review, data extraction, status tracking. AI excels here. Write a clear description of what you're doing now, and Claude can build a tool to automate it.
Slide 51 of 73
Before Lunch · Beyond the Prompt
Slide 52 of 73
Before Lunch · Beyond the Prompt
Now: Choose Your Path
Three ways to build apps. Different purposes, different complexity. Pick the one that fits your goal.
Slide 53 of 73
Before Lunch · Beyond the Prompt
Write one HTML file. Save locally, open in browser. No servers, no deployment, no setup. Perfect for internal tools, experiments, or learning. You'll use this path this afternoon.
Slide 54 of 73
Before Lunch · Beyond the Prompt
One file. Describe what you want. Done in minutes. Share by emailing the file or uploading to Netlify Drop.
Slide 55 of 73
Before Lunch · Beyond the Prompt
Visual AI editor. Design by describing or dragging. AI generates the code. Easier than coding, more control than static HTML. Perfect for prototypes or beautiful UI fast.
Slide 56 of 73
Before Lunch · Beyond the Prompt
No terminal, no GitHub. Cloud-based. You see changes instantly. Best for visual designers.
Slide 57 of 73
Before Lunch · Beyond the Prompt
Full control. Claude plans, writes, tests everything. You push to GitHub, deploy to Vercel. Custom domain, real backend, databases. For production-ready apps.
Slide 58 of 73
Before Lunch · Beyond the Prompt
Takes hours not minutes. But you get a real app with backend, database, custom domain. Scales to thousands of users.
Slide 59 of 73
Before Lunch · Beyond the Prompt
Which Path Today?
Start with Path 1 (HTML). Ship something real in an afternoon. If you want more control later, grow into Path 3.
Slide 60 of 73
Before Lunch · Beyond the Prompt
Edit video by editing text. Upload your recording, Descript transcribes it. Remove words from the transcript, the video edits itself. Add captions, remove filler words, rearrange clips — all by editing text.
Slide 61 of 73
Before Lunch · Beyond the Prompt
Tools like Hermes harness and OpenClaw can read your messages and calendar, propose meeting times, and coordinate with stakeholders to deconflict schedules. Less manual back-and-forth, more time for actual work.
Slide 62 of 73
Before Lunch · Beyond the Prompt
Why It Matters
You don't need to reach any of this today. Everything you build this afternoon can grow into it over time — one feature, one prompt at a time. See you after lunch!
Slide 63 of 73
Hours 4–5 · You Build
Build your own app using your team's PRD from Hour 2. Describe what you want to Claude, review what it builds, refine until it matches what you need.
Slide 64 of 73
Hours 4–5 · You Build
Tell Claude what the app should do, who it's for, and what it should look like. Be specific about the one main task — Claude works best with a focused ask.
Slide 65 of 73
Hours 4–5 · You Build
Paste your description into Claude and ask it to build the app. Read what it creates — it's normal if it's not perfect the first time.
Slide 66 of 73
Hours 4–5 · You Build
Open your app in the browser. Click around. If something's off, tell Claude what you'd like changed in plain English — “make the button bigger” works fine.
Slide 67 of 73
Hours 4–5 · You Build
Stuck? Raise your hand. I'll come by to help with tricky prompts, unexpected results, or just a second pair of eyes on your app.
Slide 68 of 73
Hours 4–5 · You Build
Once you're happy with it, deploy to Netlify in one click. You'll get a live URL — share it with your team. Your app is now on the internet.
Slide 69 of 73
Hour 6 · Wrap-Up
Celebrate!
You shipped a real, working app today with no prior coding experience. That's a genuine achievement — take a moment to show your teammates what you built.
Slide 70 of 73
Hour 6 · Wrap-Up
Your app doesn't have to stop today. Keep describing new features to Claude — a new button, page, or report — and redeploy whenever you're ready.
Slide 71 of 73
Hour 6 · Wrap-Up
“AI is the greatest technology equalizer we've ever seen. It lifts the people who don't understand technology.”
Jensen Huang, CEO · NVIDIA — CNN, Fareed Zakaria GPS, July 2025
Slide 72 of 73
Hour 6 · Wrap-Up
Thank You
Thank you for spending your day learning something new. You showed up, tried something unfamiliar, and shipped real software. We can't wait to see what you build next.
Slide 73 of 73
Click the slide, or use ← → on your keyboard, to move forward.