Visual editing

What is visual editing?

While Alloy's chat sidebar allows you to prototype in the context of the entire captured screen, visual editing helps you target and refine specific elements in your prototypes—like buttons, headings, forms, cards or layout sections. You can use Alloy's visual editing feature to target specific UI elements and tell Alloy exactly how you want to change them.

Instead of giving broad, page-level instructions, you can prompt Alloy with more specific edits, like "make this button a primary button" or "increase this card's spacing." This makes prototyping faster and more controlled because the model receives clear boundaries and context along with your prompt.

Additionally, Alloy provides out-of-the-box editing tools for block and text components, including layout options, spacing and alignment options, color and other common treatments. These editing tools give you a what-you-see-is-what-you-get (WYSIWYG) experience for refining your prototypes.

An example:

A product manager at a travel company creates a prototype for a revamped search experience. They prompt Alloy to visualize the page with larger images and a fewer set of filtering options. The generated prototype is close, but the product manager wants to add transparency to their results cards. Rather than prompt at a high level, they enter visual edit mode and select the results card. From there, they use Alloy's out-of-the-box editing tools to test and select the level of transparency that suits the design.

Select and edit an element

To edit an element:

1. In the chat sidebar, where you prompt Alloy, choose the Select button. 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.

When you select an element, the editing toolbar appears. The available options change depending on the type of element you've selected–block elements or text elements.

Editing tools for block elements

Block elements include images, sections, divisions, buttons, and other non-text elements. Alloy provides the following options for editing these elements using the visual editing toolbar.

Layout. Layout options refine how block elements are composed on the screen. With layout options you can adjust:

• The block element's absolute width and height in pixels.
• The layout type:
  • Stack layouts use CSS flexbox approaches. You can change the direction that child elements follow, making blocks inside the container stack either vertically or horizontally on the page. You can adjust how child elements should be distributed and aligned within the container.
  • Grid layouts use CSS grid approaches. You can change the absolute value of column widths, row heights, and the gaps between them.

Spacing. Spacing options refine the whitespace of an element in pixels. Outside spacing adjusts the element's margin. Inside spacing adjusts the elements padding.

Corners. Corner options adjust the border-radius of an element in pixels. Alloy suggests preset values for rounded corners or calculates the radius needed to make an element circular.

Background. Background options adjust the element's background color. Choose from Alloy's preset palette or enter an exact value using RGBA.

Border stroke. Border stroke options adjust the appearance of the element's border. You can choose to hide or show borders, make them solid or dashed, adjust the thickness of the border, or change its color.

Shadow. Shadow options adjust the CSS box-shadow of the element. You can adjust the shadow's offset and blur values.

Transparency. Transparency options adjust the opacity of the element and all the elements it contains. You can enter a custom value or choose between Alloy's presets.

Editing tools for text elements

Text components include headings and paragraph text. Alloy provides the following options for editing these elements using the visual editing toolbar:

• Font size, in pixels.
• Font family, which currently supports Inter, Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana, System UI, Monospace, serif, and sans-serif.
• Font color, or custom RGBA value.
• Font treatment, including bold, italic, and underline.
• Text alignment, either aligned right, center, or left.
• Spacing, the Outside (margin) and Inside (padding) spacing in pixels.
• Transparency, which adjusts the text's opacity.

Delete an element

Warning: Deleting an element from a prototype cannot be undone.

To delete an element:

1. In the chat sidebar, where you prompt Alloy, choose the Select button. 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. Select Delete.

Exit visual editing mode

To exit visual editing mode, select the Select button in the chat sidebar. When visual editing is disabled, the button will be deselected and you can prompt Alloy as you normally would in the chat sidebar.