App Blueprint Slides The Big Break
Decomposition & Project Planning
The Builder's Blunder
Imagine you want to build a house. You walk up to a builder and say: "Put the roof on now!"
Why is this a bad idea?
• No foundation to hold it up.
• No walls to connect to.
• No idea how big the house is!
Coding is the same!
You can't "vibe" a whole app into existence with one sentence. You need a plan .
What is "Vibe Coding"?
It's using Natural Language (plain English) to tell an AI what you want to build.
"Make a button that turns the screen dark blue when clicked."
The Secret Sauce:
Prompting is Engineering.
The clearer you break it down, the better the AI builds it.
The Power of Decomposition
Breaking a Big Idea into Tiny Tasks .
1
Requirements
What must the app DO? (e.g., save items, delete items)
2
Components
What parts do we see? (e.g., Input box, List, Button)
3
Prompts
Translate these parts into instructions for the AI.
Your Mission: Phase 1
Pick a utility app to build. Don't touch the keyboard yet. Today, you are the Architect .
Option A
Smart To-Do List
Option B
Focus Timer
Option C
Quick Quiz Game
Grab your Project Planner and let's break it down!
Project Planner Worksheet App Architect Series
Project Planner
PHASE_01: DECOMPOSITION
SYS_VER: 2026.1
Architect Name
Date
1
The Big Idea
Which app are you building? Give it a cool name and describe its primary purpose.
App Name
Core Mission (One sentence describing what it does)
2
Feature Decomposition
Break your big idea into 3-4 specific features. What are the "must-have" actions?
01
Example: A user can type a task into an input box and click "Add".
02
03
04
3
Visual Skeleton
List the visual elements (HTML tags) you will need to see on the screen. (e.g., H1 Title, Input, Button, List Container)
4
The Aesthetic Vibe
Describe the "look and feel" in 5-8 descriptive adjectives. How should a user feel when they open your app?
Detailed Visual Description
Next Step: Phase 2 - Skeleton Scaffolding (HTML Structure)
Decomposition Teacher Guide Decomposition Guide
Teacher Facilitation Resource • Lesson 1
Teaching the "Vibe" Approach
The core challenge of modern AI-assisted development (or "Vibe Coding") isn't writing the code itself—it's intentionality . Students often expect the AI to "read their minds." This lesson shifts their mindset from passive consumers to active architects who understand that quality output requires granular instructions.
Key Vocabulary
Decomposition: Breaking a complex system into smaller, more manageable parts.Prompting: The natural language instruction given to an AI model.Utility App: A simple tool that solves a specific problem (timer, list, calculator).
The Hook: "The Builder's Blunder"
Discussion Questions to drive the point home:
"If I ask the AI for a 'Music App', what are the chances it builds exactly what I have in my head?" (Answer: Near zero)
"Why is it easier to fix a drawing if you've done a light pencil sketch first?"
"In engineering, which is more expensive: Changing a blueprint or tearing down a wall?"
Guiding the Project Planner
Common Pitfall: Too Big
Students may try to build "the next Instagram." Redirect them to "Utility Apps."
REDIRECTION EXAMPLES:
"Social Media" → "Profile Card Generator"
"Open World Game" → "Text-Based Adventure"
"Online Store" → "Simple Tip Calculator"
The "Component" Check
Ensure they identify the *objects* on the screen. Prompt them with:
• "How does the user get data IN?" (Inputs)
• "How does the user trigger an ACTION?" (Buttons)
• "Where does the data GO?" (Containers/Lists)
Lesson 1 Workflow
0-10 MIN
Hook & Slides: Introduce Decomposition vs. "Magic" expectations.
10-35 MIN
Project Planner: Students define apps, features, and vibes. Walk around to check 'Decomposition' depth.
35-45 MIN
Peer Review: Switch planners. Can your partner visualize your app just from the feature list?
HTML Skeleton Slides Skeleton Crew
Scaffolding the Application Structure
Today's Focus: Structure Only
We aren't making it pretty yet.
We are making it REAL.
<div id="app">
<h1>To-Do List</h1>
<input type="text">
<button>Add</button>
<ul id="list"></ul>
</div>
Thinking in Boxes (HTML)
CONTAINER (<div>)
HEADER
MAIN CONTENT
FOOTER
Every website is just a set of nested boxes. To the AI, these are called Containers or Parent Elements .
Writing the Skeleton Prompt
The Formula:
"Generate the HTML skeleton for a [App Type]. It should include a [Header], an input area for [Data], and a container for [Display]."
DO THIS:
Be specific about the parts you planned in your worksheet.
NOT THIS:
Don't ask for colors, fonts, or logic yet. Just the skeleton!
Ready to Render?
1
Open your AI Chat and your Code Editor.
2
Enter your Skeleton Prompt.
3
Check: Are all your boxes there?
Structure Checkpoint Checklist Structure Checkpoint
PHASE_02_SKELETON
Before we add styles or logic, we must verify the "bones" of our application.
Architect
App Name
Refer to Project Planner
01/ The Prompt
Write the exact prompt you used to generate your HTML skeleton. If you haven't prompted yet, write your draft here first.
"Create a clean HTML skeleton for..."
02/ Component Audit
Look at your code (the HTML tags) and check off what you see. Does it match your plan?
<header> or <h1>
Does your app have a clear title at the top?
<input> Elements
Are there fields where the user can type or enter data?
<button> Elements
Are there buttons ready to trigger actions?
Container / <div> for output
Is there a place where the results or list items will appear?
03/ Visual Validation
Open your HTML file in a browser. It won't look good yet, but sketch the basic "box layout" you see below.
Sketch Layout Here
SKELETON_VALIDATED: [ ] YES / [ ] NO (RE-PROMPT REQUIRED)
Functional Flow Slides Injecting Functionality
Making the Static Dynamic
Wake Up Your App
Your app has a button, but right now it's just a picture of a button.
<button>Add Item</button>
The "Dead" Button
You click it. Nothing happens. The app is "asleep."
onClick = "addItem()"
The "Live" Button
You click it. A script runs. Things change on the screen.
Logic is an "Event"
Think of logic as a When → Then statement.
WHEN (The Event)
"When I click the 'Delete' button..."
THEN (The Action)
"...remove the closest list item from the screen."
"AI needs to know WHICH element triggers WHICH action."
Functional Description Formula
To "wake up" your app, your prompt should look like this:
"Write the JavaScript logic for my app. When the [Button Name] is clicked, it should take the value from the [Input Field] and add it to the [List Container]. Clear the input afterwards."
Mention ID names
Describe the flow
Mention "cleanup" (like clearing inputs)
Ready to Wire It Up?
Open your Logic Lab worksheet. We're going to map out the "When → Then" flows for your specific app before we prompt the AI.
Interactive Logic Lab Worksheet App Architect Phase 03
Interactive Logic Lab
STATUS
SYSTEM_READY
1. The "When → Then" Map
Before you ask the AI for code, you must describe the logic. Map out 3 interactions for your app.
WHEN (User Action)
Example: I click the "Start" button
THEN (App Response)
Example: A 60-second countdown timer begins
WHEN
THEN
WHEN
THEN
2. The Logic Prompt
Using your map above, write a comprehensive prompt for the AI to generate your JavaScript. Remember to mention your HTML IDs!
Terminal Input Prompt:
"Write the JavaScript logic for my app. Use the following 'When -> Then' rules:
3. The Logic Debugger
After you paste the code and test it, did anything break? Use this log to track what you fixed.
The Problem The Correction Prompt Fixed?
|
Next Step: Phase 4 - Vibe & Visuals (CSS Styling)
Visual Vibe Slides Vibe Check
Styling and Visual Polish
What is a "Vibe"?
In web design, a vibe is the emotional impact of your CSS.
AI doesn't just understand "background: blue". It understands moods .
Cyberpunk
Neon, Dark, High-Contrast
Retro 70s
Warm, Groovy, Rounded
Minimalist
Clean, Airy, Subtle
Enterprise
Professional, Trusted, Blue
The Vocabulary of Style
To get the perfect vibe, use descriptive ADJECTIVES in your prompts.
Layout
• Spacious
• Compact
• Centered
• Grid-based
Edges
• Sharp
• Rounded
• Pill-shaped
• Glassmorphic
Color
• Vibrant
• Muted
• Monochromatic
• Pastel
Writing the "Vibe Prompt"
"Now, give my app a modern, dark-mode vibe. Use a deep charcoal background with electric purple accents. Make the buttons large and rounded with a slight glow effect."
Tip: Tell the AI to use Modern CSS or Flexbox for the layout.
Ready to Paint?
Complete the Style Palette Challenge. Pick your adjectives, define your colors, and transform your skeleton into a masterpiece.
Style Palette Challenge Worksheet Style Palette Challenge
Phase 04: Visual Identity & CSS
Aesthetic Audit
Designer
App Vibe Theme
Adjective Cloud
Circle or write 5 adjectives that define your app's "vibe".
Futuristic Organic Brutalist Playful Stealthy Retro Elegant Industrial
Color Spectrum
Define your primary, secondary, and background colors.
Primary (Action Color)
Secondary (Accent Color)
Background Color
The Aesthetic Prompt
Combine your adjectives and colors into a "Vibe Prompt". Be specific about corners, shadows, and spacing!
"Style my app using CSS. The vibe should be ___________________. Use a ___________________ background and ___________________ for buttons. Give elements ___________________ corners and ___________________ shadows. Make sure the font is ___________________ and the spacing is ___________________."
Style Critique & Refinement
The "Squint Test"
Squint at your screen. Is it clear which element is the most important? Is there enough contrast?
Mobile Check
Does it look good if you shrink the window? How did the AI handle responsive layout?
One Word Refinement
If you could change one visual element to make it 10% better, what would it be?
Assembly Line Slides The Grand Launch
Assembly, Review, and Reflection
Launch Day Checklist
01
Merge HTML, CSS, and JS
02
The "Smoke Test" (Does it run?)
03
Final Vibe Polish
The "Assembly" Goal:
Ensure your individual components (The Skeleton, The Logic, and The Vibe) are working together as one cohesive product .
The Quality Assurance (QA) Round
Switch apps with a partner. You are now the QA Engineer.
Testing Utility
Does every button do what it says? Try to "break" the app by clicking fast or leaving inputs empty.
Testing Vibe
Does the style match the purpose? If it's a "Calm Timer," is it actually calming?
Testing Clarity
Is it obvious how to use the app without the architect explaining it?
The Architect's Reflection
As you finish your project, ask yourself:
What was the most difficult "part" to describe to the AI?
How did breaking the app into parts help you manage it?
If you started over, what prompt would you write differently?
Project Complete
You've moved from "Vibing" to Engineering . You aren't just a coder; you are an Architect of Intelligent Systems.
Time to Present!
App Showcase Rubric App Showcase Rubric
Final Assessment
Evaluating functional engineering, intentional design, and architectural thinking.
Architect Name
Project App Name
Criteria Exemplary (4) Proficient (3) Developing (2-1) Decomposition & Planning Clearly broke app into logical modules (L1-L2). All parts accounted for. App broken into basic parts. Some parts feel grouped or missing. Lacked modular plan; attempted to build all at once. Core Functionality App is fully functional. All "When -> Then" interactions work flawlessly. Main features work. 1-2 minor bugs or missing logical steps. App is partially broken or static. Buttons don't trigger actions. Aesthetic Vibe (CSS) Vibe is consistent and intentional. Style choices enhance user experience. Style is clean and reflects chosen adjectives. Some minor clashing. Style feels default or chaotic. Adjectives not visible in design. Prompt Engineering Demonstrated precise natural language control over AI output. Refined prompts. Used effective prompts. Limited use of refinement or specific IDs. Relied on vague prompts ("Make me an app"). Little control over output.
Instructor Feedback
Notes on architectural growth and technical implementation...
Total Score
/16
