Designer
An agent-driven design tool — chat with a designer agent and watch a live HTML preview update as it builds your output.
Designer is Opisense's agent-driven design surface. You don't drag boxes around — you describe what you want, and a designer agent writes the code, runs it in a sandbox, and shows you the result in a live preview. You iterate by chatting.
It's good for the kinds of design work where the output is "code that renders" — landing pages, decks, prototypes, animations — and where having an agent do the heavy lifting beats opening a blank Figma file.
Open it from Designer in the sidebar, or open /designer directly.
What you can do
- Create a new design — pick a type (Page, Deck, Animation, Prototype, or unspecified) and write a starter prompt
- Chat to iterate — the designer agent picks up your message, writes or updates code, and re-publishes the preview
- Watch a live preview — an iframe shows the latest rendered output of your design
- Attach brand assets — logos, palettes, fonts, and reference URLs that the agent uses to stay on-brand
- Open the preview in a new tab — share or share-screen the design with anyone who has the signed URL
- Maximize / minimize — collapse the chat for a full-pane preview while reviewing
How it works
Under the hood, Designer is a thin shell around an agent and a sandbox:
- You send a message in the chat panel
- The designer agent receives it, with full context about your design and brand assets
- The agent writes code in a sandbox using its tools (writing files, fetching brand context, publishing snapshots)
- A snapshot is published — the static HTML is uploaded to storage and a signed URL is generated
- The preview panel reloads with the new snapshot
Every iteration is a new snapshot. The current state of your design is whatever the most recent snapshot contains. Earlier snapshots are kept for history.
Output types
When you create a design, you pick one:
| Type | Best for |
|---|---|
| Page | Landing pages, mockups, single-page designs |
| Deck | Slide decks (1920×1080), presentations |
| Animation | Motion design, video for social |
| Prototype | iOS / Android app mockups, multi-screen flows |
| I'll just describe it | Skip the type — designer infers from your prompt |
You can change the output type later from the chip in the top bar.
Quick start
Open Designer
Click Designer in the sidebar. The library shows every design in your workspace.
Create a design
Click + New design. Give it a title, pick a type, and optionally add a first message ("Pitch deck for our new pricing — 5 slides, professional, dark theme."). Click Create design.
Send your first message
You land on the editor with a split-pane layout: chat on the left, empty preview on the right. If you didn't include a first message, type one now and send.
Watch the preview
The status indicator switches to Generating and a shimmer overlays the preview. Within ~30 seconds (longer for the first run on a cold sandbox), the iframe loads the rendered design.
Iterate
Send follow-up messages — "make the headline larger", "swap the hero image for something more abstract", "add a fourth slide on pricing". Each one produces a new snapshot.
What's next?
Creating designs
Picking a type, writing a good first prompt, and managing the library.
Chatting with the designer
How to talk to the designer agent and what kinds of requests work well.
Brand assets
Why brand context matters, what to give the agent, and how it uses it.
Preview & iteration
The preview panel, signed URLs, refresh, open-in-new-tab, and maximize.