Writing Good Prompts

Plan before you prompt, build by component, use real content, and apply design buzzwords to get consistent, high-quality results.

Make Prototyper ask clarifying questions

One of the most effective ways to get better results from Prototyper is to let it fill in the gaps before writing code. After stating what feature or change you want, add a line at the end of your prompt like:

"Ask me any questions you need in order to fully understand what I want from this feature and how I envision it."

Prototyper will respond with focused, often insightful follow-up questions—sometimes ones you wouldn't have thought to specify. This process helps clarify your requirements up front and prevents misunderstanding or wasted effort later.

Plan before you prompt

Before using Prototyper, define what you're building. Use a quick planning session to answer these four questions:

• What is this product or feature?
• Who is it for?
• Why will they use it?
• What is the one key action the user should take?

You're not writing a spec doc. You're setting direction. Vague ideas produce vague outputs. Clear thinking leads to clear results.

Prompt example:

Build a one-page site for a budgeting app targeted at Gen Z freelancers.
The main CTA should be "Start Saving Smarter." Focus on a bold, expressive
aesthetic with large text and punchy colors.

Prompt by component, not page

Prototyper works best when you build your UI in modular parts—not full pages at once. Each block should have one clear purpose: a hero section, a feature grid, a testimonial slider, a pricing table.

When you prompt by component, you gain clarity, control, and flexibility. If something doesn't look right, you can fix just that block instead of re-prompting an entire page.

Prompt example:

Create a floating menu bar with glassmorphism effect. Include Home, Search,
Music, Favorites, Add, Profile, and Settings icons. Add gentle floating
animation and smooth hover interactions.

Design with real content

Prototyper does not work well with placeholder content like "lorem ipsum" or "feature 1 / feature 2." The model responds to structure and intent—and the fastest way to show intent is to use real words.

Even if your final copy isn't ready, use copy that reflects your message. Real content reveals design issues early that placeholder text hides.

Prompt example:

Hero section with headline: "Design Calmly." Subtext: "Turn stress into
structure with Prototyper." CTA: "Start Building Free." Use copy-centered
layout with generous vertical spacing.

Speak atomic: buttons, cards, modals

The smaller and more specific your UI language, the better Prototyper performs. Instead of asking for a "section with a signup," say "Add a form with an input field for email and a rounded CTA button."

Think like a system. Describe cards, badges, toggles, chips, form fields, dropdowns. Don't say "a user interface" when you can say "a modal with a success toast after submit."

Prompt example:

Create a card with a user profile picture, name, and a follow button.
Add a badge for verified users, and show a tooltip when hovering over the badge.

Use buzzwords to dial in aesthetic

Visual style is one of the most important parts of prompting. Buzzwords are the fastest way to guide the tool on vibe.

Prototyper understands terms like "minimal," "expressive," "cinematic," "playful," "premium," and "developer-focused." These influence typography, spacing, shadow, border radius, and color palette.

Prompt example:

Design a landing page hero that feels premium and cinematic. Use layered
depth, translucent surfaces, soft motion blur, and dramatic contrast
between headline and background.

Iterate with precision

When something needs to change, focus on specific layers or elements rather than rewriting full prompts. Say exactly what you want to change and what should stay the same.

Prompt example:

Change the CTA button text to "Get Started" and increase the padding to
24px horizontal. Keep the existing background color and font.

Quick Reference

Do:

• Plan your feature before prompting
• Break complex requests into smaller, focused prompts
• Use real content instead of placeholders
• Include visual style descriptors (buzzwords)
• Be specific about UI components (cards, modals, badges)

Don't:

• Write paragraph-long prompts with multiple features
• Use vague language like "make it better" or "fix it"
• Skip the planning phase
• Prompt entire pages at once
• Leave placeholder content in your prompts