Start for free

Prompting tips

Effective prompting in Alloy requires specific, detailed instructions rather than vague requests or overly complex specifications. Your first prompt should include the task and instruction, context about where to focus, key elements and features to consider, expected user behaviors, and any visual or layout constraints. After establishing a foundation, use Alloy's visual editing features to refine your prototype iteratively by selecting specific elements and requesting small, targeted changes.

Introduction

AI models provide better output when you give specific instruction in small, targeted requests. If you give too many instructions or too vague instruction, you'll likely be disappointed in the outcome.

Follow these tips and best practices to avoid unnecessary visual clutter and counterintuitive flows. With a little care, you can prototype your ideas quickly and completely using Alloy.

Get started with your first prompt

Your first prompt is probably the most challenging and important. Provide as much detail as possible when prompting the AI after capturing your product.

Include the following details:

  • Task and instruction: describe precisely what you want Alloy to do (for example, "Design a new shopping cart layout")
  • Context: direct Alloy where to focus its prototyping effort and point to the specific section you want to iterate on
  • Key elements: provide a list of key features or capabilities Alloy should consider
  • Expected behaviors: describe what you expect to happen when users interact with key elements
  • Constraints: list any visual, layout, or device constraints that Alloy should keep in mind

Examples

Poor: "Design a clean, modern dashboard."

Better: "Design an expandable dashboard showing data visualizations for recent purchasing trends in a neubrutalist style. Add this in a collapsed state to the 'Purchases' section of the layout. When clicked, expand the dashboard to show a chart related to purchases over time. Constrain the dashboard sizing to 50% of the viewport width in desktop layouts."

Refine your prototype with visual editing

Your first prompt establishes a foundation to build on. To get better results, iteratively refine your prototype by requesting small, detailed changes.

Most prototyping software allows you to upload screenshots to point the AI to specific elements on the page. You can do this in Alloy too, but Alloy's visual editing features make it easy to scope down your iterative changes to specific elements on the page.

To select and edit an element:

  1. In the chat sidebar, choose Select. Visual editing is enabled and the Select button remains selected.
  2. Hover and select the element you want to edit. The editing toolbar appears.
  3. Type your prompt in the Ask for changes… field, or adjust other options using the toolbar.

Here are some general tips for refining elements:

  • Focus on one outcome per request. Don't ask the AI to do too much at once.
  • Prefer specific values and tokens over adjectives for spacing, sizes, variants, and color tokens. Avoid generic descriptions like "cleaner" or "modern".
  • Reference specific design patterns, like tabs, modals, buttons and cards. Avoid using generic determiners, like "this" or "that".
  • Give Alloy context about the element's state, like empty, loading, error, hover, or other specific interaction state.
  • Tell Alloy what you expect to happen when interacting with the element.

Examples

Poor: "Make it modern."

Better: "Update the dashboard to use a dark mode color scheme with #1a1a1a background, reduce border radius to 4px for a sharper look, and replace the current sans-serif font with Inter at 14px base size."

Poor: "Make this cleaner."

Better: "Increase white space by adding 12px padding around the form area, reduce the number of visible form fields from 12 to 6 core fields with an 'Advanced options' expandable section, and remove all icon decorations except for primary CTAs."

Poor: "Make this more compact."

Better: "Convert the card grid from 3 columns with 24px gaps to 4 columns with 16px gaps, reduce card padding from 24px to 16px, and decrease the thumbnail height from 200px to 140px."

Poor: "Reimagine this experience."

Better: "Replace the static analytics dashboard with a conversational interface where users type questions like 'Show revenue by region this quarter' and receive dynamically generated charts with natural language summaries above each visualization."

Give specific feedback to help Alloy iterate

Alloy can't make actionable changes without specific feedback. Giving consistent feedback (including positive feedback) helps Alloy learn what you're looking for and apply those lessons to your future prompts.

Here are some tips for giving Alloy feedback as you prototype:

  • Let Alloy know what's working and what isn't—acknowledge successful elements before requesting additional changes.
  • Give Alloy context about why you're requesting a change, framed from the user's perspective where possible.
  • Give feedback about interactions, not just static states.
  • Try a "yes, and..." approach over focusing on what's wrong.

An example interaction with Alloy

Prompt 1: "Create a SaaS dashboard with metrics cards"

Prompt 2: "Good foundation. The four metric cards at the top work well. Now let's refine them: increase the card padding from 16px to 24px, make the metric labels 14px medium weight, and the numbers should be 36px bold. Also add a small trend indicator (up/down arrow) next to each number."

Prompt 3: "Perfect on the cards. Now let's work on the data table below them. The table should have: zebra striping with #F9FAFB on alternate rows, 48px row height, left-aligned text in columns except the 'Amount' column which should be right-aligned, and the header row should be sticky with a 1px border-bottom."

Prompt 4: "The table looks great. One adjustment: add 12px horizontal padding to each cell and make sure the first column has 24px left padding."

Resources

Here's a list of resources for learning general prompt engineering and prompt writing strategies:

For visual prototyping strategies, see:

Product managers may get value from these resources: