Workshop

VIBE CODING

Build with AI. No programming required.

Hands-On
Guided Exercises
Duration
1-2 Hours
For
Non-Programmers
Instructor

Your Guide

Poe

Poe

Founder @ nyantrace.ai · MS in Management of Technology, NYU (2026)
  • Startup Founder — NYU Entrepreneurship Challenge 2026
  • Ex-VP of Engineering at 99.co — led 40+ engineers across APAC
  • Built AI/ML-powered features & platform modernization
  • Engineering Manager at Shield — anti-fraud ML systems
Agenda

Today's Journey

  1. Context Engineering — Give AI the right information
  2. Prompt Engineering — Communicate effectively with AI
  3. Spec-Driven Workflow — Plan before you build
  4. Divergent Thinking — Explore creative possibilities
+ Bonus
LLM as Judge · Security Best Practices · Tools & Resources
Concept

What is Vibe Coding?

"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." — Andrej Karpathy, Feb 2025
  • Describe what you want, not how to build it
  • AI generates the code — you guide the direction
  • Focus on ideas and outcomes, not syntax
  • Iterate through conversation, not compilation
Research

Anthropic Economic Index

Key findings on how AI is being used in the real world:

  • Software development is the #1 use case for AI assistants
  • AI is primarily used to augment human work, not replace it
  • Most usage is for learning and exploration, not automation
  • Non-technical users are the fastest-growing segment
  • Vibe coding fits the augmentation model — AI amplifies your thinking
Source
Anthropic Economic Index, 2025 — analysis of real-world AI usage patterns
Interactive

What Will You Build?

Before we dive in — take 2 minutes to think about what you want to walk away with today.

Share With Your Neighbor

What's an app, tool, or website you wish existed? Something that would make your life easier?

Set Your Goal

By the end of this workshop, what do you want to have built or learned? Hold yourself to it.

Keep It In Mind
We'll use your idea throughout every exercise today. The more specific, the better your results.
01
CONTEXT
ENGINEERING
Give AI the right information to build what you want
Context

What is Context?

Context is all the information AI uses to understand your request and generate the right output.

Explicit Context

What you directly tell the AI: your prompt, examples, constraints, and references

Implicit Context

What the AI infers: conversation history, patterns, domain knowledge, tone

System Context

Configuration and instructions: system prompts, persona definitions, rules

External Context

Files, docs, APIs, images — any reference material you provide

Tips

Context Engineering Tips

  • Be specific — "Build a to-do app" vs "Build a to-do app with due dates, priority levels, and dark mode"
  • Provide examples — Show the AI what success looks like
  • Set constraints — Define boundaries: tech stack, style, audience
  • Include reference material — Paste screenshots, docs, existing code
  • State assumptions — Don't let AI guess what you mean
Remember
Better context = better output. Garbage in, garbage out still applies.
Example

Context Before & After

Vague Prompt
"Make me a to-do app"

Result: generic, unstyled, missing features you actually need

Context-Rich Prompt
"Build a to-do app for college students with due dates, priority levels (urgent/normal/low), a dark mode UI, and the ability to sort by deadline. Use a clean minimal design with rounded corners."

Result: specific, styled, functional — much closer to what you imagined

Tips For the Exercise
Think about: Who is using it? What are the 3 must-have features? What should it look and feel like?
Hands-On

Exercise: Build Better Context

01 Pick a simple app idea (e.g., habit tracker, recipe saver, flashcard app)
02 Write a context-rich description: audience, features, style, constraints
03 Feed it to an AI assistant and evaluate the output
04 Iterate — what context was missing? Add it and try again.
Goal
Experience the difference between vague and context-rich prompts firsthand.
BREAK
stretch · hydrate · discuss
Up Next
02 — Prompt Engineering
02
PROMPT
ENGINEERING
Communicate effectively to get what you want
Prompting

Anatomy of a Good Prompt

  1. Role — Tell the AI who it is: "You are a senior UX designer"
  2. Task — Clearly state what you want done
  3. Format — Specify the output format: list, code, table, essay
  4. Constraints — Set boundaries and requirements
  5. Examples — Show what good output looks like
Advanced

Power Techniques

Chain of Thought

"Think step by step" — forces the AI to reason through problems before answering

Few-Shot Examples

Provide 2-3 input/output examples so the AI learns your pattern

Iterative Refinement

"Make it more minimal" — progressively guide toward your vision

Persona Prompting

"Act as a 10-year veteran product manager" — shapes expertise and tone

Interview Me

"Before building, ask me 5 questions to understand my requirements" — let AI uncover what you haven't thought of

Example

Prompt Evolution

// Round 1 — basic "Build me a landing page"
// Round 2 — add role + context "You are a senior web designer. Build a landing page for a productivity app aimed at freelancers"
// Round 3 — add constraints + details "...with a dark theme, hero section with animated gradient, email signup CTA, mobile-first, and testimonials section"
Tips For the Exercise
Start simple and layer on specificity. Each round should make the output noticeably better.
Hands-On

Exercise: Prompt Iteration

01 Start with a basic prompt: "Build me a landing page"
02 Add role: "You are a senior web designer specializing in SaaS products"
03 Add constraints: specific colors, mobile-first, with a hero section and CTA
04 Compare outputs at each iteration — observe the improvement
Goal
Learn how progressive refinement transforms vague results into polished output.
BREAK
stretch · hydrate · discuss
Up Next
03 — Spec-Driven Workflow
03
SPEC-DRIVEN
WORKFLOW
Plan before you build — write the blueprint first
Workflow

The Vibe Coding Workflow

  1. Ideate — Brainstorm what you want to build
  2. Spec — Write a clear specification document
  3. Build — Feed the spec to AI and generate code
  4. Review — Test, iterate, and refine
  5. Ship — Deploy your creation to the world
Key Insight
The spec is your most powerful tool. A good spec eliminates 80% of back-and-forth with the AI.
Spec

Writing a Good Spec

  • Project Overview — What are you building and why?
  • User Stories — "As a user, I want to..." with clear outcomes
  • Features List — Prioritized: must-have, nice-to-have, future
  • Technical Constraints — Platform, tech stack, integrations
  • Design Direction — Visual style, reference examples, brand
  • Success Criteria — How do you know it's done?
Example

From Spec to App

No Spec
"Build me a habit tracker"

5 rounds of back-and-forth. AI guesses wrong features. You restart twice. 45 minutes wasted.

With Spec
"Build a habit tracker per this spec: 3 daily habits, streak counter, calendar heatmap, confetti animation on 7-day streak, dark mode, mobile-first."

First output is 80% right. One refinement round. Done in 10 minutes.

Tips For the Exercise
Your spec doesn't need to be long — it needs to be specific. Cover: what, who, features, design, and done criteria.
Hands-On

Exercise: Write Your Spec

01 Choose your project from the earlier exercise (or start fresh)
02 Write a spec covering: overview, features, constraints, design direction
03 Feed the spec to AI — ask it to build a working prototype
04 Evaluate: what worked? What's missing from your spec?
Goal
Experience how a structured spec produces dramatically better AI output than ad-hoc prompts.
BREAK
stretch · hydrate · discuss
Up Next
04 — Divergent Thinking
04
DIVERGENT
THINKING
Explore creative possibilities with AI as your partner
Mindset

What is Divergent Thinking?

Generating multiple solutions instead of converging on the first "good enough" answer.

Convergent

One right answer. Linear. Efficient. Safe.

Prompt → Accept first result → Done

Divergent

Many possible answers. Exploratory. Creative. Surprising.

Prompt → 5 variations → Mix & match → Evolve

Why It Matters
AI makes divergent exploration nearly free. Generate 10 ideas in the time it takes to think of 1.
Techniques

Prompts for Divergent Exploration

  • "Give me 5 completely different approaches to..." — forces variety
  • "What would a [contrarian/minimalist/maximalist] version look like?"
  • "Combine the best of option A and option C" — remix and evolve
  • "What's the weirdest way to solve this?" — break conventions
  • "Now make it 10x simpler / 10x more ambitious" — scale exploration
> "Give me 3 wildly different UI layouts for a habit tracker: one inspired by a terminal, one by a garden, one by a game."
Example

Same App, 3 Vibes

One prompt, three wildly different directions for a habit tracker:

Terminal

Monospace font, dark background, command-line feel, ASCII progress bars

Garden

Pastel colors, growing plants for streaks, wilting for missed days, nature sounds

Gamified

XP points, level-ups, achievement badges, leaderboard, boss battles for hard habits

Tips For the Exercise
Ask AI for variations you'd never think of yourself. Then cherry-pick the best parts from each.
Hands-On

Exercise: Explore Variations

01 Take your project from the spec exercise
02 Ask AI for 3 completely different visual designs or architectures
03 Pick elements you like from each and ask AI to combine them
04 Push further: "Now make it more playful" or "Add a dark mode twist"
Goal
Break the habit of accepting the first output. Explore the creative space.
BREAK
stretch · hydrate · discuss
Up Next
Wrapping Up — LLM as Judge & Takeaways
Bonus

LLM as Judge

Use AI to evaluate AI output. A powerful feedback loop.

  • Self-Critique — "Review this code for bugs, security issues, and UX problems"
  • Comparison — "Compare these 3 designs and rank them by usability"
  • Rubric Scoring — "Score this output 1-10 on clarity, completeness, and creativity"
  • Red Teaming — "Find every way this could fail or be misused"
Pro Tip
Use a different AI model or a fresh conversation as the judge for less biased evaluation.
Recap

Key Takeaways

01 Context

Better input = better output. Be specific. Provide examples and constraints.

02 Prompts

Structure your prompts: role, task, format, constraints, examples.

03 Specs

Write the blueprint first. A good spec eliminates 80% of iteration.

04 Diverge

Never accept the first output. Explore, remix, evolve.

You don't need to code. You need to think clearly and communicate well.

Resources

Keep Building

Recommended Tools

Claude

Anthropic's AI assistant for deep reasoning and code

Cursor

AI-native code editor with inline generation

v0

Vercel's AI for generating UI components

Google AI Studio

Google's playground for Gemini models and prototyping

Antigravity

AI-powered app builder for rapid prototyping

Lovable

Turn ideas into apps with natural language

Project Ideas

Personal Portfolio
Habit Tracker
Study Flashcards
Budget Planner
A
APPENDIX
Supplemental material & references
Security

Security Best Practices

  • Never share API keys, passwords, or tokens in prompts
  • Review generated code before running it — AI can introduce vulnerabilities
  • Use environment variables for sensitive configuration
  • Be cautious with AI-generated dependencies — verify packages exist
  • Don't paste proprietary company code into public AI tools
  • Use sandboxed environments when testing AI-generated code
Remember
AI is a power tool. Power tools require safety practices.
End
THANK YOU

Now go build something.

Poe · Engineering @ nyantrace.ai

LinkedIn
poepoemyintswe
Threads
@poemswe
GitHub
@poemswe
Email
poe@nyantrace.ai
Slides
poemswe.github.io/vibe-coding
VIBE CODING WORKSHOP · ARROW KEYS TO NAVIGATE
SLIDE 01/36