This guide shows how to level up the context you provide when building prototypes—particularly the context that covers data (synthetic datasets), visual design (design systems), and layout/UX structure (wireframes).
This material is from the Reforge AI Prototyping class. If you have questions about the material or the course, feel free to email me at ravi@ravi-mehta.com.
<aside>
🙏
If you found this valuable, please subscribe to my Substack, **Ravi on Product.**
</aside>
The Three Types of Context: Functional, Visual, and Data
What Your Prototyping Tool Needs to Know
A typical product lifecycle includes:
- Strategy docs
- OKRs
- Design systems
- PRDs & specs
- Wireframes
- Detailed designs
- Technical design documents
Your prototyping tool needs similarly well-thought-out context:
- Functional context defines what the software does—its features, user interactions, and behavior across different states.
- Visual context defines what the software looks like—its layout, design language, and user experience.
- Data context defines how the software works—the structure, relationships, and realistic sample content that power the experience.
Functional Context — Use Cases & Behavior
Functional context defines what the software does—its features, user interactions, and behavior across different states.
- This is the most natural starting point for product managers
- Functional context maps directly to how we already think about product requirements.
- A functional prompt describes the behavior you want the software to perform, similar to the details you'd write in a spec, PRD, or user story.
Build a team retrospective board with three columns:
* "What went well" (green)
* "What didn't go well" (red)
* "Action items" (blue)
Users should be able to:
1. Add new cards to any column
2. Upvote cards they agree with
3. See cards sorted by vote count within each column
Use a clean, minimal design. Include 2-3 sample cards in each column to start.
Best practices for Functional Context:
- Be specific (unless you're brainstorming). Describe the exact behavior you want, including triggers, effects, and key states—like writing a really good spec.
- Describe edge cases, not just the happy path. Spell out how the experience should handle empty, loading, and error states, plus important interactions.
- Default to “do” over “don’t.” Write positive, concrete requirements that give the model a clear target.
- Break down complex requirements. Structure complex prompts into smaller, ordered parts using headings and lists.
Visual Context — Design & UX