Adjust how your app looks, then preview the result before you publish.

Design opens beside your live preview and lets you change how your project looks without writing code.

This guide covers setting global styles with Theme, editing single elements with Visual Editor, replacing images from Library, describing changes in plain language, and checking your work across devices before it goes live.

How Design works

When AI Agents complete a task, the App Viewer appears at the top of the page. Select Design to open the design panel on the left of the screen, with your live preview beside it. It has three tabs:

• Theme sets global rules for the whole app — colors, fonts, and effects. Best used before you build.
• Visual Editor adjusts the elements you have selected. Works on any project, at any time.
• Library replaces images or generates new ones.

Theme sets the rules, and Visual Editor perfects the details. Select Exit to close the panel.

The Design panel opens on the left. Until you select something, Visual Editor prompts you to choose an element.

Before you start

Before you open Design, make sure that:

• Your project has a completed build. Design opens from the App Viewer, which appears only after the agents finish a task.
• You know that changes are not live until you publish. Your public URL is unaffected until you publish the updated version.
• You know that a theme reaches shared styles only. Elements built with fixed values keep their old look after a theme change. See If a theme does not look right below.

Set global styles with Theme

A theme is your project's design system. It defines global variables — palettes, typography, and spacing — that apply across your whole app, rather than settings on one element.

Theme is best used during the preparation stage, before you start building. Applying one early means everything the agents generate follows it from the start.

Choose a theme

The Theme tab opens with a Search Themes field and groups themes into sections:

• Current Theme — what your project uses now. Before you apply anything it reads No theme applied yet, and the + button beside it creates a new theme.
• Default Theme — 14 designer-curated presets. Each is shown as a preview of a page built with it, with its name and a row of swatches showing its palette. These cannot be deleted.
• My Theme — themes you have created or customized. These can be renamed and deleted.

Every theme appears as a preview of a page built with it, with its name and a row of swatches showing its palette, so you can judge the direction before applying it.

The Theme tab, with an applied theme at the top and your saved themes below it.

To apply one:

1. Select the theme you want.
2. Atoms asks "Do you want to apply theme name?"
3. Select Apply to confirm, or Cancel to go back.
4. Check the preview.

Expected result: the preview updates to the theme you chose, and it now appears under Current Theme.

Note: If you have unsaved changes in Visual Editor, Atoms shows Unsaved Changes and asks you to save or discard them before applying a new theme.

Update an applied theme

A dot on the Theme tab means a newer version of your applied theme is available.

To take it, select Update on your current theme and confirm Do you want to re-apply theme name? Your project then uses the newer version.

You do not have to update. If you leave it, your project keeps running the version you applied.

Note: If your app does not look like the theme you selected, individual elements may have been overridden in Visual Editor. Those overrides target specific content and survive a theme change.

Build or edit a theme in Theme Manager

Select + beside Current Theme to build one from scratch, or open an existing theme to change it. Either opens Theme Manager, where you fine-tune a theme against a live preview.

Its settings sit on three tabs:

• Color — the color roles your app uses, grouped by purpose: Base Colors, Card, Popover, Primary, Secondary, and more. Each role has its own value, so changing Primary reaches every element that uses it.
• Fonts — your Serif, Sans-serif, and Mono typefaces.
• Effects — corner Radius, and a Shadow you control by color, opacity, blur, spread, and offset.

The preview beside them is built from real components — sign-in forms, buttons, inputs, body and monospace text — so you can judge a change immediately rather than guessing. Use the light and dark toggle beneath it to check both, because a palette that works on light surfaces can lose contrast on dark ones.

Under the preview you also get Undo and Redo for stepping through your changes, and Reset to return the theme to where it started.

Theme Manager. The preview updates as you change a value, and the controls beneath it cover undo, redo, export, import, and reset.

Save a theme

1. Select Save.
2. Give it a Theme Name, or keep the suggested one.
3. Select Save to confirm.

Expected result: your theme appears under My Theme on the Theme tab, with its palette shown as swatches. Apply it the same way as any other theme.

Note: Edits are not kept until you save them. Atoms will stop you and offer to save or discard if you try to apply a different theme with unsaved changes outstanding.

Reuse a theme across projects

Theme Manager has Export and Import beneath the preview. Export a theme to a file, then import it into another project to reuse the same design direction, or hand it to a teammate so their project matches yours.

If a theme does not look right

Applying a theme is not a compatibility check, so it does not normally fail. A theme replaces the shared style values your app is built on, which means any theme in the picker can usually be applied to any project.

What you may see instead is a theme that applies successfully but does not reach everything. There is no error message for this — it simply looks wrong.

Part of your app keeps its old appearance. This is the most common issue. An element that was given a fixed value, a specific color or font set directly on it, rather than one of your app's shared styles — cannot be reached by a theme change, so it keeps its previous look and can clash with everything around it. Fix it in Visual Editor, or ask the agents in chat to replace the fixed value with your theme's styles.

Text becomes hard to read. A dark theme applied to a layout designed for light surfaces can leave text with too little contrast. Adjust the affected elements in Visual Editor, or choose a theme closer to your existing design.

Atoms tells you the theme cannot be applied. Uncommon, and it means your project's interface was not built on the Atoms theming system. Use Visual Editor instead — everything is still achievable element by element.

Important: Choose a theme early where you can. When the agents build with a theme already applied, they use its shared styles from the start, so fewer elements end up with fixed values that a later theme change cannot reach.

Edit single elements with Visual Editor

Select an element in the preview to edit it. To work on several at once, hold Ctrl and click on Windows, or Cmd and click on Mac.

Important: The property controls described below act on one element at a time. When you have several elements selected, change them by describing what you want in the chat instead — see Describe changes instead of clicking.

A badge above your selection names the element and its size — the font size for text, or the dimensions for a container — so you can confirm you have the element you intended rather than its container.

The Visual Editor tab then shows the properties available for that element, grouped into sections:

• Layout — margin and padding.
• Appearance — background color, opacity, and corner radius. Radius runs from None through Small, Medium, Large, XL, 2XL, 3XL, to Full.
• Content — the element's text.
• Style — font family, weight, size, text align, and decoration.
• Class — the styling classes applied to the element, collapsed by default.

Which sections appear depends on what you selected: a text element offers Content and Style, while a container may show only Layout, Appearance, and Class.

A floating toolbar also appears over your selection with the most common controls to hand — font, weight, alignment, and color for text — alongside the delete control and the prompt field described below.

Changes appear in the preview as you make them. To abandon them, use Discard at the bottom of the preview.

Save your changes

Edits are not kept until you save them. Once you have made a change, Discard and Save appear at the bottom of the preview.

• Save keeps your changes.
• Discard throws them away and returns the element to how it was.

Expected result: the buttons disappear once you save, and your change is now part of the project.

Note: If you try to leave Design, apply a different theme, or use Select to Chat with unsaved work outstanding, Atoms shows Unsaved Changes and asks you to save or discard before continuing.

Saving keeps the change in your project. It does not put it on your live site — see Publish your changes.

With an element selected, Visual Editor shows its properties. The floating toolbar over the selection switches between describing a change and editing it directly.

Tips:

1. Use Visual Editor for cosmetic changes and the chat for structural ones such as new pages, new features, or backend logic.
2. To make the same change across a row of cards or buttons, select them all with Ctrl-click or Cmd-click and describe the change once in chat. Editing each one through the property controls means repeating yourself.

Replace images with Library

Library applies an image to the element you have selected, so start by choosing where the image should go.

1. Select the element you want to change in the preview. Until you do, Library shows Select an element to start visual editing.
2. Open the Library tab and pick a source — Image, Generate, or Upload.
3. Apply your image. How you do this depends on where it came from. For a built-in image, hover it and select Use asset. For an image you generated or uploaded, select its finished thumbnail.
4. Check the preview. The image is applied to your selected element straight away.
5. Select Save at the bottom of the preview, or Discard to undo it.

Expected result: your chosen element carries the new image, and the Save and Discard buttons disappear once you save.

The Library tab with image categories and Popular Images.

Where the images come from

Image is the built-in collection. Use Search assets for something specific, or browse a category — Backgrounds, Nature, Education, Health, Fashion, Science, Feelings, and People, with More tags for the rest. Selecting a category opens it; use the back arrow to return. Popular Images below shows a general selection. Hover any image and select Use asset to apply it.

Generate creates a new image from a description, and needs a Pro or Max plan. Type what you want under Describe the image you want to generate and select Generate. Results appear below the field. Select a finished thumbnail to apply it to your element.

Upload adds your own file by drag-and-drop, paste, or click. Images can be in JPEG, PNG, GIF, BMP, TIFF, or WEBP formats, up to 4MB. Uploaded images appear below the drop area — select one to apply it.

Note: Use asset appears on the built-in images only. Images you generate or upload are applied by selecting their thumbnail instead.

Describe changes instead of clicking

When a change is easier to describe than to click through, you can ask the agents instead. There are two places to do it, and both act on whatever you currently have selected.

• The floating toolbar on your selection. A small toolbar appears over the element you have chosen. Its two icons switch between describing a change and editing properties directly. Type into Ask the Atoms to change… and send.
• The chat input below the Design panel. When an element is selected, the input shows a Design label and the prompt Ask the Atoms team to modify the selected element…, so the agents apply your instruction to that element rather than the whole project.

The floating toolbar sits over your selection. The chip on the left shows which element the instruction will apply to.

Describe the outcome, not the mechanism:

- "Make this calmer — more whitespace, smaller heading."

- "Match this button's styling to the pricing page."

Vague instructions such as "make it look better" give unpredictable results.

Note: Clicking a property in Visual Editor changes it immediately. Sending a prompt asks the agents to do the work, which takes longer. For a simple color or spacing change, edit the property directly.

Preview your changes

Use the toolbar above the preview:

• Device view — switch between screen sizes to test responsiveness. Theme and typography changes that look right on desktop often break on mobile, so always check mobile before publishing.
• Page selector — move between the pages of your app.
• Refresh — reload the preview if it looks out of date.
• Open in a new tab — view the app full width in a separate browser tab.
• Console — open the log panel when something looks wrong.

Expected result: your changes are visible on every page and at every device width you intend to support.

Recover from a preview problem

If the preview looks out of date, keeps loading, or shows red errors, the problem is with the preview rather than with Design. See Build and preview troubleshooting for the troubleshooting steps — Refresh, the Console panel, Resolve, and how to report an error that persists.

One thing that is specific to Design: if your edits seem to have vanished, check whether you saved them. Unsaved changes are discarded when you leave Design — see Save your changes.

Publish your changes

Design changes stay in your working project until you publish. Select Publish in the top-right corner, or Update if the project is already live.

Note: If your project uses Specify Version rather than Always Latest, the live site stays locked to the version you chose, and your design changes will not appear publicly until you publish a new version.

For the errors the agents report during a build, see Issue Report.