Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.
AI features inside your app need an API key in an environment file, not your chat subscription.
Key (0:01-0:04)
Dev server (0:05-0:07)
Import test and categories (0:07-0:12)
Context7 fetches current library docs (here shadcn); the Figma MCP lets Claude read an MCP-ready design system and redesign from it.
Context7 (0:12-0:18)
Figma MCP (0:18-0:31)
Iteration (0:31-0:38)
Claude handles login, project creation and the environment variable; you get a public production URL and a preview URL.
Deploy (0:39-0:43)
Recap (0:43-0:45)
Create your own key - you see it once.
Claude console > Get API key > create "expense management" > copy immediately. Put it in .env.local (ask Claude Code where), then run npm run dev in the project folder - running it elsewhere fails. Keep imported statements small, "because then there's an opportunity for the app to hallucinate."
The step between a demo and a working AI feature.
An MCP-ready design system has every element and token "clearly defined and labeled ... no ambiguity."
Claude > + > Connectors > Manage > Add > Browse: add Context7, verify the tools, look up the shadcn library ID, ask for a redesign - it took a root-cause fix before padding and radii actually changed. For Figma: add the Figma connector (or the terminal command), open an MCP-ready community file (the "MCP apps for Claude" kit), switch to Dev Mode and enable the desktop MCP server, give Claude the file URL, restart Claude so the connector loads, then choose a full overhaul (~30-40k tokens). Afterwards, change Figma and ask Claude to re-read the component (button radius 32-48px to 8px); emojis replaced with Lucide icons.
Guardrails are "the difference between people who are great at building with AI and the ones who are just starting out."
Viewers should not need your codebase to see the prototype.
Ask Claude what it recommends for sharing; it checks the Vercel login, deploys and adds the API key to production. Confirm in Vercel > project > Environment variables. The narration calls this "v0", but the demo is Vercel driven by Claude.
The last step of the five-step flow.
| Tool | Coverage | Moment | Context |
|---|---|---|---|
 Claude Code | demonstrated | ||
| Claude Console | demonstrated | ||
| Context7 | demonstrated | ||
 shadcn/ui | demonstrated | ||
 Figma | demonstrated | ||
| Figma MCP | demonstrated | ||
| Lucide | demonstrated | ||
 Vercel | demonstrated | ||
 v0 | mentioned |
This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.
| The transcript says | The trainer actually means |
|---|---|
| platform.clot.com | platform.claude.com (Claude Console) |
| Chat C / shat cn | shadcn |
| Lucid Icons | Lucide icons |
| Contic 7 | Context7 |
| Finland India / finlit India | FinLit India (project name) |