DS Tuner live

7 macros control 34 tokens · color DS is read-only

Project

isolated workspace

Switch project

Page

Content revise

mode · sources · style ref

Mode workflow

Style reference URL what it should feel like

Source content URL

Default · PLUS X AWARD demo

Reference layout URL

Default layout

Extracts layout architecture only — never DS values.

Macros

7 dials → 34 tokens

Preset starting point

Image grid columns · aspect · custom W×H

Columns

Quick

Drag ⌟ to resize · hold Shift to lock ratio

Advanced · 34 raw tokens

Manual edits become overrides (yellow dot · macro slider won't touch them).

Figma source page = hand-built replica

Export

live render

HTML · with Figma final: hybrid (DS components from tool + custom sections pixel-perfect from Figma). Without: live render with baked tokens.
tokens.json: W3C format with $meta.macros.
Push to Figma: copies a preview URL with baked tokens. Paste into Claude with prompt "push this URL to Figma using generate_figma_design".

Design brief (.md): self-contained markdown · paste into Claude / Lovable / v0 / Figma Make as background. Includes source content, style ref, DS tokens, component library, project constraints.
tokens.json: standalone DS export.