Prompt-to-Build Workshop
You have learned the moves. Now it is time to put them together. In this workshop you will practice writing complete, high-quality build prompts for real scenarios — applying the spec mindset, outcome language, context and constraints, examples, decomposition, focused requests, and everything else from this module. Think of it as a rehearsal before the real performance. The goal is not to produce perfect prompts on the first try. The goal is to practice the thinking.
The Workshop Framework
For each scenario you encounter in this lesson, use this five-step framework to build your prompt: Step 1 — Artifact: Name what you are building. Be specific. 'A web page' is less useful than 'an HTML quiz page.' Step 2 — Behaviors: List what the user can do and what happens. Use outcome language — what the user experiences, not the code steps. Step 3 — Context: Identify the audience, environment, and any project-level context that shapes the right result. Step 4 — Constraints: Name any technology limits, style rules, scope limits, or things to avoid. Step 5 — Examples (if useful): Decide whether including an example would communicate your intent better than description alone. A prompt built from these five steps will be dramatically more effective than a vague wish. You have seen each step individually — now practice them as a system.
In vibe coding, your prompt IS your plan. The quality of what the AI builds is directly tied to the quality of the thinking you did before you wrote the prompt. Five minutes of planning your prompt saves twenty minutes of fixing the result.
Workshop Scenario A — The Vocabulary Flashcard App A middle-school English teacher wants an app where students can study vocabulary words. The app shows one word at a time, lets students flip a card to see the definition, and lets them mark cards as 'Got it' or 'Practice more.' At the end it shows how many they got. It should work without any back-end — just a single HTML file. The teacher's students are on older school computers, so no cutting-edge CSS or JavaScript features. Before you write the full prompt, walk through the five steps. What is the artifact? What are the behaviors? What audience and environment context matters? What are the constraints? Would an example of a card data structure help? Workshop Scenario B — The Personal Portfolio Page A student wants a one-page portfolio site. It should have a hero section with their name and a tagline, a projects section with three cards (each with a title, one-sentence description, and a placeholder for a link), and a footer with their email. It should be clean and minimal — no heavy frameworks. They want it to look good on both desktop and mobile. They will add real project details later, so placeholders are fine. Again: artifact, behaviors, context, constraints, example?
Evaluating Your Own Prompts
After you write a prompt, evaluate it using these four questions: Could I hand this to a stranger and they would build exactly what I mean? If not, what would they have to guess? Does every sentence describe an outcome rather than a process step? If a sentence sounds like pseudo-code, rewrite it. Have I named the audience, platform, and any real constraints? If you left out context that changes what a good result looks like, add it. Is this one thing or many things? A good build prompt in a decomposed workflow focuses on one logical piece. If your prompt has five unrelated requirements, consider splitting it. These questions are not a checklist to rush through — they are diagnostic tools. Use them to find gaps before the AI has to guess.
Before sending a prompt, read it aloud as if you are giving instructions to a person who has never heard of your project. Where do you stumble or have to add context? Those are the places to improve. The spoken stumble almost always maps to a written gap.
Prompt Challenge
Write a complete build prompt for a simple recipe card web page. The page should display one recipe with a title, a list of ingredients, and numbered steps. It should look clean and be easy to read on a phone.
Your prompt should…
- Name the artifact and specify it is a single HTML file with no external libraries
- List at least three behaviors or display requirements using outcome language
- Include both an audience or use-case context and at least one explicit constraint
In the five-step workshop framework, what does the 'Behaviors' step ask you to describe?
Which question is most useful for evaluating your own prompt?
Full-Build Prompt Sprint
- Step 1: Choose one of these builds:
- A) A simple tip calculator — user enters bill amount and tip percentage, sees the tip amount and total.
- B) A mood tracker — user clicks one of five emoji buttons to log today's mood, and the page shows a history of the last seven days.
- C) A vocabulary quiz — ten words from a given list, four multiple-choice definitions each, score shown at the end.
- Step 2: Use the five-step workshop framework (artifact, behaviors, context, constraints, example) to plan your prompt. Write the planning notes first.
- Step 3: Write the full prompt. Aim for something specific enough that a stranger could build exactly what you picture — no guessing required.
- Step 4: Review it against the four evaluation questions. Make at least one improvement based on that review.
- Step 5: If you can try it with an AI tool, do so. Note whether the result matches your spec, and if not, identify which of the four misunderstanding causes applies.