App Blueprints Slides Phase 01: Ideation
APP BLUEPRINTS
Designing the next big thing with AI.
Vibe Coding Capstone Lesson 01
The Magic
Wand Effect
Imagine you have a tool that can turn words directly into software.
"We used to speak in code to computers. Now, we just speak. This is the era of Vibe Coding."
Inspiration Engine
Mini Games
Simple clickers, puzzles, or text adventures.
Utility Tools
Unit converters, random generators, or study aids.
Fun & Vibes
Soundboards, mood selectors, or digital art toys.
Scoping
Down
The biggest mistake in engineering is Scope Creep—trying to do too much at once.
Start with ONE core feature.
Can it be built in 30 minutes?
"Nice-to-haves" go in the backlog.
Example: Weather App
Full 7-day forecast with maps and radar
Enter a city name and see current temperature
Social sharing, login, and saved locations
Focus on the functional core!
Mission Briefing
01
Brainstorm 3 app ideas on your worksheet.
02
Pick one and Scope it Down to the MVP.
03
Sketch the "vibe" and UI layout.
App Planner Worksheet App Blueprint Planner
Vibe Coding Capstone: Phase 01
Student
Date
01. Idea Storm
What could you build? Think about games, tools, or just something cool. List 3 rough ideas below.
Idea Alpha
Idea Beta
Idea Gamma
02. The MVP Cut
Pick your favorite idea from above. Now, strip it down to the absolute minimum features needed for it to work.
The Big Vision
(Everything you want it to eventually do)
The MVP (Minimum Viable Product)
(The ONE thing it MUST do to be useful/fun)
03. UI Layout & Vibe
Sketch your app's interface. Where do buttons go? Where is the text? Keep it simple!
Vibe Keywords
What should it feel like? (e.g., Neon, Minimalist, Paper-craft, Retro Arcade)
AI Prompt Hint
When you're ready, you'll prompt the AI like this:
"Build a simple web app that [CORE FUNCTION] with a [VIBE] style..."
Checklist for Success
One Core Feature
Specific Vibe Chosen
UI Sketch Finished
Vibe Coding Teacher Guide Teacher Implementation Guide
Vibe Coding Capstone (Grade 7)
Course Overview
This capstone is designed to move students from passive consumers of technology to active AI Orchestrators . The core philosophy is "Vibe Coding"—using natural language, aesthetic descriptors, and iterative prompting to direct AI in building functional web applications.
Technical Setup
• AI Access: Students need access to an LLM (Claude, ChatGPT, or similar) that can output code blocks.
• Execution: Use an online editor like CodePen , Replit , or simply saving local .html files and opening them in a browser.
• Browser: Chrome or Edge recommended for inspecting elements.
The "Vibe" Mindset
Shift student focus away from "writing code" and toward intent and evaluation . Encourage them to use vivid adjectives (neon, rustic, brutalist) and to think about how a user feels when they see the app.
Lesson Breakdown
L1
Ideation & Scope
Critical Step: "Scoping Down". Many students will want to build the next Fortnite. Force them to pick ONE core mechanic (e.g., a counter, a randomizer).
L2
The MVP Engine
The "Logic First" Rule. Do not let them style yet. If the buttons don't work, they aren't allowed to pick colors.
L3
The Vibe Shift
Aesthetic Iteration. Help students build a "vocabulary of vibes". Show examples of different UI styles (Neumorphism vs. Flat Design).
Common Pitfalls
AI "Hallucinations"
If the AI suggests a library (like React) that students don't know, have them prompt: "Rewrite this using only standard HTML and vanilla Javascript."
Code Length Limits
If the code cuts off, teach students to say: "You stopped at the [last line seen], please continue from there."
MVP Engine Slides Phase 02: Prompting
THE MVP ENGINE
Building the functional heart of your application.
Vibe Coding Capstone Lesson 02
Function
Over Form
In this phase, we don't care about colors or fonts. We only care if it works.
Rule #1:
If the button doesn't do anything, the design doesn't matter.
Logic First
Style Later
The Master Prompt
Role
"Act as an expert web developer specializing in simple browser games..."
Task
"Build a fully functional clicker game where clicking a cookie increases a counter..."
Constraints
"Use only a single HTML file. Keep the JS simple. Don't add CSS styles yet."
Test & Verify
Once the AI gives you code, run it! If it doesn't work, don't panic. Use the "Debugger Mindset."
1 "The button is there but nothing happens when I click it."
2 "Tell the AI exactly what is broken."
3 "Ask it to find and fix the bug in the logic."
Wait for the green light
Only move to styling when 100% of the functions work!
The Prompt Loop
1
PROMPT
2
TEST
3
FIX
Repeat until your MVP is fully functional.
Master Prompt Cheat Sheet Master Prompt Cheat Sheet
Phase 02: Building the Engine
The Framework: R.T.C.
R
Role
Tell the AI who it is. Experts give better answers.
"Act as a professional web developer..."
T
Task
Be extremely specific about what the app does.
"Build a simple calculator that only does multiplication..."
C
Constraints
Set boundaries. Keep it simple for the MVP.
"Use a single HTML file. No external libraries. No CSS yet."
Master Prompt Example
"Act as an expert frontend developer.
I need you to build a single-page web application. The app is a simple 'Coin Flip' game. There should be a button that says 'Flip Coin'. When clicked, it should randomly show either 'Heads' or 'Tails'. It should also keep track of the total number of heads and tails flipped so far.
Constraints: Provide all code in a single HTML block including Javascript. Do not include any CSS or styling yet—just the functional elements."
The "It's Broken!" Toolkit
If nothing happens:
"The button is appearing, but when I click it, the counter doesn't change. Can you check the Javascript logic?"
If it's missing a feature:
"This works, but I forgot to ask for a 'Reset' button. Please add a button that sets all scores back to zero."
If you don't understand the code:
"Explain what the 'Math.random()' part of this code is doing in simple terms for a 7th grader."
Draft Your Master Prompt Here Vibe Shift Slides Phase 03: Styling
THE VIBE SHIFT
From boring code to beautiful experience.
Vibe Coding Capstone Lesson 03
What is a
Vibe?
In vibe coding, a "vibe" is a collection of adjectives that describe the personality of your app.
"Cyberpunk"
"Minimalist"
"Nature/Zen"
"Retro 8-bit"
"Make it look like a high-end coffee shop menu..."
The Visual Palette
Color
Don't just say 'blue'. Say 'neon electric blue' or 'soft pastel ocean foam'.
Type
Ask for 'bold chunky headlines' or 'elegant thin serif fonts' to change the mood.
Texture
Ask for 'frosted glass effects', 'grainy paper textures', or 'glowing borders'.
Iterative
Polish
You don't have to get the design perfect in one prompt. Use the "Just a bit more..." method.
"The colors are great, but can you make the buttons rounded and add a soft shadow?"
"Make the main title much bigger and use a more futuristic font."
"Center everything and add more space between the elements."
SHIFTING VIBES...
Phase 03 Briefing
01
Apply your "Vibe" prompt to your working MVP.
02
Refine the Layout (spacing, alignment, sizing).
03
Iterate until it looks like a real product.
Vibe Moodboard Worksheet Vibe Moodboard
Phase 03: Styling & UX
Designer
01. Aesthetic Adjectives
Circle 3-5 keywords that describe your app's "vibe" or write your own.
Retro 80s
Minimalist
High Contrast
Nature/Organic
Cyberpunk
Glassmorphism
Brutalist
Cozy/Warm
Custom Vibe Description (Write your prompt here)
"Make the background a soft gradient of... Use a font that feels..."
Color Palette
Sketch or name the main colors you want.
Typography
Preview Area
Sketch how your headers and body text should look.
02. UI Refinement
Now that you have colors and vibes, sketch one specific component (like a button, a card, or the header) with its new styles.
Layout Goal
Animation/Interaction
(e.g., "Make the button bounce when clicked")
Bug Hunt Slides Phase 04: Quality Assurance
THE BUG HUNT
Breaking, testing, and making it bulletproof.
Vibe Coding Capstone Lesson 04
The "It Works on My Machine" Trap
Just because it works for you doesn't mean it works for a user.
"Software is like a conversation. If the other person can't understand you, the conversation has failed."
Common Issues
Buttons that don't click
Text that is too small
Confusing instructions
Layout breaks on different screens
The Feedback Loop
Test
Watch a peer use your app. Don't tell them what to do!
Listen
Take notes on where they get stuck or what they find confusing.
Patch
Use AI to fix the bugs and improve the experience.
How to Request a Fix
AI needs specific feedback to fix UX (User Experience) problems.
The Wrong Way
"It's confusing."
The Better Way
"My user didn't realize they had to click the logo to start. Can you make the start button more obvious and centered?"
!
The Bug Hunter Mindset
Don't take feedback personally. Take it as an engineering challenge!
The Bug Hunt Mission
01
Trade seats with a partner. Open their app.
02
Test everything. Record Bugs and Glows on the worksheet.
03
Return to your desk and start the "Patch" process with AI.
Bug Hunt Log Worksheet Bug Hunt Testing Log
Phase 04: QA & Peer Feedback
App Developer
Beta Tester (You)
01. The Mission
Spend 5-10 minutes using the app. Try to do exactly what it's supposed to do, and then try to "break" it by clicking things in the wrong order or typing unexpected text.
Bug Report
Did anything break? Did a button do nothing? Did the layout overlap?
User Experience (UX)
Was it easy to understand? Did you know where to click first?
Glows (The Good Stuff)
What was your favorite part of the "vibe" or the functionality?
02. Developer Patch List
Based on your partner's feedback, what are the TOP 3 fixes you will ask the AI to implement right now?
1
2
3
Prompt Strategy for Patching
"I just ran a user test. The user found [PROBLEM] confusing. Please update the code to [SPECIFIC FIX]. Make sure the [VIBE] still stays the same."
Launch Day Slides Phase 05: Launch
LAUNCH DAY
Deployment, Documentation, and the Grand Showcase.
Vibe Coding Capstone Lesson 05
The Final
Polish
Professional apps don't just work—they feel finished.
Clear App Title in the browser tab
No "broken" or unused buttons
Consistent margins and padding
CLEAN CODE MODE
Help & Instructions
Use AI to generate a clear "How to Use" guide for your app.
Prompt Example
"Here is the code for my Coin Flip app. Based on this code, write a clear 3-step 'How to Play' guide in a friendly, helpful tone."
Documentation Checklist
1
What does this app do?
2
How do I start/reset?
3
Who built this? (Your Dev Name)
Pitching the
Story
Don't just show the screen. Tell us the journey.
The Vibe
"I wanted a cyberpunk feel with neon colors..."
The Struggle
"The hardest part was getting the score to save..."
The AI Lesson
"I learned that AI needs specific adjectives to get the style right."
SHOWTIME
Be proud of what you built from scratch (with a little AI magic).
Vibe Coding is just the Beginning
You are now an AI Orchestrator. You don't just type code; you direct it.
What will you build next?
Launch Day Showcase Guide Launch Day Showcase Guide
Final Phase: Documentation & Presentation
01. App Documentation
Paste your code into an AI and ask it to generate a "How to Use" guide. Draft the best points below to share with your users.
App Overview
Quick Start Instructions (Steps 1-3)
02. Showcase Pitch Prep
You have 60 seconds to present. Use this script to stay focused.
The "Vibe" Description
(Describe the look and feel you chose)
The Key Feature
(What does the app actually DO?)
The AI Success
(What's one thing the AI did perfectly?)
The AI Struggle
(What took several prompts to fix?)
03. Final Reflection
What is "Vibe Coding"?
Explain the concept in your own words to someone who has never heard of it.
Human vs. AI
What part of building an app STILL requires a human, even with powerful AI?
Ideation
Logic
Vibe
Test
Launch
