Abacus AI Agent Designs

Create stunning UI designs. Prompt, preview, edit and export multi-screen designs. Turn them into working apps

Abacus AI Agent can design the screens of your product before you build it. Describe a landing page, a dashboard, an onboarding flow or a mobile app. The agent lays out browsable screens on a Figma-style canvas, inside desktop and phone device frames. You can refine the screens by chatting or by editing them directly on the canvas. You can also save versions and export to HTML, PNG, PDF or SVG. When you are happy with the design, hand it to the agent to build a web or mobile app.

The best results come from starting small. Describe your core screens, review them on the canvas, and iterate one change at a time. Checkpoints let you go back to an earlier version whenever you need to.

Watch it in action

1. Sketch to Production Design

2. Wireframes to UI Design

3. Luxury App Design

How to create designs

What is a Design?

A Design is an artefact made up of one or more static screens. Each screen is a self-contained, shown inside a device frame on the right pane:

• Desktop frame: 1440 px wide
• Phone frame: 390 px wide

How does Design help?

• Explore ideas visually before you invest in development as creating designs are a lot cheaper than developing a complete app
• Show a product, feature or user flow to stakeholders with realistic screens.
• Turn a rough sketch, a screenshot, a live website or a Figma file into polished, editable screens.
• Keep colors, typography and spacing consistent across every screen with a shared design system.
• Hand the finished design to Abacus AI Agent to build a web or mobile application.

How does it work?

1. Tell the Abacus AI Agent what to build. For example - "Help me with a UI design for a mobile app for the members of a luxury sports club...".
2. Describe what you want. Include the product, the audience, the screens you need, the device (desktop or phone), the style, and any references (a website URL, an image or a Figma link). The agent may ask a few clarifying questions first.
3. The agent plans the canvas. It picks the fidelity (wireframe or high-fidelity mock), the list of screens and the frame for each one. For hi-fi mocks it also sets up a design system: color, typography, spacing and corner-radius etc.
4. Screens are generated.
5. A checkpoint is saved. Each successful iteration is saved as a version with a short description, so you can go back if required.
6. Iterate, export or build. Ask for changes in chat, or switch the canvas to Edit mode and change things yourself. When you are done, export the design or use Build to turn it into an app.

Key capabilities

• Multi-screen UI Designs: Create complete end-to-end flows,The agent can add, remove, reorder, rename and re-frame screens (desktop or phone) as you iterate.
• Create design from reference image/website URLs/ Figma files.
• Choose between wireframes and high-fidelity mocks: The agent supports two fidelity modes and infers the one you want from your prompt.
• Visual editing on the canvas: Switch the canvas to Edit mode to select elements, move and resize them, edit text inline, adjust styles, and add, reorder or delete layers. Your changes save straight into the design.
• Checkpoints and version history: Every successful iteration is saved as a checkpoint. Open Versions to preview any earlier version and restore it if needed. You can also save a manual checkpoint at any time.
• Export: Export the current screen or all screens as HTML, PNG, PDF or SVG. SVG is the recommended format for bringing designs into Figma.
• Build it into an app: When the design is ready, the agent can turn it into a web application or an iOS and Android mobile app in a new conversation. Your original design is left unchanged.

Managing your design

In a design conversation the canvas opens in the right panel beside the chat. It is where you view, edit, version and export your screens.

Views and navigation

• Single screen: focus on one screen at a time. Pick the screen from the Screens list. Layers and element editing work in this view.
• All screens: see every screen side by side on one board, in canvas order.
• Zoom: use the − / + controls (the current zoom percentage is shown between them) or fit the design to the view.
• Selector and Pan tools: select elements, or drag to move around the canvas.

Edit mode vs View mode

Use the Edit / View toggle, to switch modes:

• View mode: a read-only preview ("View mode — read-only preview").
• Edit mode: click elements to change them ("Edit mode — click elements to modify").

In Edit mode, you can:

• Select an element. It gets a bounding box with resize handles and a move handle. While you drag or resize, smart guides show alignment and spacing.
• Edit text inline directly on the screen.
• Adjust styles in the side panel: typography (size, weight, alignment), text and background colors, opacity, border, padding, margin, width and height, position, display and shadow.
• Delete the selected element with Delete or Backspace.
• Undo / Redo is also supported.

Canvas edits save straight into the design files. You will see "Saving changes..." and then "Changes saved".

Versions and checkpoints

Checkpoints save your design at a point in time, so you can experiment freely and go back when you need to.

• Automatic checkpoints: the agent saves a checkpoint after each successful iteration, with a short description of what changed. If a turn changed files but did not save one, a checkpoint is saved automatically at the end of the turn.
• Manual checkpoints: use the checkpoint button on the canvas to save your own canvas edits as a version ("Manual checkpoint"). If nothing has changed since the last checkpoint, you will see "No changes to checkpoint".
• Versions panel: open Versions to see your checkpoints, newest first. Up to the 100 most recent checkpoints are listed.
• Preview: open any version to preview it. A "Previewing checkpoint" banner appears ("You are viewing an older version of the project"). Previewing does not change your design; close the preview to return.
• Restore: choose Restore checkpoint to roll the design back to that version.

Important: restoring is a rollback

Restoring a checkpoint resets the design files to that version. It also removes the conversation messages that came after it, and marks the newer checkpoints as reverted so they no longer appear in Versions. Preview first, and treat a restore as permanent.

Exporting your design

Use the Export button on the canvas. What you export depends on the current view: single-screen view exports the current screen, and all-screens view exports every screen. You run exports yourself from the canvas; the agent cannot export for you.

Format	Best for
HTML	Handing off to developers; opening the design in a browser
PNG	Sharing in chat, docs and slides
PDF	Reviews and stakeholder sign-off
SVG	Importing into Figma

Tip: getting your design into Figma

Export as SVG. In Figma, use File → Place Image, or drag the .svg file onto the Figma canvas.

Turning your design into an app

When your design is ready, Abacus AI Agent can build it into a working application. There are two ways to start.

Option 1: the Build button

1. In the chat, find the design checkpoint card and click Build ("Build a web or mobile app from this design").
2. In the Build your Design dialog, choose Web Application ("Build as a deployable website") or Mobile Application ("Build as an iOS & Android app").
3. A new conversation is created ("Web App Created" or "Mobile App Created"). Open it with the link shown. The agent automatically starts building from your design screens.

As the dialog explains: "This will create a new conversation that recreates your design screens as a functional application. Your original design will remain unchanged."

Option 2: ask in chat

Alternatively, you can simply ask the abacus ai agent in the chat to build a web application/ mobile application based on the design.

Debugging and troubleshooting

What you see	What to do
Fewer screens than you asked for, or the turn was interrupted	Ask: "Continue and generate the remaining screens." After an interruption the agent does not restart on its own; it reports what is done and waits for you.
Grey placeholder boxes instead of images	Check the agent's "Assets to upload" list and attach those images in the chat. (Wireframes always use placeholders by design.)
The reference website could not be captured	The site may block automated capture. Attach a full-page screenshot instead.
Figma import failed	Connect Figma from Connectors, check that your seat allows API access, retry later if you were rate-limited, or export the frames as images and attach them.
Fonts differ from the reference	Fonts a site hosts itself may be swapped for the closest Google Font. Name the font you want.
Clicking buttons or links does nothing	This is expected: designs are static. Build the design into an app for real interactivity.
The canvas shows "Couldn't load design"	Use Try again. In some cases the canvas also retries automatically every 10 seconds.

Frequently asked questions

How is a Design different from a design asset or an App?

A Design is a set of multi-screen UI mockups on an interactive canvas. A design asset is a single static visual, such as a poster, banner or social graphic. An App is a working, full-stack web application that you can deploy. Designs can be built into Apps.

Can I click through my screens like a prototype?

No. Screens are static, and links and buttons don't navigate. Use all-screens view to see the flow, or build the design into an app.

Can I design for tablet?

Not as a dedicated frame. The frames are desktop (1440 px) and phone (390 px).

Can I have several design projects in one conversation?

No. Each conversation holds one design project. Start a new conversation for a separate design.

Will my manual canvas edits be overwritten when I chat?

The agent reads the current screen files before editing, so your saved canvas edits are kept. Saving a checkpoint after manual edits is still a good idea.

How do I get my design into Figma?

Export as SVG, then use File → Place Image in Figma or drag the file in.

Is Design available on the free plan?

No. Design is available on paid plans.

Still need help?

Ask the agent in your design conversation, for example: "How do I export this?" or "Which design system are you using?" You can also reach out to the Abacus AI support team through your usual support channel.