For Designers¶

Doable's Visual Designer lets designers shape real, running UI directly inside the AI chat surface, with no exporting to code, no waiting on a developer, no static mockups. You point, you tweak, you comment, you save. The product behind the prompt updates in real time.

What the Visual Designer is¶

The Visual Designer is a coordinated set of three surfaces that live inside the project editor; there is no separate "design app." Together they give you a Figma-style way of working on real, deployable UI:

Design Panel: the right-hand property editor (text, color, spacing, typography, size, border, layout). It is where you make pixel-level changes.
Visual Edit overlay: a click-to-select layer that runs over the live preview. Click any element on the page to select it; a floating toolbar appears with an "Ask Doable..." prompt, a "Select parent" button, a "View code" jump, and a "Delete element" action.
Design Comments: Figma-style sticky pins that you drop on any spot of the preview canvas. Pins thread, resolve, and sync to every collaborator in real time.

All three run on top of the same live preview as the rest of the product, so your changes are always against a real, working app, not a static frame.

How to open it from AI chat¶

You can open the Visual Designer from two places, both inside a project editor:

The Design tab: in the editor's left activity bar, click the paintbrush (Palette) icon. The right rail switches to the Design Panel.
The visual-edit toggle: at the top of the live preview pane there is a small cursor icon ("Enable visual editing"). Click it to turn the preview into a click-to-select canvas without leaving the chat layout you already have open.

The AI chat panel stays visible the entire time. When you have an element selected, your next chat message is automatically scoped to that element, so a prompt like "make this hero bigger" lands on the right component, not somewhere else.

If you can't see the toggle, your project may be open in a read-only role. Ask a Member or Admin to invite you with an editing role (see Collaboration).

What you can drop in and change¶

Every element you click in the preview becomes a target for the Design Panel. The property editors are grouped by intent:

Text: change the actual words inside the element.
Color: text color and background color.
Spacing: margin and padding for each side independently.
Typography: font size, weight, style, and alignment.
Size: width and height.
Border: width, color, style, and radius.
Layout: flex/grid direction, alignment, justification, gap (only appears when the selected element is a flex or grid container).

These cover the everyday "make it look right" loop. For larger structural changes (adding a new section, swapping a component, generating an image), write the request into the chat or the floating "Ask Doable..." prompt. For a full reference of the kinds of artifacts the chat can produce and embed (images, charts, mini-apps, generated copy, etc.), see the user guide.

Changes apply live to the preview as you tweak. Nothing is committed to the project yet; you decide when to save (see "Three save modes" below).

Inline notes: sticky-pin design comments¶

When you want to leave feedback for a teammate or for the AI, drop a design comment. Comments are pinned to a specific spot on the preview canvas, like Figma:

Enter Design View, then click the Comment button at the top right of the preview to enter placement mode.
Your cursor becomes a crosshair. Click anywhere on the canvas to drop a pin.
A "Leave a comment..." box appears. Type your note and press Comment (or Enter).
A numbered pin appears in that spot, color-matched to your avatar. Click any pin to open its thread.

Inside a thread you can:

Reply: keep the conversation in one place instead of dropping a second pin.
Resolve (the green check): mark the feedback as addressed. Resolved pins are hidden by default; toggle the eye icon to bring them back.
Delete: only your own comments and replies.

Pin positions are stored as percentages of the canvas, so they stay correct when teammates view the preview on desktop, tablet, or mobile widths.

Who sees them: every collaborator in the project sees the same pins in real time. Comments are scoped to the project, not to a private layer.

Threading availability: reply threads are available on every pin out of the box. If a workspace admin has constrained collaboration features for your role, you may not be able to reply or resolve. Check Workspace Settings → Collaboration if anything looks missing.

Multi-cursor presence¶

When more than one person is in the same project, you see them on the canvas the same way you'd see them in Figma. Edits are conflict-free by design: no "someone else is editing" modal, no locks to release.

You'll see:

Remote cursors: each teammate's cursor moves on the canvas, labeled with their name and a unique color.
Selection overlays: colored outlines show which element each person currently has selected.
Soft element locking: if a teammate has an element selected, you see their outline and a small "in use" hint, so two designers don't fight over the same component at the same time.
Live style changes: when a teammate adjusts padding or color in the Design Panel, the change appears on your preview as they move the slider.
Presence avatars: the top of the editor shows everyone currently in the project.

Network drops are seamless. If you go offline, you keep editing locally; when the connection comes back, your edits sync.

Team chat: distinct from AI chat¶

There are three chat-like surfaces in a Doable project, and it helps to keep them straight:

AI chat: what you say to Doable. The AI reads, plans, and changes the app.
Design comments: pinned to a spot on the canvas. Human-to-human feedback tied to a specific element or area.
Team chat: a free-form channel for everyone in the project, like a small Slack thread that lives with the file.

Open Team chat by clicking the online users pill in the editor header. It supports @mentions, typing indicators, and persisted history (you'll see what was said before you joined). Use it for "I'm jumping into the hero" or "what do we think of the new spacing", anything that isn't tied to a specific pixel.

Three save modes¶

Style changes you make in the Design Panel are live but uncommitted: the preview reflects them immediately, but the project's source is unchanged until you say so. The Design Panel shows a sticky "Unsaved changes" bar with three buttons:

Discard: drop everything and revert the element to its original styles. Use this when you've explored a direction and decided not to keep it.
Save: write the resulting CSS straight back into the project's source as raw style values. This is the fast, deterministic, "do exactly what I see" mode. No AI involvement, no token cost, instant.
AI Save: send the diff to the AI with a Sparkles button. The AI applies the change semantically, using your design system's tokens, your existing Tailwind classes, or your component props instead of inline overrides. This produces cleaner code that future changes can build on, but it does spend AI tokens.

Pick the right one for the situation:

Quick visual tweak you'll polish later: Save.
A change that should match the rest of the design system: AI Save.
A direction you explored but don't want to keep: Discard.

AI-assisted design changes¶

The fastest way to make a design change is often to point and ask. With an element selected, the floating "Ask Doable..." prompt sends a natural-language request scoped to that element. For example:

"Make this hero bigger and center the headline."
"Use our brand purple here instead of the default blue."
"Tighten the spacing between these two cards."
"Replace this stock image with something more relevant."

The AI sees which element you have selected, applies the change, and streams the result back into the preview. Because your selection is the scope, you don't have to describe which hero or which cards. Just say what you want.

You can also pin a design comment that the AI reads as feedback. See Handoff to Dev for the comment-to-AI flow in full.

A real-time session walkthrough¶

Here is what a typical multi-designer session looks like end-to-end. Two designers (Alex and Sam) and a developer (Devi) are in the same project, working on the landing page.

Alex opens the project and switches to Design View by clicking the paintbrush icon. The preview loads with the visual-edit overlay active.
Sam joins. Alex sees Sam's presence avatar appear in the header and Sam's cursor on the canvas. Sam clicks the hero, and a colored outline appears around it on Alex's screen too, with Sam's name on the label.
Devi joins. All three names are now in the presence bar. Devi opens the Team chat from the online-users pill and writes "I'll watch the layout panel while you two play with the hero, ping me before AI Save."
Alex drops a design comment on the hero subtitle: "This feels small, maybe step it up one size?" The pin appears with Alex's color and a 1 badge. Sam sees it instantly.
Sam replies in the thread: "Agreed. Let me try." Alex sees the reply pop into the same thread.
Sam selects the subtitle and uses the Design Panel → Typography editor to bump the font size. The preview updates live for everyone. Alex sees the new size on their preview as Sam moves the slider.
Alex tries an AI-assisted change on the CTA: selects the button, types into the floating "Ask Doable..." prompt: "use our brand orange and add a subtle shadow." The AI applies the change. The preview updates for all three of them.
Sam resolves the comment by clicking the green check on their reply.
Devi pings the Team chat: "Both changes look good, go ahead and save."
Alex hits AI Save on the CTA change so the orange uses the design-system token. Sam hits Save on the typography tweak: a fast, deterministic write to source.
Devi sees the resulting code appear in their code view (Yjs syncs live), reviews it, and gives a thumbs up in Team chat.

That's the full loop: live preview, scoped comments, AI-assisted edits, two save modes, and three people moving together without stepping on each other.

For the developer side of the handoff, see Handoff to Dev.