---
title: "Be Clear and Direct"
description: "Learn how to write prompts that are clear, contextual, and specific to get better results from Prototyper."
canonical: "https://www.prototyper.co/docs/02-prompt-engineering/be-clear-and-direct"
---
# Be Clear and Direct
> 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