Arrow keys / Space to navigate
+
+
AITraining2U
Vibe Coding Workshop · Day 1
AI Vibe
Coding Training
Foundations · Mindset · PRD · First Deploys
11 APRIL 2026
9:00AM – 5:00PM
aitraining2u.com
+
Day 1 / Module 1

Mindset +
Principles

Before you write a single prompt, you need the right mental models. This module sets the foundation for everything we build this week.

Marcus / AITraining2U 11 Apr 2026 Vibe Coding Workshop
Let's begin
aitraining2u.com AITraining2U Slide 2 / 12
Definition

What is Vibe Coding?

Andrej Karpathy

Andrej Karpathy

Coined the term / Feb 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.

Vibe coding is a development approach where you describe what you want in plain language and let AI generate the code. You guide direction and intent rather than writing syntax.

You don't need to understand every line. You need to understand the problem, the user, and the outcome you want.

Think of it as being the architect, not the bricklayer. You design the building; AI lays the bricks.

aitraining2u.com AITraining2U Slide 3 / 12
The Reality Designers using AI to generate code / Coders using AI to generate designs

Everyone is crossing lanes. That's the whole point of vibe coding.

aitraining2u.com AITraining2U Meme Break
Mindset

The Shift: From Coding to Describing

Vibe coding requires three fundamental mindset shifts. This is where most people get stuck.

Shift 01

I need to code
I need to describe

Your job is no longer writing syntax. It is articulating intent clearly and precisely. The better you describe, the better the output.

Shift 02

AI is a tool
AI is a collaborator

Stop thinking of AI as autocomplete. Think of it as a junior developer who is fast, tireless, and eager to please but needs clear direction.

Shift 03

Non-technical
Domain expert with superpowers

Your industry knowledge IS your advantage. A marketer who knows their audience can now build tools a developer never would have thought of.

aitraining2u.com AITraining2U Slide 4 / 12
+
Advantages

Pros of Vibe Coding

Why this approach is a game-changer for builders, founders, and creators.

01

Speed

Build prototypes 10x faster than traditional development. What used to take weeks now takes hours. Compress your timeline from months to days.

02

Accessibility

Non-coders can build. If you can describe what you want clearly, you can create functional software. The barrier to entry has never been lower.

03

Iteration

Change direction instantly. Pivot your entire approach with a new prompt. No refactoring, no sprint planning. Just describe the new direction.

04

Cost

No dev team needed for your first prototype. Validate your idea before spending money on engineers. Build the proof-of-concept yourself, then hire to scale.

aitraining2u.com AITraining2U Slide 5 / 12
Decision Framework

When to Vibe Code

Vibe coding is powerful in the right context. Here is your decision framework.

✓ Vibe Code When...

  • ■ You have a clear problem you want to solve
  • ■ You know your specific user and what they need
  • ■ You need a working prototype fast to test an idea or get feedback
  • ■ You're building internal tools for your own team
  • ■ You want an MVP to pitch investors or test with customers
aitraining2u.com AITraining2U Slide 7 / 12
+
Possibilities

What Can Be Vibe Coded?

More than you think. Here are real-world examples ranked by complexity.

Beginner

Landing Pages

Marketing sites, product pages, event registrations

Beginner

Forms & Surveys

Contact forms, feedback surveys, intake questionnaires

Beginner

Quiz Funnels

Lead-gen quizzes, personality tests, assessment tools

Beginner

Portfolios

Personal sites, project showcases, creative galleries

Intermediate

Dashboards

Analytics views, KPI trackers, reporting interfaces

Intermediate

Internal Tools

Admin panels, team dashboards, workflow managers

Intermediate

CRMs

Contact management, pipeline tracking, client portals

Advanced

Simple SaaS

Subscription tools, booking systems, micro-products

aitraining2u.com AITraining2U Slide 8 / 12
Strategy

PRD + Prompting

A Product Requirements Document turns your rough idea into a structured brief. That brief becomes your first prompt.

Why a PRD Matters

AI is only as good as your instructions. A vague prompt produces vague output. A structured brief gives AI the constraints it needs to generate something useful.

Your PRD doesn't need to be long. It needs to be specific: Who is the user? What problem do they have? What does the solution look like? What are the constraints?

The PRD becomes the skeleton of your first prompt. Everything flows from this document.

Weak prompt

"Build me a quiz app" // Vague. No context. No constraints. // AI will guess everything.

Strategic prompt

Role: You are a frontend developer. Context: I run a marketing agency. Task: Build a 5-question lead-gen quiz that recommends one of 3 service tiers based on the user's answers. Constraints: Single HTML file. Mobile-first. Use modern CSS. No frameworks. Format: Complete, working HTML file with embedded CSS and JS.
aitraining2u.com AITraining2U Slide 9 / 12
Framework

The Prompt Formula

Every great prompt follows this structure. Memorise it. Use it every time.

Role
+
Context
+
Task
+
Constraints
+
Format
=
Great Output

Role

Who should AI pretend to be? A frontend dev, a copywriter, a data analyst.

Context

Background on your business, your users, and the situation.

Task

The specific thing you want built or created. Be precise.

Constraints

Guardrails: tech stack, file count, performance, style rules.

Format

What the output should look like: a file, JSON, bullet points, a table.

aitraining2u.com AITraining2U Slide 10 / 12
Your Stack

The Toolkit

Four tools. That's all you need to go from idea to deployed product this week.

Gemini

Google's AI model. Your coding collaborator that generates, explains, and debugs code.

Code Gen Debug
AI

AI Studio

Google's browser-based IDE. The playground where you paste prompts and watch code appear.

Browser IDE Live Preview
GH

GitHub

Version control and collaboration. Store your code, track changes, deploy with Pages.

Version Control Deploy
FB

Firebase

Google's backend platform. Database, authentication, and hosting all in one place.

Database Hosting
aitraining2u.com AITraining2U Slide 11 / 12
+
Hands-On

Let's Build a Mini Quiz
Together, Live

Before the break, we are going to vibe code something real. Follow along on your screen.

Step 01

Write a Prompt

Craft a 3-question quiz prompt using the formula we just learned.

Step 02

Paste into AI Studio

Open Google AI Studio and paste your structured prompt.

Step 03

Watch It Generate

See the AI write a complete, working quiz in real time.

Step 04

Deploy to GitHub

Push to GitHub Pages and share a live URL with the room.

Live Coding
aitraining2u.com AITraining2U Slide 12 / 12
+
Pause
Time for a
Break

15 minutes

Stretch. Grab a coffee. Check your setup.
When we come back: your first real build.

aitraining2u.com AITraining2U Slide 12 / 12