An introduction to prompts

Prompting Dos and Don'ts

Learn the most effective language for crafting prompts in Prototyper.

General Tips

• Attach screenshots to enhance your prompts.
• Be detailed: more information leads to better results.
• Focus on keywords; avoid unnecessary phrases like "I want" or "a component for."

Prompting Dos and Don’ts

❌ Don't: Use overly brief prompts

Example: "landing page"

✅ Do: Be detailed and incorporate keywords

Correct Example: "Design a landing page for a B2B SaaS app specializing in flight deals, featuring a hero section and listing benefits like earning credit card points."

❌ Don't: Be vague about your needs

Example: "features on website"

✅ Do: Specify UI elements and content clearly

Correct Example: "Create cards with a border, title, and description that detail my three main features: self-serve integrations, premium support, and custom branding."

❌ Don't: Overcomplicate the request

Example: "checklist with 4 sections with 3 tasks each showing progress"

✅ Do: Simplify and clarify your request

Correct Example: "Design four sections, each with three checkboxes. Include a progress bar for each section that updates as checkboxes are marked."

❌ Don't: Leave out names of specific components or variants

Example: "a box for checks in a list"

✅ Do: Clearly name the components and their variants

Correct Example: "Include three checkboxes in a list, using the primary variant."