Prompting tips

Introduction to Prompting

Mastering prompts in Alloy helps you create high-fidelity prototypes quickly and with fewer revisions. The more specific and contextual your instructions, the more accurately Alloy can generate what you need.

Think of prompting as giving clear directions to a teammate: the clearer your request, the smoother the outcome.

General tips

• Break large requests into smaller tasks
  Instead of asking Alloy to redesign an entire page, focus on one component or section at a time.
  Example: Instead of “Redesign the checkout page,” try “Add a promo code input field below the price summary in checkout.”

• Ask for one change at a time
  Sequencing edits helps Alloy process your intent step by step.
  Example: First add a button, then request styling changes.

• Be specific
  Precise prompts are easier for Alloy to interpret than vague instructions.
  Example: “Add three checkboxes labeled Vegan, Vegetarian, Gluten-Free inside a filter modal” is clearer than “Add food filters.”

• Use Visual Editing
  Highlight the exact area you want to change, then describe the update. Point-and-click targeting reduces ambiguity.

• Attach visual context
  Provide screenshots or existing screens to anchor your request. This helps Alloy match layout, typography, and component style more faithfully.

• If changes don’t appear
  Ask Alloy: “Why didn’t this change take effect?” This often reveals misinterpreted instructions or highlights what needs clarification.

Good prompting practices

✅ Use screenshots to recreate or adjust specific designs.
✅ Provide clear context and roles to guide Alloy’s interpretation.
    Example: “You are a product manager at a food delivery app. Add a filter for dietary restrictions.”
✅ Reference exact components by name (modal, button, checkbox, etc.).
✅ Break updates into focused steps instead of stacking multiple requests together.
✅ If prompts unravel, roll back using version history and ask Alloy: “Help me understand why this didn’t work.”

Good prompt examples

These prompts are clear, direct, and lead to accurate results:

• “You are a product manager at a food delivery app. Add a filter option for dietary restrictions such as vegan, vegetarian, and gluten-free.”
• “Add three checkboxes to this container, inside a modal list.”
• “Add a primary button labeled ‘Continue’ beneath the password field in the sign-up form.”
• “Replace the logo in the top left with the company’s updated SVG file.”

Bad prompting practices

❌ Be vague.
Example: “Checklist with 4 items.” — No context for where it goes, what the items are called, or how they behave.

❌ Bundle multiple changes into one prompt.
Example: “Redesign the profile page, add a settings modal, and make every button tertiary.” — Break this into sequenced steps.

❌ Use ambiguous adjectives without specifics.
Example: “Make it cleaner and more modern.” — Say what to change (e.g., increase card padding to 24px, switch headings to Inter Semibold, use primary blue for links).

❌ Omit the location/target.
Example: “Add a Cancel button.” — Where should it go? Specify: “Add a secondary ‘Cancel’ button to the modal footer, to the left of ‘Save.’”

❌ Refer to assets or data that don’t exist.
Example: “Swap the logo to /brand/new.svg and use the ‘Ocean’ color palette.” — Upload or link the asset and define the palette first (or attach a screenshot).

❌ Give conflicting constraints.
Example: “Full‑bleed hero, fixed width 960px.” — Pick one: full‑bleed or a fixed max‑width.

❌ Over‑constrain with brittle rules.
Example: “Write the tooltip copy in exactly 7 words.” — State the intent instead: “Short tooltip that explains the 25MB upload limit.”

❌ Ask Alloy to “brainstorm” without context.
Example: “Be creative and improve this page.” — Provide goals, audience, and constraints (e.g., “for first‑time users on mobile, reduce steps to create an account”).

❌ Rely on pixel nudges without anchors.
Example: “Move it down a bit.” — Specify relation (“place CTA 24px below the headline, left‑aligned with the form”).