Designing UI With Amp

Use Amp to explore UI designs, refine a direction, and build it in your app. Start with a screenshot and describe what you want people to be able to do.

When you ask for UI ideas, Amp builds interactive HTML prototypes that use your app’s own colors, type, and copy. You can click through each design and compare them before you commit to an implementation, then keep working in the same thread to turn the chosen design into code.

Start With Your UI and a Goal

Attach a screenshot of the page you want to improve, or ask Amp to run your app and take one. Explain what is difficult to use and what should stay the same.

This sidebar needs to show who's online and let teammates chat. Chat is too hard to find. Explore better layouts using this screenshot. Keep our colors and typography. Don't write code yet.

You can attach images. If you are starting from scratch, describe the screen and its purpose instead.

Compare Different Layouts

Ask for alternatives that change how the UI works, rather than only its colors or spacing. Include the states you need to judge the design, such as an open menu.

Prototype three directions: people above chat, chat with an avatar row, and a compact dock that expands. Open the avatar menu so I can see where people's active threads go.

Amp reads your app’s styles and components before it builds the prototype, so the designs look like your app. It shows today’s design next to up to three directions, with a switch to move between them. The buttons and menus work, so you can check how each design behaves, not only how it looks.

In an orb thread, the prototype appears in the conversation. The Amp web app shows it in a sandboxed frame that follows your light or dark theme. The prototype has no network access and cannot reach your app, code, or data, so it uses sample data and saves nothing. The Amp CLI does not show prototypes in the conversation. Outside an orb, ask Amp to write the prototype as a standalone HTML file that you open in your browser.

Refine a Direction

Pick a direction and describe what to keep and what to change. You can refer to a direction by name in the same thread without rewriting the original request.

Take the avatar row further. Keep chat as the main view and put the online faces in one row above it. Remove the navigation above the faces.

Amp updates the prototype and keeps the parts you did not mention. You can combine parts of different directions too:

Use the avatar row layout with the dock's message composer. Keep the open-thread menu unchanged.

For a precise change to the working UI, such as adjusting padding or fixing a button, ask Amp to edit the code directly instead of updating the prototype.

Explore a Visual Style With Painter

Amp’s image tool, Painter, generates images. Ask for Painter by name when you want to see a look rather than try an interaction, such as a moodboard for a new product that has no UI yet.

Use Painter to make a moodboard for a calm, dark note-taking app. Show three visual styles.

Image models can invent controls or leave out requirements, and they do not use your app’s real components. Treat a generated image as a reference for the look, then build a prototype to check how the design works.

Prototypes, Painter, and portals each answer a different question:

A prototype runs in the conversation or your browser. Use it to compare designs and check how an interaction works, such as where a menu opens, before you write app code.
Painter generates images. Use it to explore a visual style or create assets.
A portal shows your real app running in the orb. Use it to review the implementation with your own components and data.

Build and Review the UI

When you have a direction you like, ask Amp to implement it using your app’s existing components. The prototype is a design reference, not part of your app.

Implement this sidebar using our existing components. Make the avatar menu show that person's active threads. Check keyboard navigation and the narrow layout, and run the relevant tests.

Review the running app as well as the screenshots. In an orb, ask for a portal so you can try it yourself:

Start the dev server and give me a portal link to the sidebar. Show it with enough messages to scroll and with the avatar menu open.

Use the portal’s floating review button to select an element and send feedback to the same thread. Test interactions in the app as well. A mockup or prototype cannot tell you whether your app’s menu works or focus moves correctly with your real components.

Create Supporting Assets

Painter can also generate images for the UI. Ask for a transparent background when an isolated asset will sit over your app’s background.

Use Painter to create a paper-airplane illustration for the empty chat state. Match the blue in our screenshot. Give it a transparent background with no shadow, and check it on light and dark backgrounds.

Painter supports transparent PNGs. Amp should check the file’s transparency as well as its appearance before delivering it; a white or checkerboard background alone is not proof.

Keep the background for a complete composition, such as a UI mockup or poster. An app icon with its own designed background should stay opaque too. See Painter for the available background options.