Skip to main content
Controls let you compare intentional design variants and tune meaningful details without asking the agent to regenerate the design after every change.

Use Controls

1

Open Controls

Click the sliders icon in the Preview toolbar.
2

Try different options

Switch between variants, toggle behaviors, or adjust the available values. The design updates immediately without refreshing the preview.
3

Keep your choices

When you have active changes, click Make defaults. Magic Patterns puts your selected values into the agent prompt so you can review and send the request.
The badge on the Controls icon shows how many values differ from the design’s defaults. Click Reset to restore every Control to its original value.

Add Controls to a design

If a design has no Controls, open the panel in the editor and click Ask Agent. Describe the variants, behaviors, or structural choices you want to compare, then send the completed prompt. Good Controls represent decisions with multiple valid answers:
  • Different layouts or complete visual treatments
  • Behavior changes, such as a static list versus a carousel
  • Coordinated choices that affect many elements, such as density or theme
  • Structural options, such as showing a column or changing a section count
Controls are not intended for one-off copy, colors, spacing, typography, or sizing. Use Visual Edit for those direct changes.
Keep the set focused. Two or three meaningful Controls are usually more useful than making every detail configurable.

Changes are local

Control changes are temporary and local to the current browser tab. They do not update the source, design history, collaborators, shared links, or published output. To make your current choices part of the design:
  1. Open Controls in the editor.
  2. Change the values you want to keep.
  3. Click Make defaults.
  4. Review and send the prefilled agent prompt.
People viewing a preview link can use available Controls for their own comparison, but their choices are also local and temporary. Adding Controls or making values the defaults requires access to the editor.