Build Blueprint

Station 4 — Blueprint Lock. You pass when build-blueprint.md is saved next to your brief.

What this is

The build blueprint is the Blueprint step of KD Flow Lite. It turns your project-brief.md into a practical plan your chosen build tool can follow.

This is the beginner-friendly version of architecture, design direction, and a first build task - all in one short file you save as build-blueprint.md.

Why it matters

A brief says what you want. A blueprint says how the first version is laid out and what to build first.

Without a blueprint, the AI guesses your structure, your design, and where to start. With one, V0 or your IDE assistant can build the right first version and you stay in control.

What to do

Same mission, different vehicle:

Project Brief -> shared Build Blueprint -> lane-specific Build Packet

Your Project Brief says where you are going. Your Build Blueprint says what the website should become. Your Build Packet tells your chosen lane how to build it.

Step 1 — Generate the blueprint

Open the same free AI chat tool you used for your brief. Paste this prompt and your saved brief:

Using my Project Brief below, create my Vibe 101 Build Blueprint.

Project Brief:
[paste project-brief.md]

Rules:
- Keep this suitable for a 3-hour beginner website build.
- Do not add new features.
- Do not add login, payment, database, dashboard, chat, or backend.
- Keep the design simple and buildable.
- Give me a first build task that creates one visible version.

Use this exact format:

# Build Blueprint

## Build Target
[one sentence describing version 1]

## Page Structure
[one page or max 3 sections]

## Section-by-Section Plan
[what each section contains]

## Component Plan
[hero, cards, menu/list, contact block, gallery, CTA, etc.]

## Content Inventory
[real content available + sample content needed]

## Visual Direction
[mood, colors, typography feel, spacing, layout, references in words]

## Interaction Plan
[buttons, links, hover/click behavior, if any]

## First Build Task
[the first visible thing to build]

## File / Folder Expectations
[likely files or folders, beginner-friendly]

## Acceptance Checklist
[5 checks before calling version 1 done]

## Risk / Simplification Notes
[what to avoid or simplify]

## Next Prompt To Use
[a copy-paste prompt for the coding assistant]

Keep each section to one or two lines so it stays beginner-friendly.

Do not paste passwords, API keys, private client data, employer data, IC/passport numbers, bank details, sensitive personal information, or confidential business details. Use sample or fake content when needed.

Step 2 — Check the blueprint

Read it once. Make sure it:

• matches your brief and does not add new features;
• has a clear Build Target and Page Structure;
• gives a simple, buildable Visual Direction;
• names one First Build Task that produces something visible;
• ends with a Next Prompt you can paste into your coding assistant.

If anything is too big or too vague, ask the AI to simplify it.

Step 3 — Choose lane-specific build prep

Your Build Blueprint is shared, but your final build prep depends on your lane.

Do not skip this step. The same idea needs different instructions depending on the tool you use.

Step 4 — Save the blueprint

Create a file in your project folder called:

build-blueprint.md

Paste the blueprint in and save it. Your V0 Prompt Chain or IDE Build Packet will use both project-brief.md and build-blueprint.md as the source of truth while you build.

Common mistakes

• Letting the blueprint add features your brief never mentioned.
• Skipping the first build task, so the AI tries to build everything at once.
• Saving the file outside the project folder.