Be clear and direct
Write prompts the Prototyper agent can't misread: give it context, say exactly what you want and list the steps, with before-and-after examples.
The more precisely you explain what you want, the better Prototyper's response will be.
When interacting with Prototyper, think of it as a brilliant designer who needs explicit instructions. Like any collaborator joining a new project, Prototyper doesn't have context on your brand, preferences, or specific requirements. The clearer you are, the better the results.
How to be clear, contextual, and specific
-
Give Prototyper contextual information: Just like you might perform better on a task with more context, Prototyper will too. Include:
- What the UI will be used for
- Who the target audience is
- What workflow or user journey this fits into
- What a successful result looks like
-
Be specific about what you want: If you want a dark theme, say so. If you want mobile-first, specify it. Don't assume Prototyper will guess your preferences.
-
Provide instructions as sequential steps: Use numbered lists or bullet points to ensure Prototyper builds the UI exactly as you envision it.
Examples
Example: building a user profile card
Notice how the unclear prompt leaves too much room for interpretation, while the clear prompt specifies exactly what's needed.
| Prompt Type | Prompt | Result |
|---|---|---|
| Unclear | Make a user profile card | Generic card with random fields, default styling, unclear hierarchy |
| Clear | Create a user profile card with: 1) Circular avatar (64px) top-left, 2) User name as bold heading next to avatar, 3) Role/title in muted text below name, 4) "Follow" button on the right side, 5) Stats row at bottom showing followers, following, posts counts. Use subtle shadow and rounded corners. | Exactly what was requested with clear visual hierarchy |
Unclear prompt result: Prototyper might create a card with a centered avatar, full bio text, social links, and a completely different layout than expected.
Clear prompt result: A predictable card matching your mental model, ready for iteration.
Example: creating a pricing table
| Prompt Type | Prompt |
|---|---|
| Vague | Build a pricing table for my SaaS |
| Specific | Build a pricing table with three tiers: Starter ($9/mo), Pro ($29/mo), and Enterprise (Contact us). Requirements: 1. Highlight the Pro tier as "Most Popular" with a badge 2. Each tier shows: price, billing period, 5 feature bullet points, CTA button 3. Feature checkmarks for included, X marks for excluded 4. Pro tier should be visually emphasized (larger, different background) Style: Clean, modern, use blue accent for CTAs. Cards should have subtle borders, not heavy shadows. |
The specific prompt tells Prototyper exactly what tiers to include, how to highlight the recommended option, what information to display, and how to style it—leaving no room for misinterpretation.
Example: dashboard layout
| Prompt Type | Prompt |
|---|---|
| Vague | Create a dashboard |
| Detailed | Create an analytics dashboard for a marketing team. Layout: 1. Sidebar on left (200px) with logo and navigation 2. Main content area with header showing page title and date range picker 3. Grid of 4 metric cards at top (Visitors, Conversions, Revenue, Bounce Rate) 4. Line chart below showing traffic over time 5. Table at bottom showing top pages Data context: This is for a B2B SaaS company tracking website performance Style: Minimal, lots of whitespace, Inter font, blue accent color |
What context to include
When writing prompts, consider including:
| Context Type | Example | Why It Helps |
|---|---|---|
| Purpose | "This is an onboarding flow for new users" | Prototyper can optimize for first-time user experience |
| Audience | "Target audience is enterprise IT admins" | Affects tone, density, and feature complexity |
| Brand | "Modern, minimal like Linear or Notion" | Gives clear visual direction |
| Constraints | "Must work on mobile, dark mode only" | Prevents unusable output |
| Flow | "User clicks this after completing signup" | Provides journey context |
Common mistakes to avoid
| Instead of... | Try... |
|---|---|
| "Make it look good" | "Use soft shadows, rounded corners (8px), and generous padding" |
| "Add some colors" | "Use blue (#3B82F6) for primary actions, gray (#6B7280) for secondary text" |
| "Make it responsive" | "Mobile-first layout: single column on mobile, two columns on tablet, three on desktop" |
| "Add a form" | "Add a form with email input, password input, and submit button. Show validation errors inline." |
| "Like the other page" | "Match the header style from the dashboard: logo left, nav center, avatar right" |
Quick reference
Do:
- Describe the specific components you need
- Specify dimensions, colors, and spacing
- Mention the target audience and use case
- Use numbered steps for complex layouts
- Reference specific design styles or products
Don't:
- Use vague terms like "nice," "good," or "modern" without context
- Assume Prototyper remembers previous prompts
- Leave critical details to interpretation
- Combine too many unrelated features in one prompt
- Skip describing the visual hierarchy