1DesignToolDownload

Templates · since v1.0.0

AI UI and mockup generator

Dashboards, admin panels, settings screens — the UI mockup and wireframe templates produce working HTML/CSS, not a picture of a UI you then have to rebuild.

DownloadRead the docs
demos/checkout-wireframe/index.html Open full

Wireframe · Devin · e2e · gate PASS

Checkout Flow — Cart to confirmation in four lo-fi frames — annotations, order summary, and every state in between.

▸ the prompt that made it

“Wireframe: a checkout flow: cart, shipping, payment, confirmation.”

Why it matters

A mockup's job is to be argued with. When the mockup is real markup, the argument is shorter: product clicks it, engineering reads it, and the 'handoff' is a folder not a Figma link. And when it's time, codebase mode lets the same loop design inside your actual app.

How it works

  1. 1Pick UI mockup or wireframeMockups aim at presentation fidelity; wireframes stay structural. Both render live in the preview.
  2. 2Describe the screenWhat the screen is for, what it shows, what the user does — the agent turns that into real markup in your direction.
  3. 3Resize it like a deviceThe stage's viewport picker renders the mockup at phone, tablet and desktop sizes — responsive mistakes show up in the mockup phase, not in review.
  4. 4Export or promoteShip the files, hand the folder to engineering, or rebuild it for real inside your codebase with Build mode.

Capabilities

  • Mockups and wireframes as HTML/CSS — inspectable, clickable, real
  • Viewport picker checks every design at real device sizes
  • Your design system's tokens drive every mockup, so screens look like one product
  • Variants: two layout directions blind-compared before anyone commits
  • Artifacts library keeps every version and export together
demos/mission-control/index.html Open full

UI mockup · Devin · swe-2-high · 24 min

Mission Control — A launch dashboard at 10 Hz — countdown, telemetry, go/no-go poll, hold state. Dense and aligned.

▸ the prompt that made it

“Design a rocket launch mission control dashboard (1920×1080). Panels: master countdown (T-minus), vehicle status diagram (stages, tanks with fill levels), streaming telemetry charts (altitude, velocity, acceleration, tank pressure) with simulated data, weather constraints with pass/fail, a go/no-go poll of 8 stations that turn green one by one, event log, and a trajectory plot. Include a 'hold' state that can be triggered, turning affected panels amber with a reason. Data updates live at 10 Hz without layout shift. Night-console direction, dense but perfectly aligned, tabular numerals everywhere.”

FAQ

Is this a Figma replacement?

Different tool for a different step. 1DesignTool makes real interfaces in code — the thing Figma mockups describe. Teams use it before a build, or instead of a build for internal tools.

Can it design inside my existing app?

That's codebase Build mode: adopt the repo and edits land in your real components, verified on your dev server — a separate feature from throwaway mockups.

What do the exports look like?

ZIP of the project, single-file HTML, PNG captures, PDF — the same export set every project gets.

In the docs

Related features

TemplatesInteractive prototypes with live previewEvery project renders on a real device stage — phone, tablet, desktop — while the agent writes it. A prototype here is running code from the first minute.Read more →TemplatesAI website design generatorThe interactive-website template builds pages that do things — scroll scenes, live data views, small tools — as plain files you can host anywhere.Read more →CodebaseVisual editor for your real codebaseBuild mode is a visual editor for the code you ship: pick an element in your running app, edit it visually, and the change lands in the component's own idiom — verified by a real re-render before it's yours.Read more →

Design with the agent you already have.

Free to try, buy once — the studio and your own coding CLIs do the rest.

Download