Designer Tour

The Designer is Circuitry's design surface — the right interface for logos, app designs, and web designs — and a key bridge in guiding AI to build products with decent graphics. Draw a screen the way you'd sketch it on paper, structure it into a real layout, read the page it produces, and preview the result — all inside one document. Multi-screen artboards hold a whole product's worth of designs side by side; layers keep every screen editable; and four modes carry a single design from first ink stroke to live, interactive page.

And it closes one of vibe coding's real gaps: graphics quality. A coding agent can build your app, but its artwork is limited. Here the whole asset pipeline lives on one canvas:

1. Design from scratch with real vector tools — or have AI generate the image from a rough sketch or a plain prompt.
2. Refine it with the built-in tools — remove the background, convert it to clean SVG.
3. Select it and tell the AI to implement it in your project: "change the app to use this logo." The asset lands in your project, and the selection-aware conversation wires it in.

And the same document works at the code level. Ask your coding assistant to generate a page and it lands on the canvas as a real, editable design. Double-click any HTML object and its editor opens — the element's source highlighted and ready to edit, with tabs for the code, its CSS, and style properties — or restyle it by dragging elements in from the palette:

Four modes, one design

The centre of the top toolbar is the mode switcher — a segment control that changes what the whole canvas is for (it collapses to icons only when the window is narrow):

• Design — Design draws and edits. The full drawing toolset is live: pens, shapes, fill, text, icons.
• Layout — Layout adds structure to your freeform vector design — think of it as a slice mode. Mark out the rows, columns, and regions so the page generates its rows, cols, and divs correctly.
• HTML — HTML decides what each slice becomes in the final page: real HTML, an image, or SVG.
• Preview — Preview shows the result — the generated page, live and interactive, with the toolbar out of the way.

A tour of the controls

Shortcuts below use Cmd — that's Ctrl on Windows and Linux.

Top toolbar

• Add new screen — opens the New Screen dialog; the new screen arrives centred and fitted in the viewport.
• Undo / Redo — step the design history backwards and forwards. ⌘Z / ⌘⇧Z
• Export as vectors — opens the export dialog set to SVG, ready to write scalable vector files. See Exporting your work.
• / Light / dark panels — flips the Designer's own panels and chrome between light and dark, independent of the rest of the studio.
• Save — saves the design; the button tints amber while there are unsaved changes. ⌘S
• Full screen — enters focus mode, hiding the app header and tabs; this toolbar stays with you in full screen, and the same button () brings the chrome back. ⌘⇧⏎

Screens, Layers, Style — the right dock

A floating tab strip at the top right switches the panel stack:

• Screens — the list of screens in this design. Select one to work on it.
• Layers — the layer stack for the selected screen (pick a screen first — the tab stays disabled until you do).
• Style — style and effects for the current selection. Thickness, stroke and fill colour, opacity, corner radius, Line Style (dashes, ends and corners), arrowheads, shadow, glow, blur, 3D and typography all live here, with a Presets strip underneath that saves a whole look and re-applies it to any selection. The tab opens with nothing selected too, so the presets are always reachable — full tour in The Style Panel.
• Hide panel — collapses the whole dock; a slim Show panel tab stays pinned to the edge to bring it back.
• Show elements panel — in Layout and HTML modes, re-expands the collapsed element tree.

The left tool rail

Every drawing tool lives on the rail at the left edge of the canvas — in the Designer it usually appears as a two-column grid, the full kit laid out at once (a compact single column is available via the layout button at the rail's foot). Buttons with a small corner triangle hold a flyout of variants — press and hold, right-click, double-click, or tap the tool while it's already active to open it; a plain tap just switches tools.

Pointers and selection

• Object Pointer — select and move whole objects.
• Vertex Pointer — edit the individual vertices of strokes and shapes.
• HTML Pointer — interact with converted HTML content directly on the canvas.
• Rectangle Select — drag a marquee around what you want.
• Lasso Select — circle it freehand instead; its flyout also holds Brush Select for painting a selection.
• Hand — pan the canvas (highlights amber while you hold Cmd/Ctrl for a temporary pan). Holding the middle mouse button pans too, from any tool.

Drawing

• Pen — pressure- and speed-responsive freehand ink.
• Marker — a constant-width felt tip.
• Highlighter — wide translucent strokes.
• Smooth — redraws a wobbly stroke as a clean curve.
• Shape Recognizer — freehand strokes snap to the shape you meant.
• Write (a typewriter-key glyph) — the handwriting pen: ink becomes editable text.
• Rectangle — hold Shift for a square; its flyout has a from-centre variant.
• Circle — with a from-centre variant in its flyout.
• Polygon (a segmented-line glyph) — straight segments with square vertex handles.
• Eraser — remove strokes.

Content and colour

• Text — place text on the canvas.
• Icons — stamp icons; selecting it opens the icon picker in the sidebar.
• Fill — flyout: No Fill, Solid Fill (a Fill Color panel with preset swatches, a custom colour, and an opacity slider), and Gradient Fill (the gradient editor).
• AI Generate — drag out an area and describe what you want; it generates an image or HTML from your brief right into that spot. (Converting an existing selection to an image is the Sketch to AI button on the selection toolbar.)
• Replicator / Spiral / Gear — a shared creative slot showing whichever you used last: Replicator repeats a selection in patterns, Spiral draws a spiral — an ideal ready-made path for text-on-path effects, Gear generates gear shapes. Long-press to switch; each opens its own panel in the sidebar.
• Size (a dot that grows with your stroke width) — opens the thickness slider with a live preview and type-in value; applies to selected strokes when there's a selection.
• Color (a swatch in your current ink colour) — nine presets plus a custom colour input; applies to selected strokes when there's a selection.

Board and housekeeping

• Ruler — a straight edge to draw along: pen strokes ride its edge for perfectly straight lines and perspective work.
• Paper — one tap toggles the paper background; hold or double-tap for options: Lined , Grid , Squared , line spacing (S / M / L), paper background colour, and line colour.
• Undo / Redo.
• Lock drawings — freeze the ink so stray touches can't move it.
• Clear all drawings — asks for confirmation, then clears every stroke on the canvas.
• Fewer tools — folds the grid down to the compact column (and back via ).

The pen tray

In Design mode a tray of pictorial drawing implements sits tucked at the bottom edge of the canvas — just the nibs peek up. Hover over it, or swipe it upward, and it rises. Each implement remembers its own ink colour and size, so switching pens switches your whole setup. Tap the active implement a second time to open its presets shelf.

• Pointer — select and move objects without leaving the tray. Shelf: Object (whole objects) or Vertex (a shape's anchor points). In Vertex mode, right-click a point to make it a sharp corner or a smooth curve, or right-click one of its handles to retract just that side.
• Pen — freehand ink with pressure- and speed-sensitive line width.
• Path — a technical drafting pen for exact outlines. Click to place a corner point, or press and drag as you place it to bend the line running into it (⇧ locks the curve to neat angles). The next line stays straight unless you drag again. Click the first point to close the shape, or double-click (or Esc) to finish it open. Points snap to nearby edges, corners, guides, and to the path you're drawing; the finished path stays editable point by point with the Pointer in Vertex mode.
• Pencil — a graphite preset of the pen: soft grey, natural width variation.
• Ballpoint — constant-width ink in ballpoint blue.
• Marker — a felt tip: constant width, gently translucent.
• Highlighter — wide translucent strokes; overlapping passes build up like real highlighter.
• Shape — freehand strokes snap to recognised shapes. Shelf: Auto, Rect, Oval, Circle, Poly.
• Write — handwriting becomes editable text. Shelf: Auto OCR (write by hand, it converts when you pause) or Type (a text cursor where you tap).
• Eraser — removes whole strokes with a touch.
• Arrow — drag a straight connector; the shelf offers eight end caps, from a bare line to arrowheads, dots, diamonds, and bars.
• Select — selection as an implement; shelf: Lasso, Rect, Brush.

Every implement answers to a single letter, clustered under the left hand so you can change tools without letting go of the mouse (hover an implement to see its key):

Press the key of the implement already in your hand and its shelf pops up with the next mode already chosen — keep pressing to walk the shelf, and it tucks itself away a moment after you stop.

The top-centre capsule

While you draw, a floating capsule at the top centre shows the properties that matter for the tool in your hand (it slides aside to clear the rulers and other toolbars):

• Colour — a round swatch in your current ink; opens a popover of twelve curated colours plus a custom picker.
• Size — a slider with a live nib preview for quick width tweaks.
• Opacity — appears for the marker and highlighter.
• Font — for the text tool and the Write pen: recent fonts, curated presets each previewed in its own face, and a More fonts… row that opens the full catalogue. The text tool adds a − / + size stepper.
• Snap — vertex snapping while you edit stroke vertices or draw fixed shapes; green when on.

Bottom-left: zoom

• Zoom In / Zoom Out — zoom about the viewport centre.
• 1:1 — a text button that jumps to exactly 100%; with a screen selected it centres that screen at true pixel size.

The selection toolbar

Pick up the Object Pointer, click an object — or marquee several — and a row of round buttons appears above the canvas. It carries the same actions as the right-click menu, within reach of a finger or a Pencil, and it changes with what you selected:

• Copy, Copy as Image, Paste (only when the clipboard holds something), Duplicate, Clip+ to save the selection to your clip library, Lock, and Delete.
• SVG — download just these objects as a vector file, cropped to their own edges.
• Z-Order for stacking, and a bold G to group or ungroup two or more objects.
• Combine (Boolean) — the boolean / pathfinder operations on two or more objects: Unite, Subtract Front, Subtract Back, Intersect, Exclude Overlap, Divide. Unlike Group, these replace your objects with one new editable shape (holes and all). See Combining shapes.
• Edit → Convert Text to Paths turns a text object into editable letter shapes (Create Outlines), counters kept as real holes — for when you want to reshape the letters themselves. See Turning text into shapes.
• Mask (Clip) — clip one object to the shape of another: put an oval over a picture, mark the oval with Use as Mask, select both, and press Mask. Nothing is cut away — Release Mask gives both pieces back untouched. See Masking one shape with another.
• Vision on-device image edits, OCR to turn handwriting into editable text, Sketch to AI, 2vec to trace a picture into vectors, and Explode to break a vector image or icon into editable shapes.
• More opens the full right-click menu just below the row.

Selecting an HTML component in HTML mode swaps the row for component actions. The complete catalogue is in The Selection Toolbar.

Exact sizes and positions

Handles are for eyeballing; Edit → Transform… is for numbers. It opens a small floating panel with X, Y, W, H and a rotation field for the current selection. Type a value and the artwork updates as you type — nothing dims or blurs the canvas, and the panel drags by its title bar so it needn't sit on top of what you're editing. The link button between W and H keeps the proportions, and the rotation field turns the selection by that many degrees around its own centre. Positions are measured from the top-left corner of the screen you're working on, so the same number means the same place on every screen.

Keyboard

Right-click any selection on the canvas for the full edit menu, with its own shortcuts alongside each action:

The same menu is where a design starts becoming a page: Convert to HTML, Convert to SVG, and Convert to Image turn selected strokes into real content, and Edit Strokes brings converted content back to editable ink.

Exporting your work

Three routes out, depending on what you want:

Whole screens — File → Export Screens… (⌘⇧E), or the button in the top toolbar, which opens the same dialog already set to SVG. Pick the current screen, every screen, or a hand-picked set; then a format:

Export more than one screen and you get a ZIP of the individual files. Everything can go to your downloads, to a connected Circuitry Server, or straight to a folder on this computer.

A screen to the clipboard — with nothing selected, Edit → Copy as Image (⌘⇧C) copies the whole current screen as a picture, ready to paste into a message, a document, or a chat. It captures the screen as you see it — drawn artwork and HTML sections together. Select objects first and the same command copies just those instead.

Just the selection — select some objects and press SVG in the toolbar above the canvas. You get a vector file cropped to exactly those objects, with nothing else in it — handy for handing one logo or icon to someone.

What SVG carries. Shapes export as true shapes (a circle stays a circle), pen and brush strokes export as their drawn outline so pressure and taper survive, gradients and shadows come across, pictures are embedded so the file stands alone, and text stays live text. Two things to know: 3D-extruded objects export as their flat outline, because vector files have no notion of depth — and text needs the font installed wherever you open it, so run Convert to Outlines first if you want type to look identical everywhere. Anything with no outline to trace is left out and the app tells you how many.

Works with the rest of the studio

The Designer is one surface of Circuitry, and its output feeds everything else:

• The Designer — the deeper guide to screens, layers, and modes.
• Web Design — taking a design all the way to a working web page.
• Sketch to Diagram — how ink becomes structured objects everywhere in the studio.
• The Smart Whiteboard — the free-form thinking canvas next door; the same pens live there too.
• Sharing & Live Collaboration — share a design with a link or design together live.