Be Clear and Direct
Learn how to write prompts that are clear, contextual, and specific to get better results from Prototyper.
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.
The golden rule of clear prompting: Show your prompt to a colleague who has minimal context on the task, and ask them to follow the instructions. If they're confused, Prototyper will likely be too.
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
Don't assume Prototyper knows your preferences. Every project is different, and what worked for one prompt won't automatically apply to the next.
| 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