Idea to Deployed AI App with Claude Code, the Vercel AI SDK, and design.md

Key Takeaways

• The repeatable stack: Next.js + Vercel AI SDK, model calls routed through the Vercel AI gateway (one key, $5/month free credits, pass-through billing across providers).
• Claude Code with the Context7 and Firecrawl MCP servers can pull live docs — point it at a package URL ("use streamdown for the response block") and it integrates the library itself.
• design.md (popularized by Google Labs) captures your colors, typography and spacing so the LLM produces on-brand UI instead of obvious AI-generated styling — and people open-source ready-made ones.
• With the Vercel CLI and GitHub CLI installed, the coding agent can create a private repo, push, and set up CI so every push to main auto-deploys to Vercel.
• Vercel gates new deployments behind authentication by default, so you can verify a build privately before flipping it on for users — but watch which account/org the agent deploys to.

Commands & Code Mentioned

npm i -g vercel      # Vercel CLI — required before agent-driven deploys
gh auth login        # GitHub CLI — lets the agent create the repo and push
# prompt: "create a new Next.js app using the AI SDK, a ChatGPT-like clone"
# prompt: "use streamdown for the response block"
# prompt: "create a private repo, push, and deploy to Vercel with CI on main"