Vibe Code This: Build an AI App in 2 Hours Without Writing a Line of Code

I spent years assuming that building software meant knowing how to code. Then "vibe coding" happened — and the assumption shattered.

The term was coined by Andrej Karpathy in February 2025: "There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists." What he described was less about forgetting code and more about a fundamental shift — the AI writes the code; you specify the intent.

This article is the exact workflow I used to build a production-ready AI app from idea to live URL in 2 hours. We'll cover: creating a PRD with ChatGPT, building in Google AI Studio, customizing with screenshots and annotations, and deploying to Google Cloud.

What "Vibe Coding" Actually Means

Vibe coding is not hype. It's a legitimate development workflow with a clear process:

<div style="background: #1a2d1a; border: 1px solid #22c55e; border-radius: 10px; padding: 16px;">
  <div style="color: #4ade80; font-size: 13px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;">Vibe Coding Approach</div>
  <div style="color: #86efac; font-size: 14px; line-height: 1.9;">
    1. PRD with ChatGPT (30 min)<br/>
    2. Build in AI Studio (1 hr)<br/>
    3. Customize design (30 min)<br/>
    4. Deploy (5 min)<br/><br/><br/>
    <strong>Total: 2 hours, $0</strong>
  </div>
</div>

The key insight: most of the time a developer spends is on translation — translating your requirements into code. AI eliminates that translation step. You still need to think clearly about what you're building. You still need to test, iterate, and make decisions. But you no longer need to know the implementation.

The App We're Building

Before we start, let's get concrete about what "production-ready" means here.

This is a real, usable product — not a toy. The workflow that builds it is the same workflow you'll use for dashboards, client tools, internal utilities, or anything else you can specify.

Step 1: Create a PRD (Don't Skip This)

The biggest mistake people make with vibe coding is jumping straight to building. They describe the app in a single sentence, get frustrated when the AI misses details, and iterate 20 times on things they could have specified upfront.

The PRD is not busywork. It is the work.

The PRD Creation Prompt

Open ChatGPT (or any capable LLM) and use this prompt to generate a thorough PRD through guided questions:

I want to create a PRD (Product Requirements Document) for an AI-powered app.
Please guide me through creating a comprehensive PRD by asking questions about:

- User needs and target audience
- Problem statement
- Features and capabilities
- User flow (how users move through the app)
- Interface requirements (what it should look like and feel like)
- Technical constraints or preferences (frameworks, languages)

Start by asking me about the app I want to build.
Ask one section at a time, wait for my answers, then move to the next section.
At the end, generate the complete PRD in Markdown format.

The 6 PRD Sections ChatGPT Will Cover

Key tips for PRD quality:

• Be specific about UI patterns: "dropdown" vs "radio buttons" vs "toggle" — the AI will implement exactly what you say
• Keep v1 ruthlessly simple — build the core, nothing else
• Export as Markdown or PDF so you can reuse it and update it for v2

Time: 30 minutes | Output: Complete Markdown PRD document

Step 2: Build in Google AI Studio

Google AI Studio's app-building mode (Canvas) is the best platform for this workflow when you want AI features baked into the app. It uses Gemini under the hood, has a split-screen (code + live preview), and supports direct deployment to Google Cloud.

The Build Process

1. Open Google AI Studio Go to aistudio.google.com and sign in with your Google account.

2. Navigate to Build / Canvas Mode Look for the "Build" tab or "Create App" option in the sidebar. The interface uses a split-screen: prompt input on the left, live preview on the right.

3. Upload Your PRD Either drag-and-drop your PRD file (Markdown or PDF) into the prompt area, or paste the text directly.

4. Use This Generation Prompt

Use the attached PRD to create a complete, production-ready application.

Build all features exactly as specified in the requirements.
Use React, TypeScript, and Tailwind CSS.
Make the UI clean, professional, and responsive for both mobile and desktop.
Include proper error handling and loading states.

5. Wait for Generation and Test AI Studio will generate 10–20 files (React components, styles, config, types). When it's done, test in the live preview:

The power of PRD-driven generation: Because you specified everything in the PRD, the first generation typically gets 90%+ of functionality right. You won't be iterating on what it does — only on how it looks.

Time: 1 hour (including initial testing)

Step 3: Customize Design with Screenshots and Annotations

Functionality is correct. But the default design is... fine. You want it to look like your product. This is where most vibe coding tutorials stop — and where the real workflow begins.

Method 1: Screenshot Reference Styling

Find an app whose design you admire. Take a screenshot. Upload it with this prompt:

The functionality is perfect. But the design needs work.

Look at this screenshot — I want you to copy:
- The toolbar layout (top, horizontal, compact)
- The dropdown style (subtle, not boxy)
- The icon style (outlined, not filled)
- The overall color temperature (cool, dark background)

Apply these design principles to my app without changing any functionality.

AI Studio will analyze the screenshot and extract the visual patterns — spacing, typography choices, component styles, color application — and apply them to your generated code.

Method 2: Annotations (AI Studio's Killer Feature)

This is what makes AI Studio stand out. The annotation tool lets you draw directly on the live preview of your app:

1. Click the Annotate button in AI Studio's toolbar
2. Draw arrows, circles, or highlight areas on the live preview
3. Add numbered callout labels with text instructions
4. Click "Add to chat" — the annotated screenshot goes into the conversation

Example annotation session:

[Arrow pointing to prompt box at top] → 1. Move this to the bottom
[Circle around tool settings bar] → 2. Center these horizontally
[Arrow to generate button] → 3. Make this more prominent — less soft, bolder color
[Box around icon area] → 4. Add icons to each dropdown option

This is fundamentally more precise than text alone. The AI sees exactly what you're pointing at and understands the spatial relationship between elements.

Method 3: Iterative Refinement Loop

Design isn't done in one pass. Budget 5–10 iterations:

Version checkpoints: AI Studio automatically tracks each generation. You can see what changed, restore previous versions, and branch off from any checkpoint. Use this aggressively — if an iteration makes things worse, roll back immediately.

Time: 30 minutes | Iterations: 5–10

Step 4: Deploy to the World

Your app is done. Now make it accessible.

Option A: One-Click Deploy to Google Cloud (Recommended)

This is the simplest path. Everything stays in AI Studio:

1. Click "Deploy app" in the AI Studio toolbar
2. Create a new Google Cloud project (or select existing)
3. Enable billing (required — but free tier covers light usage)
4. Click Deploy
5. Wait ~2 minutes
6. Get your public URL

Option B: Download and Deploy Yourself

Want more control or prefer a different host?

1. Click "Download app" → Get a ZIP file with all source code
2. Open in Cursor, VS Code, or any editor
3. Push to GitHub
4. Deploy to Vercel, Netlify, or Cloudflare Pages with one command:

# Vercel
npx vercel --prod

# Netlify
npx netlify deploy --prod --dir=dist

# Or connect GitHub repo to Vercel/Netlify dashboard for auto-deploy on push

GitHub Integration (Version Control)

Whether you deploy manually or via AI Studio:

1. Click "Connect to GitHub" in AI Studio
2. Create a new repository (public or private)
3. All code is pushed automatically
4. Future AI Studio sessions commit changes as new commits
5. Connect Vercel/Netlify to the repo for automatic deployments on push

Time: 5 minutes | Result: Live app, publicly accessible worldwide

Advanced: Production Deployment Architecture

For apps that need to scale beyond a single container, here's the full production setup.

Docker Container

Docker packages your app and all dependencies so it runs identically on any machine or cloud platform:

# Multi-stage build: build node app, then serve with nginx
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run locally:

docker build -t infographics-app .
docker run -p 3000:80 infographics-app
# App is now at http://localhost:3000

Kubernetes Deployment

For high-traffic production environments — Kubernetes manages multiple replicas, handles failover, and auto-scales:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: infographics-app
  labels:
    app: infographics-app
spec:
  replicas: 3 # Run 3 copies — if one crashes, 2 keep serving
  selector:
    matchLabels:
      app: infographics-app
  template:
    metadata:
      labels:
        app: infographics-app
    spec:
      containers:
        - name: frontend
          image: your-registry/infographics-app:latest
          ports:
            - containerPort: 80
          resources:
            requests:
              memory: "128Mi"
              cpu: "100m"
            limits:
              memory: "256Mi"
              cpu: "200m"
          readinessProbe:
            httpGet:
              path: /health
              port: 80
            initialDelaySeconds: 5
            periodSeconds: 10
---
apiVersion: v1
kind: Service
metadata:
  name: infographics-service
spec:
  selector:
    app: infographics-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
  type: LoadBalancer # Exposes the app with a public IP

When do you need Kubernetes? For small apps, Google Cloud Run (from AI Studio's one-click deploy) is enough — simpler, cheaper, zero management. Kubernetes is for apps with predictable high traffic, complex microservices, or specific compliance requirements.

Performance: Image Caching

Generated infographics are expensive to produce (API call + rendering). Cache aggressively:

class ImageCache {
  private cache = new Map<string, { url: string; createdAt: number }>();
  private TTL_MS = 60 * 60 * 1000; // 1 hour

  getCacheKey(prompt: string, style: string, colorScheme: string): string {
    return `${prompt}::${style}::${colorScheme}`;
  }

  get(prompt: string, style: string, colorScheme: string): string | null {
    const key = this.getCacheKey(prompt, style, colorScheme);
    const entry = this.cache.get(key);
    if (!entry) return null;
    if (Date.now() - entry.createdAt > this.TTL_MS) {
      this.cache.delete(key);
      return null;
    }
    return entry.url;
  }

  set(prompt: string, style: string, colorScheme: string, url: string): void {
    const key = this.getCacheKey(prompt, style, colorScheme);
    this.cache.set(key, { url, createdAt: Date.now() });
  }
}

// Usage in generation flow
async function generateInfographic(
  prompt: string,
  style: string,
  scheme: string,
) {
  const cache = new ImageCache();
  const cached = cache.get(prompt, style, scheme);
  if (cached) return cached;

  const url = await callGeminiImageAPI(prompt, style, scheme);
  cache.set(prompt, style, scheme, url);
  return url;
}

Security: Input Sanitization

Before sending user input to the AI API, strip any sensitive data patterns:

function sanitizeUserInput(input: string): string {
  return input
    .replace(/\b\d{3}-\d{2}-\d{4}\b/g, "[REDACTED-SSN]") // SSN
    .replace(/\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g, "[REDACTED-CARD]") // Credit cards
    .replace(/\b[\w.-]+@[\w.-]+\.\w{2,}\b/g, "[REDACTED-EMAIL]") // Emails
    .replace(
      /\b(?:\+?1[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}\b/g,
      "[REDACTED-PHONE]",
    ); // Phone numbers
}

The 7 Most Common Vibe Coding Mistakes

Real Numbers: What to Expect

Your 5-Step Starter Plan

Start today, not "when I have time":

Key Takeaways