Skip to main content
Building with AI (Vibe Coding)

⏱ About 15 min15 XP

Describing the Whole Idea

You have a project idea and a brief. Now comes the step most beginners skip — and regret skipping. Before you open any AI tool or editor, you need to describe the whole idea in enough detail that someone who has never heard of your project could build it. That someone might be an AI assistant. Or it might be you, three days from now, after you have forgotten half the decisions you made today.

Why Description Comes Before Building

When you describe your idea fully before building, two powerful things happen. First, gaps appear. You discover questions you had not thought to ask: What happens if the user types nothing? Where does the data come from? What should the page look like on a phone? These questions are cheap to answer on paper and expensive to answer halfway through a build. Second, your AI assistant gets dramatically better prompts. An AI that knows 'a webpage with a button that shows a random quote from a hardcoded list of fifteen quotes, styled with a dark background and large white text' will produce far more useful output than an AI given 'make a quote thing.'

The Vision Document

A vision document is a written description of your project that covers what it does, what it looks like, how the user interacts with it, and what happens in edge cases. It does not need to be long — one focused page is enough. Its job is to eliminate ambiguity before the first line of code is written.

Let us watch Marcus write a vision document for his project: a webpage that tracks how many pages he has read each day. He starts vague: 'A reading tracker.' Then he asks himself five questions and writes the answers. What does it do? Lets me enter a number of pages and saves it with today's date. What does it look like? One input box, one button labeled 'Log it,' and a list below showing each entry. What happens when I use it? I type 30, click the button, and '30 pages — May 17' appears in the list. What happens in an edge case? If I type a letter instead of a number, it shows an error message and does not add the entry. What is out of scope? No accounts, no graphs, no weekly totals — just the list. That description is now precise enough for an AI to build a first version from scratch.

The Five Questions Framework

Use these five questions for any project. Write real answers — do not just think them. 1. What does it do? Describe the core action in one sentence. 2. What does the user see? Describe the visual layout: buttons, text, inputs, colors if you know them. 3. What happens when the user does the main thing? Walk through one complete interaction step by step. 4. What happens in an edge case? Choose one thing that could go wrong and describe the correct response. 5. What is explicitly out of scope? List at least two features you are NOT building right now. Answering all five takes ten to twenty minutes. It saves hours of confused building later.

Describe It Like a User, Not a Developer

Write 'the user clicks the blue button and a new quote appears' rather than 'onClick handler updates state.' Plain-language descriptions are easier to refine, easier to give to an AI, and easier to check against the finished product.

Prompt Challenge

Write an AI prompt that describes your project clearly enough for the AI to generate a complete first version.

Your prompt should…

  • Begin with 'Build me a webpage that...' and finish with the core function in one sentence
  • Describe the visual layout including at least two specific UI elements
  • State one edge case and what should happen when it occurs

Turning Your Description Into a Prompt

Your vision document is the raw material. Your AI prompt is the refined version you actually send. A strong first-build prompt has four parts: the goal (what you want built), the interface (what the user sees), the behavior (what happens during interaction), and the constraints (what to leave out or handle carefully). Here is the difference between a weak and strong prompt for the same project. Weak: 'Make me a quiz app about space.' Strong: 'Build me a single-page quiz about space. Show one question at a time with four multiple-choice buttons. When the user picks an answer, highlight it green if correct or red if wrong, then show a Next button. After ten questions, show the final score as X out of 10. Do not include a timer or a high-score board. Use a dark navy background with white text.' The strong prompt took two minutes to write but will save thirty minutes of back-and-forth revision.

Do Not Start Prompting Before You Finish Describing

It is tempting to start chatting with an AI the moment you have a rough idea. Resist. An AI builds what you describe — if your description is incomplete, the output will be incomplete. Finish your vision document first, then build your prompt from it.

Why does answering 'what happens in an edge case' before building save time?

What makes a project prompt 'strong' compared to a weak one?

Write a Vision Document and a Strong Prompt

  1. Step 1: Take the project brief you wrote in Lesson 1.
  2. Step 2: Answer all five questions in writing — what it does, what it looks like, the main interaction, one edge case, and what is out of scope.
  3. Step 3: Using your answers, write a strong AI prompt that includes goal, interface, behavior, and constraints.
  4. Step 4: Read your prompt aloud. Underline any phrase that is vague or could be misunderstood.
  5. Step 5: Revise those underlined phrases until the prompt leaves no ambiguity you care about.
  6. Keep both documents — the vision document and the refined prompt. You will use the prompt in Lesson 3.