Prototypes

What are prototypes?

Prototypes are high-fidelity representations of user interfaces and user interaction patterns. They allow your team to feel how interactions might work in your product before writing production code.

Use prototypes to:

• Explore new concepts and UI patterns
• Communicate your ideas to your team or stakeholders
• Test concepts with users
• Reduce development risk by clarifying requirements

An example:

After seeing users struggle with filtering and comparing booking options, a product manager at a travel company creates a prototype to visualize a redesigned hotel search results page. They prompt Alloy to mock up a layout with larger photos and fewer filtering options. They share the prototype with customers in short usability sessions. They observe that users are more successful navigating the prototype than the current experience. They share the prototype with their team to confirm its feasibility and define requirements. Then development begins.

In Alloy, you create prototypes by prompting the app. This is commonly referred to as "vibe prototyping". Learn more about prompting to get the best results from Alloy.

Create, edit, and delete prototypes

Use Alloy to capture your product and begin prototyping using Alloy's chat sidebar. Once created, you can manage your prototypes on the Prototypes page.

Create a prototype

Alloy lets you use artificial intelligence to create a potential future of your product's user interface. Capture your product and create a prototype to share your ideas with your team, stakeholders, and customers.

Prerequisites:

• Use a Chromium-based browser (like Google Chrome, Dia, Microsoft Edge, Brave, or Opera)
• Add the Alloy browser extension
• Sign up for an Alloy account

To create a prototype:

1. Capture your product using the browser extension.
2. In the chat sidebar, prompt Alloy to make changes or create new experiences using natural language. See Prompting tips for information about prompting.
3. Optionally, use Alloy's visual editing features to edit specific parts of your prototype.

Your prototypes are automatically saved in the Alloy app on the Prototypes page.

Supported browsers

Users can view, edit, prompt, and share prototypes using any modern browser. However, the browser extension only works on Chromium-based browsers, including:

• Google Chrome
• Microsoft Edge
• Brave
• Vivaldi
• Opera

Alloy does not support Safari or Firefox browsers for capturing new prototypes using the extension. If you can't use a Chromium-based browser, use public links to capture.

Duplicate a prototype

You may want to duplicate a prototype to explore new ideas without affecting a version you want to retain. This sort of branching helps you maintain milestones in your prototypes, and gives you a starting point for new ideas.

To duplicate a prototype:

1. Select Prototypes from the sidebar.
2. Search for and select the prototype you want to duplicate.
3. From the top navigation bar, select … > Duplicate.

Alloy opens a new tab with the same prototype experience and a clean chat sidebar.

Rename a prototype

Alloy automatically generates a name for your prototypes based on your chat interaction. You can change this name to make it easier to find or share your prototypes.

To rename a prototype:

1. Select Prototypes from the sidebar.
2. Search for the prototype you want to rename.
3. While hovering on the prototype's thumbnail, select … > Rename.
4. Give your prototype a new name, then press Enter.

Delete a prototype

Alloy limits the number of prototypes you can have based on your plan. Free plan members are limited to 20 prototypes. We recommend upgrading to a pro account if you are working with more than 20 prototypes, so you don't lose your work.

You can delete prototypes to manage your workspace or to free up space.

Warning: Deleting a prototype removes all chat interactions and version history for that prototype. This cannot be undone. The original capture is still available in the Captures page.

To delete a prototype:

1. Select Prototypes from the sidebar.
2. Search for the prototype you want to delete.
3. While hovering on the prototype's thumbnail, select … > Delete.

View prototypes

Alloy supports mobile and tablet views of your protoypes. You can also easily view previous versions, if needed. All members of your Alloy workspace can view any prototype created by any member in the workspace.

Search or filter prototypes

To search for and view a prototype:

1. Select Prototypes from the sidebar.
2. Use the search bar to search for prototypes by keyword. Use the Created by filter to hide or show prototypes created by specific workspace members.
3. Select the prototype's thumbnail to open the prototype.

Prototypes are ordered by last edited date by default. Select Last edited to change how they are sorted. You can choose to sort by last created date or alphabetically.

View mobile or tablet versions

To view mobile versions of your prototype:

1. Select Prototypes from the sidebar.
2. Search for and select the prototype you want to view.
3. From the top navigation bar, select Switch to mobile view.

The viewport for the prototype condenses and viewport controls appear above your prototype:

• Select the device dropdown to choose common mobile and tablet sizes.
• Enter your own viewport width and height values to change the viewport size.
• Select Rotate to landscape to view how your prototype looks when the device is rotated.

View a previous version

Prompting Alloy can sometimes return a result you didn't expect. If you want to revert to a previous version, you can restore the prototype starting starting from a previous point in your chat conversation with Alloy.

Warning: Restoring a previous version removes any prototype changes made after the point of restoration. You cannot recover these changes. If you are unsure, duplicate the prototype first, then revert to a previous version.

To create a new prototype from a previous version:

1. Select Prototypes from the sidebar.
2. Search for and select the prototype you want to view.
3. In the chat sidebar, scroll up to the point in time you want to start your new prototype from.
4. Hover over your avatar and select Create new version from this point.

Alloy warns you that you're about to revert to a previous version. After restoring, you can continue prototyping as normal.

Share a prototype

Share your prototypes to explore concepts with customers and end-users, get feedback from your team and stakeholders, and discuss feasibility.

To share your prototype:

1. Select Prototypes from the sidebar.
2. Search for and select the prototype you want to view.
3. From the top navigation bar, select Share.

• Enter a person's email address and select Invite to invite them to join your workspace and view your prototype.
• Select Copy link and paste the link in email, Slack, Microsoft Teams, or other messaging platforms. You can change the visibility of the link by selecting either Public or Private dropdown.