Prompting tips

Master Alloy prompting with best practices for high-fidelity prototypes. Write clear prompts and reduce revisions.

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

General Tips

One outcome per prompt

Sequence changes. Structure → behavior → visuals → copy.

Name components explicitly

Refer to drawers, modals, tables, badges, steppers, etc., not "boxes" or "panels".

Prefer numbers and tokens over adjectives

Use spacing values, sizes, variants, and color tokens instead of "cleaner" or "modern".

Provide assets and sample data

Link or upload files (icons, logos, CSV/JSON) before referencing them.

State the UI state

Empty, loading, error, or populated. Alloy will render accordingly.

Verify as you go

After a structural change, ask Alloy to explain what it changed and where. Then style.

Examples

Add a control to an analytics header

Context: PM for a product analytics tool Outcome: Add a compare control Location: "Activation" chart header Rules: Segmented control with {This Week, Last Week, Custom…}; default This Week Verification: Switching segments updates the chart with a loading shimmer, then refreshed data

Require document upload in a wizard

Context: Onboarding flow for HR Outcome: Make ID upload mandatory Location: Step 2 "Documents" section Rules: Single file input; 25MB limit; accepted types: PDF, JPEG, PNG; show filename preview; inline error on limit/type Verification: "Next" stays disabled until a valid file is attached

Add WIP limits to a kanban board

Context: Project management workspace Outcome: Add WIP caps on columns Location: Board view → column headers Rules: Add a WIP badge to each column (To Do 5, In Progress 3, Review 4); badge turns warning when count exceeds cap Verification: Creating a new card in a full column shows a non-blocking warning and the badge highlights

Insert a status legend and filtering on a map view

Context: Operations dashboard Outcome: Add a legend that filters items Location: Map footer Rules: Legend items {Idle, Active, Delayed, Offline}; reuse existing status tokens; clicking an item filters the list Verification: Clicking "Delayed" reduces the list to only delayed entities and the legend item shows an active state

Add a primary CTA under a form field

Context: Auth sign-up form Outcome: Add a primary button Location: Below the password field Rules: Label "Continue"; full-width; spacing 16px above; disabled until form is valid Verification: Button enables only after valid email and password; submission shows a progress state

Anti-patterns and Corrections

Instead of: "Make it nicer."

Do this: Specify tokens: Card radius 12, gap 16, Heading/600, Link/primary.

Instead of: "Redesign the page and update theme."

Do this: Separate prompts: add the widget → connect data → apply theme variants.

Instead of: "Add a Cancel button."

Do this: "Add a secondary 'Cancel' button in the modal footer, left of 'Save'."

Instead of: "Move it down a bit."

Do this: "Place CTA 24px below the headline, left-aligned with the form."

Instead of: Referencing files that don't exist.

Do this: Upload assets first; reference the exact filename or URL.

Instead of: Conflicting constraints (e.g., full-bleed and max-width 960px).

Do this: Pick one and explain why.

Working with Visual Edit

  1. Select the element or region.
  2. Send the prompt with the Location matching your selection.
  3. Re-select if the result lands elsewhere and say: "Apply the previous change here."

Note: Selection plus explicit Location removes most targeting errors.

Sequencing Changes

A reliable order for complex edits:

  1. Structure — insert components and placement.
  2. Behavior — hook up interactions and data.
  3. Visuals — apply tokens, variants, spacing.
  4. Copy — adjust strings and microcopy.

Keep each step as its own prompt with its own verification.

Troubleshooting

Nothing changed

Re-select the target with Visual Edit and resend. Then ask: "Explain what changed and where."

It changed the wrong area

Select the correct region and say: "Move the previous change here. Remove it from the other location."

Controls appear but don't work

Prompt: "Wire this control to the existing data/action. Describe the connection you added."

Thread drift

Use Version History to revert to the last good state. Start a new branch and restate the full blueprint.

Styling didn't match brand

Reference named tokens and variants explicitly. Avoid adjectives.