Step 3: Prepare your product docs
Write the three short documents the agent needs to build your prototype.
The agent builds what you describe. Three documents are required. They do not need to be long — clear and specific beats long and vague every time.
Create a docs/ folder inside your project and put all three files there. The agent looks for this folder by default; any extras you drop in (screenshots, reference mockups, a PDF PRD) also get read.
# macOS / Linux
mkdir -p ~/my-prototype/docs
touch ~/my-prototype/docs/product-brief.md ~/my-prototype/docs/ux-vibes.md ~/my-prototype/docs/screens.md# Windows PowerShell
New-Item -ItemType Directory -Force $HOME\my-prototype\docs | Out-Null
New-Item $HOME\my-prototype\docs\product-brief.md, $HOME\my-prototype\docs\ux-vibes.md, $HOME\my-prototype\docs\screens.md -ItemType FileDocument 1: product-brief.md
Explain the problem, who has it, and what your app does about it. Keep it to half a page.
Template — copy and fill in the blanks:
# Product Brief
## Problem
[Describe the problem in 2-3 sentences. Be specific: who feels this problem, when, and why current solutions fall short.]
## Target user
[One sentence: who is this for? Age, context, technical level.]
## Core value
[One sentence: what does your app do that nothing else does as simply?]
## MVP features
- [Feature 1]
- [Feature 2]
- [Feature 3]Example:
# Product Brief
## Problem
University students in Mexico lose track of small daily expenses — coffee, transport,
tacos — and arrive at month-end with no savings and no idea where the money went.
Existing budgeting apps are complex and aimed at salaried professionals.
## Target user
Mexican university students aged 18-25 with irregular income and no accounting knowledge.
## Core value
Log an expense in under 5 seconds with a single tap, get a weekly summary in plain Spanish.
## MVP features
- Quick-log a transaction (amount + category)
- Weekly spending summary
- Budget goal per categoryDocument 2: ux-vibes.md
Describe the look and feel in plain words. The agent will translate this into color choices, typography, and component style.
Template:
# UX Vibes
## Tone
[3-5 sentences describing the mood. Example: "Clean and minimal, like a well-organized notebook.
Friendly but not playful. Trusting, like a bank — but warmer."]
## Reference sites
1. [URL] — [what you like about it]
2. [URL] — [what you like about it]
3. [URL] — [what you like about it]
## Colors
[Optional: mention specific colors or just describe them. Example: "Deep navy primary, warm white background, green for positive amounts, red for negative."]
## Typography
[Optional: "Large numbers, thin font weight. Body text at comfortable reading size."]Document 3: screens.md
List every screen your prototype needs. For each screen, list its purpose and the main elements it contains.
Template:
# Screens
## Screen: [Screen name]
**Purpose:** [One sentence: what does the user do here?]
**Elements:**
- [Element 1]
- [Element 2]
- [Element 3]Example:
# Screens
## Screen: Home / Dashboard
**Purpose:** Show the user their spending at a glance.
**Elements:**
- Current balance (large number)
- This week's spending vs. budget (progress bar)
- Last 5 transactions (list)
- Floating "+" button to log a new expense
## Screen: Log Expense
**Purpose:** Record a new transaction quickly.
**Elements:**
- Amount input (large numpad)
- Category selector (icon grid: food, transport, entertainment, other)
- Optional note field
- Save button
## Screen: Weekly Summary
**Purpose:** Review spending by category for the current week.
**Elements:**
- Bar chart: spending per category
- Total spent vs. total budget
- Biggest expense this weekIf you are an AI agent reading this page, the next step is /docs/prototype-kit/04-run-prompt.