Learning path map
Detailed content
🎯 Your First App: From Problem to Localhost
Before writing a line of code: clearly define the problem, use AI as a sparring partner, generate an SOP, provide visual references, orchestrate parallel agents, plan, preserve context, and connect a database via MCP.
The “55-5” rule: out of 60 minutes, spend about 55 understanding the problem and only about 5 rushing toward a solution. Most tutorials jump straight to the code — don’t do that.
A poorly defined problem leads to an app no one uses. Clarity at the start saves hours of rework.
Problem definition · 55-5 rule · avoid rushing into code.
Use AI as a training partner: ask it to challenge your reasoning and help define the problem. Then ask for a short SOP (procedure), no more than 800 characters.
The AI’s counterpoint exposes gaps early; the SOP becomes the roadmap that guides the build.
Sparring · challenge the reasoning · SOP ≤ 800 characters.
Give the agent visual references (screenshots of sites you like). AI is great at design, but it works much better with specifics.
"Make it look good" is vague; a reference screenshot conveys visual intent in seconds.
Visual references · specificity · galleries (Awwwards, Dribbble, Mobbin, Land-book).
In Agent Manager, you manage multiple agents and projects at the same time. Each workspace = one project, and you move much faster.
Parallelizing multiplies your output: while one agent works, you review or start another.
Agent Manager · project-based workspace · parallelism.
Treat each agent like an employee: give them SEPARATE tasks. Never assign two agents to the same task — they’ll collide and get in each other’s way.
It's like a team where no one does someone else's work: less conflict, more progress.
Division of labor · avoid collisions · one agent, one task.
Put the agent in planning mode: it proposes a plan, and you review and approve it as you would with an employee. Actions wait for approval in the inbox.
Approving the plan before execution keeps the agent from building the wrong thing.
Planning mode · review · approval in the inbox.
A .md file (e.g., Gemini.md) with the project rules — source, colors, purpose — that the agent rereads every time. It survives a context window “overflow.” A research.md file stores reusable research.
It's the project's long-term memory: the agent doesn't "forget" your decisions.
Context file · context window · research.md.
MCP (Model Context Protocol) is the "universal language" that lets apps and services communicate. Connect a database (Supabase) via token, and the agent creates the project and writes the SQL on its own.
With a connected database, your app stores real data — without you writing SQL by hand.
MCP · token · Supabase · SQL generated by the agent.
🚀 Publish and maintain your app
Get the app off localhost: connect GitHub, deploy to Vercel, protect keys with env vars, enable analytics, debug with screenshots, commit often, roll back, and control API spending.
Connect AntiGravity to GitHub via MCP to manage and publish repositories directly from the editor. Requires a Personal Access Token (fine-grained, with an expiration date) and Docker installed for the integration to work.
Publishing without leaving the editor reduces friction and keeps everything in one workflow.
GitHub MCP · Personal Access Token · Docker.
Vercel is the “bridge” from GitHub to the world: production hosting. Add New → Project → import the repo → publish, and the app goes live.
It's the step that turns a local project into something anyone can access through a link.
Hosting · import repo · production.
To protect API keys, the agent only names the variable; you paste the key into Vercel (Settings → Environment Variables) and redeploy. The key never appears in the code.
An exposed key in your code is the #1 security mistake — and it can be costly.
Env var · naming vs. value · Redeploy.
Enable Analytics and Speed Insights in the Vercel dashboard and install the package from the terminal (npm). You can then track traffic and performance, with a generous free plan.
Without data, you guess. With data, you improve what matters.
Analytics · Speed Insights · npm · free plan.
When the build fails, take a screenshot of the error logs and send it to the agent: "There was a deployment error; fix it." Use DevTools (Console/Network) and send a screenshot of the error.
The image gives the agent the exact context — it fixes things much faster.
Error logs · screenshot · DevTools (Console/Network).
Commit often. Real story: coding for 6 hours without committing and losing the best version. Version control is your safety net.
Each commit is a safe return point — you never lose more than your most recent piece of work.
Frequent commits · history · a recovery point.
In Vercel: Deployments → choose the previous stable version → Redeploy. It's "going back in time." You can also revert through GitHub.
A bad deployment is no longer cause for panic: you can restore the good version in seconds.
Deployments · stable version · Redeploy · revert in GitHub.
Set an API spending budget so you don’t get hit with a huge bill. Make the repository private after publishing.
A spending limit prevents bill surprises; a private repo protects your code and keys.
API budget · spending cap · private repository.