Design Parameters

The design-params block renders a panel of sliders and colour pickers that drive CSS custom properties in any sibling site-preview iframe via postMessage. Tweaks happen instantly — no agent round-trip required.

When the designer is happy, a "save values" button copies the current state to the clipboard so they can ask the agent to bake the changes into tokens.json.

Spec

```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, "step": 1, "default": 8, "unit": "px" },
    { "id": "scale",   "cssVar": "--text-base",     "type": "number", "min": 12, "max": 22, "default": 16, "unit": "px" }
  ]
}
```

Parameter types

id is the internal handle (used in copy-to-clipboard output). cssVar is the CSS custom property the slider writes to. unit is appended when emitting the value (e.g. 8 → 8px).

How it works

1. The block subscribes to its own value state.
2. On every change, it iterates every iframe with src starting with fabric-design:// and posts:

   { type: "fabric-design:set-vars", vars: { "--color-primary": "#…", "--radius-md": "8px" } }

3. The bridge script inside each iframe (injected automatically by the design protocol handler) listens for that message and applies documentElement.style.setProperty(k, v) for each var.

If multiple site-preview blocks are on the page, every bundle receives the update — fine for the typical "one bundle per turn" case.

Saving values

The "save values" button copies a chat-ready snippet to the clipboard:

Bake these into tokens.json:
- --color-primary = #6f4cff
- --radius-md = 12px

Paste into chat and ask the agent to update sources/fabric-design-system/tokens.json. From the next render onward, every component picks up the new values automatically.

See also

• Design Workflow — the full feature
• site-preview — the iframe these sliders drive