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 — B Capital Backed
  • Built AI/ML-powered features & platform modernization
  • Former Engineering Lead at Shield — anti-fraud ML systems
Team

Your Support Crew

Sally Yang

Sally Yang

Moderator
  • AI Product Thinker
  • Ex-CoS @ TuSimple
  • MOT 2026, NYU
Natasha Sebastian

Natasha Sebastian

Teaching Assistant
  • Applied ML Engineer
  • CS 2026, NYU
Clely Fernandes

Clely Fernandes

Teaching Assistant
  • Software Developer Intern @ Tiny Archives
  • CS 2026, NYU
Need Help?
Raise your hand and Natasha or Clely will come to you.
Agenda

Today's Journey

  1. Brainstorm — Chat with AI to discover what you're building
  2. Spec — Turn your brainstorm into a blueprint
  3. Diverge — Explore wildly different directions
  4. Judge — Let AI evaluate the options
+ Bonus
Security Best Practices · Tools & Resources
Live Demo
We'll build an astrology app end-to-end — from brainstorm to finished product.
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.

Our Demo
We'll demo building an astrology app through every section. You'll apply the same process to YOUR idea.
01
BRAINSTORM
Chat with AI to discover what you're building
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.
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

Live Demo

Brainstorming the Astrology App

// Round 1 — vague "Build me an astrology app"
// Round 2 — after context chat "Build a single-page astrology app where users enter their birthday, see their zodiac sign with traits, and get a daily reading. Target audience: college students who follow astrology casually."
// Round 3 — after prompt refinement "You are a senior frontend developer. Build a single-page astrology app: birthday input → zodiac sign with personality traits → daily horoscope reading → compatibility checker. Celestial dark theme with gold accents, constellation background, mobile-first. Single HTML file with embedded CSS/JS."
Notice
Each round layers on context (audience), structure (role + task), and constraints (theme, format). Same idea, wildly different output.
Hands-On

Exercise: Brainstorm Your App

01 Start with your vague idea — something you wish existed
02 Chat with AI — give it context, ask it to interview you about your requirements
03 Refine your prompt using techniques from this section (role, constraints, examples)
04 Compare your first and last outputs — observe the difference
Goal
Experience how context + prompting transforms a vague idea into a clear, buildable vision.
BREAK
stretch · hydrate · discuss
Up Next
02 — The Spec
02
SPEC-DRIVEN
WORKFLOW
Plan before you build — write the blueprint first
Workflow

The Vibe Coding Workflow

  1. Brainstorm — Chat with AI to discover what you're building
  2. Spec — Turn your brainstorm into a structured blueprint
  3. Build — Feed the spec to AI and generate code
  4. Diverge — Explore wildly different directions
  5. Judge — Let AI evaluate the options and pick a winner
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?
Live Demo

Astrology App Spec

No Spec
"Build me an astrology app"

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

With Spec
Overview: Single-page astrology app for college students
Features: Birthday input, zodiac sign, daily reading, compatibility checker
Design: Celestial dark theme, gold accents, constellation background
Constraints: Single HTML file, mobile-first, embedded CSS/JS

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 Take the brainstorm from Exercise 1 — your refined idea and prompt
02 Turn it into a structured spec: 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
03 — Divergent Thinking
03
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 visual designs for this astrology app: one dark and celestial, one cute and pastel, one retro terminal."
Live Demo

Same App, 3 Vibes

One astrology app spec, three wildly different directions:

Dark Celestial

Deep navy background, gold constellation lines, mystical serif fonts, shimmering star particles

Cute Pastel

Soft lavender & pink, rounded cards, kawaii zodiac characters, playful bouncing animations

Retro Terminal

Green-on-black, ASCII art star charts, monospace font, blinking cursor, hacker aesthetic

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 app from Exercises 1 & 2 — the one you brainstormed and specced
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
04 — The Verdict
04
THE
VERDICT
Let AI evaluate AI
Evaluation

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.
Live Demo

Judging the 3 Variations

Feed all three astrology app variations to AI with a rubric:

Usability

How intuitive is the birthday input flow? Can users find their horoscope in under 5 seconds?

Visual Appeal

Does the design match the astrology vibe? Is typography readable? Color harmony?

Fun Factor

Would a college student share this with friends? Does it spark joy or feel like a chore?

> "Here are 3 versions of my astrology app. Score each 1-10 on usability, visual appeal, and fun factor. Then rank them and explain your reasoning."
Recap

Key Takeaways

01 Brainstorm

Chat with AI to discover what you're building. Context + prompting transforms vague ideas into clear visions.

02 Spec

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

03 Diverge

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

04 Judge

Use AI to evaluate AI. Score, compare, and pick the winner.

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
[email protected]
Slides
vibe.poemswe.com
Feedback

Share Your Feedback

Scan the QR code or tap to share how the workshop went.

Feedback QR Code

YOUR FEEDBACK HELPS MAKE THE NEXT WORKSHOP BETTER

VIBE CODING WORKSHOP · ARROW KEYS TO NAVIGATE
SLIDE 01/36