Doodles

Design on the dashboard's Tools tab, driven from the terminal: the scene is the source of truth.

A doodle is a Fabric canvas on the dashboard's Tools tab, and the editor toolbar is fully mirrored as CLI verbs: an agent can lay out a screen, sketch a flow, or annotate a design without ever opening a browser, while any human with the editor open watches it redraw live. Elements are addressed by id, frames run real auto-layout (Figma-style flex), and every mutation bumps the scene rev. The doctrine: the API is the contract, the scene is the truth, plm is a thin client over it.

1. Step 1 of 6

   Open a canvas

   One verb, one artboard. The new doodle becomes active so every verb after this can omit the id, exactly like roadmaps and the text files.

   plm doodle new

   $ plm doodle new --name "onboarding sketch" --w 1280 --h 720

   ✓ created "onboarding sketch" · now active

   doodle_7c02e1b4a9

   full form · plm doodle new [--name N --w 1280 --h 720]

2. Step 2 of 6

   Place the pieces

   Eleven roles cover UI sketching: boxes, buttons, inputs, cards, text, shapes, images. Geometry is centre-origin, style flags mirror the inspector (fill, stroke, radius, shadow, gradient, opacity). Every mutation answers with the new rev and the created id.

   plm doodle · add

   $ plm doodle add --role button --x 640 --y 420 --w 220 --h 56 --fill #1f883d --text "Start"

   ✓ rev 2 · 1 element(s)

   el_90ab12f3

   full form · plm doodle add <id> --role <role> [--x --y --w --h] [--fill --stroke --radius …]

3. Step 3 of 6

   Let the frame do the layout

   Frames are real auto-layout, not decoration: flex direction, justify, align, gap, padding, hug-or-fixed sizing. Nest children with plm doodle nest, wrap a selection with wrap, and the engine keeps everything aligned while you keep adding.

   plm doodle · frame

   $ plm doodle frame --mode flex --direction col --gap 16 --padding 24

   ✓ rev 3 · 1 element(s)

   el_f1a0c2d7

   full form · plm doodle frame <id> [--mode flex --direction row|col --justify --align --gap --padding]

4. Step 4 of 6

   Read the scene like an agent

   show is the scene as data: every element with its id, role, geometry, group and frame membership, plus the sticky comments. This is what you read before you move or restyle anything, no browser needed.

   plm doodle show

   $ plm doodle show

   full form · plm doodle show [<id>]

5. Step 5 of 6

   Iterate in place

   Everything the inspector edits, set edits by id: colors, borders, radius, text, fonts, opacity, angle. Combined with move, layer, group, and label, an agent can polish a design it laid out a minute ago.

   plm doodle · set

   $ plm doodle set el_90ab12f3 --fill #0969da --radius 12

   ✓ rev 5 · 1 element(s)

   full form · plm doodle set <id> <el> [any style flag]

6. Step 6 of 6

   Two hands, one canvas

   The live loop works both directions: a human with the editor open sees your verbs land as they happen, and watch streams their edits back to you as rev signals. Add --as <label> to any mutating verb to name and colour your cursor in their editor.

   plm doodle watch

   $ plm doodle watch

   full form · plm doodle watch <id>

Also in this chapter

• Doodles are user-scoped and live on the dashboard's Tools tab; works from any directory, no linked repo.
• Active doodle: after new or use, omit the id on every verb; an explicit doodle_… first argument overrides.
• Add --as <label> to any mutating verb to name and colour this agent's live cursor in a watching editor.
• Offline: mutations queue in .plmhub/queue/ and flush on the next online command.
• Alias: plm ddl.