Design Workflow

Fabric Agents ships a built-in design workflow that mirrors the loop tools like Figma Make and Claude Design popularised — describe what you want, see it live, drop pins on the bits you don't like, share with reviewers, iterate. Everything runs inside the desktop app; the only network round-trip is when you publish.

What you can do

How sessions opt into design mode

There's no manual switch — it's automatic and reversible.

• First time the agent emits a site-preview block, the session's mode flips to 'design'. A small purple dot appears next to the session name in the sidebar.
• Manual override: right-click any session → Workflow mode → Design / Code / Mixed / Auto.
• Why this matters for tokens: see Workflow Mode for the full breakdown — 'code' mode drops ~600 tokens of design-related docs from the system prompt every turn.

The design loop

graph LR
  Brief[You: brief in chat] --> Build[Agent: build bundle]
  Build --> Preview[Live preview]
  Preview --> Iter{Iterate?}
  Iter -->|Comment pin| ChatBack[Pin → chat → agent edits]
  Iter -->|Slider tweak| Vars[CSS vars update live]
  Iter -->|Done| Publish[Publish button]
  Publish --> URL[https://agents.fabric.pro/d/<id>/]
  URL --> Reviewers[Reviewers leave pins]
  Reviewers --> Sync[Auto-sync back into chat as amber pins]
  Sync --> ChatBack
  ChatBack --> Build

What the agent emits

For comparison/spec tables, the agent uses the existing datatable / spreadsheet blocks like any other workflow.

The site-preview block in detail

The header has six controls. From left to right:

[ ⊕ navigator ]  [ Comment ]  [ Publish / Live ]  [ ↗ ]  [ ⛶ ]  [ + ]

• Navigator (only shown when there are multiple items) lets you tab between design directions.
• Comment toggles "comment mode": cursor becomes a crosshair, hovered element gets an outline, click to drop a pin (a popover opens with a textarea). See site-preview.mdx.
• Publish packs the bundle, POSTs to the Fabric Cloudflare worker, returns a public URL. After publish, this button turns into a green 🟢 Live chip that opens the public URL.
• ↗ opens the local file:// URL in your default external browser (real Chrome/Firefox/Safari) for cross-browser checks.
• ⛶ opens a fullscreen overlay. Esc to exit.
• + / − stretches the inline iframe taller / collapses it.

Below the iframe — once you've left a comment or pulled comments from reviewers — a stacked comment panel lists every pin with selector, captured text, and quick actions (→ chat, ×). Click any pin or row to highlight it.

Brand consistency: the design-system source

fabric-design-system ships pre-installed in every workspace. It carries:

• tokens.json — the active brand's colours, type scale, spacing, radii, shadows. Edit once, every component re-renders.
• 9 Mustache templates — page (HTML shell), hero, card, button, nav, footer, slide, pitch-deck, email.

Templates are rendered via the existing render_template tool. Add your own templates by dropping .html files into ~/.fabric-agent/workspaces/<id>/sources/fabric-design-system/templates/.

Iteration affordances

Inline comment pins

Click Comment in the header. The cursor becomes a crosshair. Click any element. A popover opens anchored to the click:

┌─────────────────────────────────┐
│ on .hero h1 — "Welcome to..."   │
│ ┌─────────────────────────────┐ │
│ │ What would you change?      │ │
│ │ make this bolder and warmer │ │
│ └─────────────────────────────┘ │
│            [ Cancel ] [ Save pin ]│
└─────────────────────────────────┘

Type your feedback, hit Save pin (or ⌘/Ctrl+Enter). A numbered pin appears at the click location. The note is also copied to the clipboard formatted as a chat-ready quote. → chat on the panel row pastes it without you needing to retype.

Pins use distinct colours so you can tell who said what:

Live parameter sliders

Ask the agent to add a design-params block:

```design-params
{
  "title": "Brand tweaks",
  "params": [
    { "id": "primary", "cssVar": "--color-primary", "type": "color",  "default": "#7c5cff" },
    { "id": "radius",  "cssVar": "--radius-md",     "type": "number", "min": 0, "max": 24, "default": 8, "unit": "px" }
  ]
}
```

Drag the slider — the iframe updates instantly with no agent activity. Click "save values" to copy a chat-ready snippet you can paste with "bake these into tokens.json".

Mode-aware system prompt

If you mark a session as 'code' (right-click → Workflow mode → Code), the design-related docs disappear from the system prompt — saves ~600 tokens per turn. The agent can no longer fluently emit site-preview blocks, which is exactly what you want for pure backend work. Flip back to Mixed or Design at any time. See Workflow Mode.

Publish + collaborative review

Click Publish. After ~1–3 seconds:

• A green 🟢 Live chip replaces the Publish button.
• The public URL is auto-copied to your clipboard.
• A green banner shows the URL with an open action.

Send the URL to reviewers. They open it in any browser (no login, no account):

┌──────────────────────────────────┐
│  [Your design renders here]      │
│                                  │
│                          [💬 Comment]
└──────────────────────────────────┘

They click 💬 Comment, click any element, type a note, hit Send. Their comment becomes a numbered pin on the live page that everyone sees on next poll.

Back in the desktop app, the site-preview block auto-polls /d/api/<id>/comments every 30 seconds. New reviewer pins appear in amber on your local preview and in the side panel. → chat on each one pastes a quote you can extend.

Limits: 25 MiB max bundle size, 30-day max TTL, 4 KB per comment, 256 KB per bundle (≈ 64 typical comments). See Share Links & Design Publishing.

Export for hand-off

When you're done iterating, ask the agent to export:

"Export this design as a zip" → dataPath/exports/<name>.zip (always works)

"Export this design as html-folder" → directory copy at dataPath/exports/<name>/

"Export this design as a PDF" → printable PDF (requires Chromium on PATH)

"Export this design as PPTX" → slide deck (requires Chromium + the bundled pptx-tool CLI; expects slide-1.html, slide-2.html, … in the bundle root)

Performance footprint

The whole feature is dormant when not in use:

• The site-preview, design-params blocks only mount when the agent emits one.
• The fabric-design:// protocol handler is event-driven; zero overhead when no preview exists.
• First-launch seed copies ~28 KB of skill + design-system templates from the app bundle into the workspace. Every subsequent launch: < 5 ms.
• Sessions explicitly tagged 'code' save ~600 tokens per turn vs. the default — measurable cost reduction for backend-only sessions.

Security model

See also

• Site Preview Block — full reference for the rendering block
• Design Parameters — slider block reference
• Workflow Mode — design/code/mixed semantics + token budget
• Share Links & Design Publishing — /s/ and /d/ endpoints
• Skills — how the design skill loads and how to author your own