What we covered
The workshop builds one product, a meetup RSVP app, and never leaves it. Each module moves that same app one step further, from a prompt to a URL other people can open.
- The setup check: accounts, Node 20+, Git, VS Code, an AI assistant, and a reference repo with a branch per module so nobody stays stuck.
- Designing the UI with Google Stitch, and the three prompting patterns that get usable output: structural, emotional, iterative.
- Moving the design into Figma, then doing the unglamorous part: renaming layers semantically and applying Auto Layout, so the file is worth handing to code.
- Why everything in Figma has a code twin, and how to read a design file as a component tree.
- The three routes from Figma to code (plugins, the MCP server, prompt-first), and when each one is the right call.
- Frontend fundamentals covered properly rather than assumed: components, props, and state.
- The styling stack, Tailwind CSS with shadcn/ui, and where a generated component stops and yours begins.
- Structuring a Next.js app so the files match the design, plus a cleanup checklist for the HTML semantics and accessibility that AI tools quietly skip.
- Wiring up the data: Route Handlers, Server Components, and a Supabase schema for the RSVPs.
- Shipping it: CI/CD with GitHub Actions, then deploying to Vercel or Google Cloud Run.
Format
A hands-on workshop across thirteen modules, building one app from the first Stitch prompt through to a deployed URL. The reference repo carries a branch per module, so anyone who falls behind can rejoin at the next one.
Who it's for
Developers and designers who want the whole path in one sitting, particularly anyone who can prompt an AI into a good-looking screen but stalls somewhere between that screen and something deployed with real data behind it.