How do I install Design Os Studio?

Copy the stdio config for Cursor, Claude Desktop, Claude Code, or VS Code on this page. It uses the publisher's install, not a PlugMCP proxy.

Does Design Os Studio need an API key?

No required environment variable is listed on this record.

What transport does Design Os Studio use?

Design Os Studio runs locally over stdio.

Design Os Studio MCP server

Q: When was Design Os Studio last checked?

Last checked 2026-10-27. DESIGN:OS Studio — Native GPU-accelerated interface design & Figma engine built in Rust

DESIGN:OS Studio (`design-os-studio`)

Native GPU-accelerated interface design studio in Rust. It opens and saves Figma .fig files, runs your own coding agent CLI in an Agents panel on the open file, and ships a Model Context Protocol server.

Open Figma `.fig` files, edit them and save them back. Studio draws the canvas on the GPU with `wgpu` (Metal, DirectX 12 or Vulkan). The Agents panel runs Claude Code, Codex, Grok, Antigravity or Gemini CLI as a live session on the open file with your own sign-in, so Studio needs no API key. Work with variables and modes, select matching layers with Multi-Edit (`Q`), read Dev Mode code in eight languages (CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML), and capture headless screenshots from a terminal or CI.

Why this exists

Why DESIGN:OS Studio?

Browser-based design tools keep your files on a vendor's servers and give coding agents little more than a REST export. design-os-studio is a local-first studio written in Rust. It reads and writes .fig files on your disk, runs your own agent CLI in an Agents panel, and serves the open file to agents through a local MCP server.

Dimension	DESIGN:OS Studio	How to check
Rendering	Native Rust canvas: `wgpu` on Metal, DirectX 12 or Vulkan, with a `tiny-skia` CPU renderer for headless captures. It requests no repaint while the view is idle (`FrameKey` frame reuse).	Open a file, leave it still, and read the process CPU time twice with `ps -o time= -p <pid>`.
Large files	A spatial index of 2048-unit grid cells (`SceneIndex`) limits work to the viewport, and repeated shapes share one mesh (`GeomCache`). The 336 MB Untitled UI PRO kit opens as one document of 207,601 nodes.	`designos <file> --inspect-json` prints the node count.
`.fig` files	Reads `.fig` containers (`fig-kiwi`, `DEFLATE` or `Zstd`) and writes container version 106, in a ZIP with `meta.json` and `images/`. Known issue in 0.6.0: saving a `.fig` drops numbered-list formatting and writes inherited or variable-bound paints on instances as fixed values.	Export a file, then read the version from the `canvas.fig` header (see below).
Agents	The Agents panel starts your own agent CLI (Claude Code, Codex, Grok, Antigravity or Gemini CLI) as a live session on the open file, and keeps a file's sessions across restarts. Each CLI uses its own sign-in, so Studio needs no API key.	`designos-studio <file> --panel agents`
MCP server	`designos-mcp` serves its tools over stdio: see the design, read its design system, write in one step (`designos_apply_batch`) and lint the result (`designos_lint`).	Send `tools/list` to `designos-mcp --workspace <dir>`. The tool table below is generated from that list.
Variables	Color, number, string and boolean variables in collections with modes. A frame can pin its own mode per collection, and modes round-trip through `.fig`. Import and export Figma JSON and W3C Design Tokens (DTCG).	`designos <file> --export-variables <out>`
Dev Mode	Built-in Dev Mode (`Shift+D`) with code in CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML.	`designos <file> --select <layer> --codegen react`
Privacy and license	No telemetry. Studio makes these network requests: open-licensed font downloads from the Fontsource API when a file uses fonts you do not have, a public status-page check after an agent provider error, a connection check when you click Retry connection, and a plugin download from GitHub when you install a plugin. The agent CLIs you start use the network under their own terms. Source-available under `PolyForm Shield 1.0.0`.	`git grep -n 'ureq::' -- crates` lists the HTTP calls. The Figma REST client in `designos-fig` is a cargo feature that is off by default.

To read the container version of an exported file, run unzip -p out.fig canvas.fig | head -c 12 | xxd. The header starts with fig-kiwi and ends with 6a00 0000, which is 106 in little-endian.

Where hosted tools win, and it is not close: real-time multiplayer with live cursors, enterprise cloud administration with SSO and SCIM, and hosted comment notifications by email or Slack. Studio has none of these. If your workflow needs real-time cloud multiplayer without local file ownership, use Figma (paired with our live bridge design-os-figma-plugin) or a hosted Penpot instance instead.

Facts Register

Instrument Field	Specification	Verification / Notes
Repository	`jangtrinh/design-os-studio`	Cargo workspace, `crates/designos-*`. Four binaries ship: `designos-studio`, `designos`, `designos-mcp`, `designos-diff`
Engine Stack	Rust + `wgpu` + `tiny-skia`	Metal (verified on macOS) · Direct3D 12 / Vulkan (Windows and Linux, not verified before release) · No Electron
Figma Interop	Reads `.fig`; writes container version 106	`crates/designos-fig` round-trip tests · more than `6,000` automated tests pass in the macOS CI job · known issue #834
Agent Surface	Agents panel + `designos-mcp`	`Claude Code` · `Codex` · `Grok` · `Antigravity` · `Gemini CLI`, each with its own sign-in
Telemetry / Network	No telemetry	Network use: font downloads from the Fontsource API for fonts a file needs, a status-page check after an agent provider error, a connection check when you click Retry connection, plugin downloads you start from GitHub, and the agent CLIs you start
License	`PolyForm Shield 1.0.0` (source-available)	Release packages: macOS `.dmg` (verified), Windows `.zip`, Linux `.deb` and `.tar.gz` (built, not verified before release)

Quickstart

1. Install once

Install the agent skill plugin in Claude Code, copy the skill into Codex, download a release package (.dmg, .zip, .deb, .tar.gz), or build the four binaries from source:

# Option A: Claude Code plugin marketplace
/plugin marketplace add jangtrinh/design-os-studio
/plugin install design-os-studio@design-os-studio

# Option B: Clone and launch the native Rust/wgpu Studio (or package a .dmg / .zip / .deb)
git clone https://github.com/jangtrinh/design-os-studio
cd design-os-studio
cargo run --release -p designos-app --bin designos-studio
./scripts/build-release.sh <version> --local-host

2. First Safe Use & The Practical Loop

First safe use (three bounded, non-destructive steps):

Run the deterministic offline repository, crate, and skill self-check:
```
python3 scripts/self_check.py
```
Apply a declarative NodeSpec JSON to a document and export it as a Figma .fig file (container version 106). app.designos is created if it does not exist:
```
designos app.designos --apply-spec examples/specs/easeui-agent-console.spec.json
designos app.designos --export-fig out.fig
```
--export-fig writes only to a path that ends in .fig and does not exist yet. Re-running it needs --overwrite, which replaces an existing regular file; a symbolic link is never written through.

Render the file on the CPU and on the GPU, then compare the two PNGs. designos-diff prints the SSIM score and exits 0 while the mismatch ratio stays under the threshold:

designos-studio out.fig --size 1600x1000 --no-toast --screenshot cpu.png
designos-studio out.fig --gpu --size 1600x1000 --no-toast --screenshot gpu.png
designos-diff compare cpu.png gpu.png --tolerance 8 --threshold 0.02 --out diff.png

The Practical Agentic Loop:

Lifecycle Verb / Flag	Role in the Loop
`--panel variables`	Opens the Variables view: collections, modes and alias bindings.
`--panel agents`	Opens the Agents panel: pick an agent CLI, resume the file's last session, or start from a sample prompt.
`--apply-spec / --export-fig`	Compiles declarative JSON specs through Auto-Layout 5.0, then writes a `.fig` file (container version 106).
`--screenshot / designos-diff`	Renders a headless frame, on the GPU with `--gpu`, and compares two PNGs.

3. Ask in plain English (or invoke the Agent CLI directly)

Open your project in your AI coding agent (or in the Studio's Agents panel) and describe the outcome you need:

"Apply examples/specs/easeui-agent-console.spec.json to a new document, export it to out.fig, and capture a 1600x1000 GPU screenshot."

"List the open comment threads, make the change each one asks for, and resolve the thread."

"Lint the open page with designos_lint, apply the safe fixes, and list what is left."

"Generate React, Tailwind and SwiftUI code for the selected frame, then compare a before and after screenshot with designos-diff."

What's new

Notes for every release are in the CHANGELOG. The newest is 0.6.1, a short list. v0.6.0 has captures from the release build, and older releases are short lists.

0.6.1

Agents panel. The bottom terminal dock and the >_ rail button are gone. Cmd+` (Ctrl+` on Windows and Linux) opens and closes the Agents panel. Agents ask before acting by default.
Unsaved edits. Studio asks Save changes to {name}? before a close, a quit or an open drops edits to a file outside the library, and asks before a file changed on disk replaces them. On macOS, Cmd+Q asks too. An agent that opens another document no longer replaces yours.
Undo. Undo and redo of your own edits restore the document exactly. The command palette's design fix and its Figma AI rows are one undo step each. After a font face arrives, and for an agent's edits, undo solves layout again.
Paste and drop. Paste text and images from other apps, and drop PNG, JPEG or WebP files on the canvas. Pasting a main component in its own file makes an instance.
.fig files. Export never replaces an existing file and says where it wrote. designos --export-fig refuses a path that does not end in .fig and a symbolic link, and needs --overwrite to replace a file. A save or export to .fig or .pen warns when it leaves comments out.
Slow machines. Draw, move, resize and rotate end where the pointer let go. A software renderer starts on the CPU canvas.
CLI. designos --version prints the version, and a file argument that is not on disk stops with an error.

0.6.0

Real screenshots from the v0.6.0 macOS build, captured headlessly with designos-studio --screenshot (2x) on a copy of the Untitled UI PRO v8.0 Figma kit, by Untitled UI. Click an image for full size. The approval card comes from the built-in --panel agents-approval-queued preview.

Also in 0.6.0

Agents panel. A file keeps its sessions after a restart. Review what an agent changed in a turn and keep it or revert it in one undo step. Stop one agent or all of them from the panel.
Variables. Import and export Figma JSON and W3C Design Tokens (DTCG) from the Variables menu, or with --import-variables and --export-variables. An import merges into the file and reports what it skipped.
MCP. Agents can see the design, read its design system, write in one step with designos_apply_batch and check their work with designos_lint.
Dev Mode. HTML joins CSS, Tailwind, React, SwiftUI, UIKit, Compose and Android XML.
License. Studio is source-available under PolyForm Shield 1.0.0. Releases up to 0.5.0 keep MIT or Apache-2.0.

0.5.0

Slots. Create a slot on a component and set its rules: minimum and maximum children, preferred components, stretch on insert and show empty. Edit slot content in an instance without detaching it.
Empty slots. An empty slot shows a + that opens the preferred-instance picker. Migrate to slot turns an instance-swap or boolean region into a slot in one undo step.
Dev Mode. Code for React, Tailwind, SwiftUI and Compose gets one parameter per slot. The component playground lets you try properties and variants without editing the file.
Check designs. It flags hard-coded numbers that match a number variable, suggests variables and styles from enabled libraries, and audits text and overrides inside instances.
.fig files. Export follows Figma's own field numbering, types and enum values, and slot preferred values are written as Figma's real object.
Agent tabs. Antigravity and Grok tabs start again, and a tab that fails to start shows the cause.

0.4.0

Grid auto layout. More than 8 rows and columns, auto-placed items and auto rows, and children aligned inside their cell. Edit tracks on the canvas or in the Properties panel: insert, delete, resize and drag to reorder.
Auto layout. Child margins from .fig files, per-child align-self, and an Update auto layout action that upgrades an older frame.
Layout guides match Figma. Alignment, a fixed column or row width, auto count, and show or hide per guide. All of it round-trips through .fig.
Check designs. A panel that audits the page for low contrast, unbound colors, detached styles and detached instances, with a one-click Fix per finding and Fix all.
Vectors and export. Offset path, and scale for several selected points. PDF export draws vectors with selectable text. Lossless WebP export.
Dev Mode. Grid code for CSS, Tailwind and React is printed from the real tracks and placement.

0.3.0

Paste from Figma. Copy a selection in Figma desktop and press Cmd+V on the canvas. The layers land centered in the view as one undo step, images included.
Effect and grid styles. Create, apply, detach and rename them. Edit a style from the picker and every layer that uses it updates in one undo step. .fig files bring their effect and grid styles.
Auto layout and text. Space around and Space evenly, vertical wrap, and the text wrap modes Balance and Pretty.
Variables. Bind paint and effect opacity to number variables. Variables keep their Web, Android and iOS code syntax.
Dev Mode. UIKit and Android XML join the code languages, and a variable prints the way Figma does.
PDF export. Selected frames export as one multi-page PDF from the Export panel.

What it makes

Studio compiles every document through one scene graph (SceneCompiler + GeomCache), writes .fig files, and captures headless frames (--screenshot and designos-diff).

Screenshots below are headless captures from the v0.6.0 macOS build on a copy of the Untitled UI PRO v8.0 Figma kit, by Untitled UI. Each caption shows the command that made it, with the kit as untitled-ui-kit.fig.

Pillar 1 — Agents panel (`Claude Code` · `Codex` · `Grok` · `Antigravity` · `Gemini CLI`)

The Agents panel (RailItem::Agents) starts your own agent CLI (claude, codex, grok, agy, gemini, or a command you add) as a live session on the open file, in a real portable-pty + vt100 terminal tab (crates/designos-app/src/terminal.rs). Opening the panel resumes the file's last session, and a file keeps its sessions after a restart. The composer sends into the tab's live session. A chip hands the current selection to the agent, @ mentions a layer, page, component, variable or style, and each turn ends with a receipt. Review what an agent changed and keep it or revert it in one undo step, or stop one agent or all of them. Agents read and change the file through the local designos-mcp server. Agents ask before acting by default, and Preferences > Agent permissions… switches to Skip permissions. In Ask mode, Claude Code's requests to run a command show as Approve or Deny in the panel. The other CLIs ask in their own tab.

Pillar 2 — Variables, Multi-Edit (`Q`) & Suggest Auto-Layout

The Variables view lists a file's collections, groups and modes in one table, with an alias picker for bindings. Variables are color, number, string or boolean. A frame can pin its own mode per collection (for example Light or Dark), and modes survive a .fig round trip. Import and export variables as Figma JSON and W3C Design Tokens (DTCG) from the Variables menu, or with --import-variables and --export-variables. Press Q (or ⌘⌥A; Ctrl+Alt+A on Windows and Linux) to run Select matching layers: it selects the layers that share the selection's name and type across top-level frames and component variants, for Multi-Edit. Press ⌘⇧⌥A (Ctrl+Shift+Alt+A) to run Suggest Auto-Layout on the selection. ⇧A runs Add auto layout.

Pillar 3 — Dev Mode (`Shift+D` / `</>`) Multi-Target Codegen & Box-Model Inspector

Switch into Dev Mode (Shift+D or </>) to inspect a layer: its Ready for dev status, annotations, dev links, a CSS box-model diagram, resolved variables, and copy-ready code in CSS, Tailwind, React (JSX), SwiftUI, UIKit, Jetpack Compose, Android XML and HTML. This capture shows the top of the panel. From a terminal, designos <file> --select <layer> --codegen <language> prints the same code, and --dev <language> opens Dev Mode on that language. Both take css, tailwind, react, swiftui, uikit, compose, android-xml or html.

Pillar 4 — Declarative `NodeSpec` JSON -> Auto-Layout 5.0 -> `.fig` export

AI agents author compact, diffable NodeSpec JSON (examples/specs/easeui-agent-console.spec.json) rather than guessing pixel coordinates. designos-doc computes recursive Auto-Layout 5.0 geometry (relayout_subtree), and designos-fig exports the result as a .fig file (export_fig, container version 106):

designos app.designos --apply-spec examples/specs/easeui-agent-console.spec.json
designos app.designos --export-fig out.fig

Deliverable / Mode	Best for	Output Format	Verification Gate
Native `.fig` Read/Write	Opening, editing, and saving Figma archives offline	`.fig` (`fig-kiwi`, version 106 on write, plus `meta.json` and `images/`)	`crates/designos-fig` round-trip tests · known issue #834
Declarative `NodeSpec` Canvas Compiler	Agent-authored UI screens with deterministic Auto-Layout 5.0	`.spec.json` / `.designos` / `.fig`	`designos --apply-spec` + `--inspect-json`
Agents Panel & `designos-mcp`	Live agent sessions on the open file and prompt-to-canvas work	`designos-mcp` (`stdio`) + `RailItem::Agents`	MCP tool-list test pins the tool list
Dev Mode Multi-Target Codegen	Exporting production UI code and token bindings per frame	`CSS` · `Tailwind` · `React` · `SwiftUI` · `UIKit` · `Compose` · `Android XML` · `HTML`	`crates/designos-export` codegen tests
Headless Visual Proof & Diff	Automated CI screenshot capture and pixel and SSIM comparison	`PNG` / `SVG` / `PDF` / `JPG` + diff report	`designos-studio --gpu --screenshot` + `designos-diff`

Figma-style micro-interactions

The Studio implements the small, tactile interactions Figma users expect on the canvas. The table names what exists, by area. Not every interaction has an automated test: launch_e2e_proves_100_figma_micro_interactions_end_to_end drives eight of them: Smart Selection and Tidy up, a CSS Grid track pill, the Scale tool, the Eyedropper and its format cycle, copy and paste of properties, and Shift+Align as a group.

Area	What the canvas does
Inspector fields	Drag a field label to scrub the value, step it with the arrow keys, type math such as `+ - * /`, and edit `Mixed` selections. The digits `0` to `9` set opacity.
Auto layout and CSS Grid	On-canvas gap and padding handles, add (`⇧A`) and remove (`⌥⇧A`) auto layout, Suggest Auto-Layout, CSS Grid track pills, and Smart Selection with Tidy up.
Selection and guides	Marquee select, hierarchy keys (`Enter`, `Tab`, and `N` or `⇧N` between frames), `⌥`-hover distance guides, and smart snap guides.
Shapes and vectors	On-canvas corner radius handles, ellipse, polygon and star controls, and vector network editing with join and split.
Layers, Eyedropper and Scale	Inline layer rename, the Eyedropper (`I`) and the Scale tool (`K`).
Arrange	Group (`⌘G`), ungroup (`⇧⌘G`) and frame selection (`⌥⌘G`), plus align with `⌥A`, `⌥W`, `⌥S`, `⌥D`, `⌥H` and `⌥V`.
Components, prototype and comments	Create component (`⌥⌘K`) and detach instance (`⌥⌘B`), variants, variable binding, prototype flows, pin comments, and copy and paste of properties (`⌥⌘C`, `⌥⌘V`).

How large files stay fast

Mechanism	What it does	Code
Idle frame reuse	No repaint is requested while the view is idle. The cached frame is re-blitted.	`FrameKey` in `crates/designos-app/src/canvas/gpu.rs`
Viewport culling	Top-level and hit-test queries scan a uniform spatial grid of 2048-unit cells, not every node.	`SceneIndex::query_top_level`
Incremental index	Moving or resizing one node updates its subtree, not the whole index.	`SceneIndex::update_subtree`
Shared meshes	Component instances and repeated shapes share one tessellation.	`GeomCache::shared`

Measured with v0.6.0 on an Apple M4 Max (Metal): after the 336 MB Untitled UI PRO kit, which has 207,601 nodes, finished loading, the process used 0.01 s of CPU in each of two 20 s idle windows. This was not measured on DirectX 12 or Vulkan.

Installation

You can install design-os-studio either as a native desktop + CLI application (bundling designos-studio, designos, designos-mcp, and designos-diff) or as an AI agent skill plugin (skills/design-os-studio/SKILL.md + commands/doctor.md). See docs/install.md for full OS-specific details.

Native Cross-Platform Installers (`macOS` · `Windows` · `Linux`)

Platform	Primary Installer	Portable Archive & CLI Installer	Bundled Binaries
macOS (Apple Silicon and Intel, universal)	`designos-<ver>-macos.dmg` (`designos.app` + `install-cli.command`)	`designos-<ver>-macos-universal.tar.gz`	`designos-studio`, `designos`, `designos-mcp`, `designos-diff`
Windows (x64)	`designos-<ver>-x86_64-pc-windows-msvc.zip` (per-user `install.ps1` / `uninstall.ps1`, no admin prompt)	None. An NSIS installer is built only when NSIS is on the build machine, and the release runner does not have it.	`designos-studio.exe`, `designos.exe`, `designos-mcp.exe`, `designos-diff.exe`
Linux (x64)	`designos_<ver>_amd64.deb` (`apt install`, `.desktop`, `.designos`/`.fig` MIME)	`designos-<ver>-x86_64-unknown-linux-gnu.tar.gz` (`./install.sh`)	`designos-studio`, `designos`, `designos-mcp`, `designos-diff`

Releases are verified on macOS (Apple Silicon). The Windows and Linux packages are built by the same release workflow but are not verified before release. A failed Windows or Linux build leaves its package out of the release and does not block it. Please report anything that breaks.

# Build & package native installers + release-manifest.json + SHA256SUMS locally into dist/
./scripts/build-release.sh <version> --local-host

Claude Code

Run these two commands inside Claude Code:

/plugin marketplace add jangtrinh/design-os-studio
/plugin install design-os-studio@design-os-studio

OpenAI Codex

Install to your personal Codex skills directory:

git clone https://github.com/jangtrinh/design-os-studio /tmp/design-os-studio
mkdir -p ~/.codex/skills/design-os-studio ~/.codex/prompts
cp -R /tmp/design-os-studio/skills/design-os-studio/* ~/.codex/skills/design-os-studio/
cp /tmp/design-os-studio/prompts/doctor.md ~/.codex/prompts/design-os-studio-doctor.md
rm -rf /tmp/design-os-studio

Gemini CLI & Google Antigravity

git clone https://github.com/jangtrinh/design-os-studio /tmp/design-os-studio
mkdir -p ~/.gemini/skills/design-os-studio
cp -R /tmp/design-os-studio/skills/design-os-studio/* ~/.gemini/skills/design-os-studio/
rm -rf /tmp/design-os-studio

OpenCode, Cursor, Windsurf & Other Agent Harnesses (Skill + `designos-mcp`)

git clone https://github.com/jangtrinh/design-os-studio /tmp/design-os-studio
mkdir -p ~/.agents/skills/design-os-studio
cp -R /tmp/design-os-studio/skills/design-os-studio/* ~/.agents/skills/design-os-studio/
rm -rf /tmp/design-os-studio

To wire the local stdio MCP server (designos-mcp) in mcpServers:

{
  "mcpServers": {
    "design-os-studio": {
      "command": "/ABSOLUTE/PATH/TO/designos-mcp",
      "args": ["--workspace", "/ABSOLUTE/PATH/TO/designs"]
    }
  }
}

Verify installation:

python3 scripts/self_check.py

Or run the doctor command to inspect installed skill paths, plugin manifests, workspace crates, and visual proof images: /design-os-studio:doctor in Claude Code (the plugin namespace keeps it apart from Claude Code's own /doctor), or the design-os-studio-doctor prompt in Codex.

Uninstall:

rm -rf ~/.claude/skills/design-os-studio ~/.codex/skills/design-os-studio ~/.gemini/skills/design-os-studio ~/.agents/skills/design-os-studio

Usage & Prompt Cookbook

Once installed, your agent loads skills/design-os-studio/SKILL.md when your request touches .fig / .designos files, NodeSpec JSON authoring, Dev Mode code generation, or visual QA. See docs/cookbook.md for full copy-paste recipes.

Generate & Export .spec.json -> .fig

"Apply examples/specs/easeui-agent-console.spec.json to a new document, export it to out.fig, and capture a 1600x1000 GPU screenshot."

Resolve Canvas Comments

"List the open comment threads, make the change each one asks for, and resolve the thread."

Export Multi-Target Code & Compare Screenshots

"Generate React, Tailwind, and SwiftUI code for the selected frame, then compare a before and after screenshot with designos-diff."

Commands & Diagnostics

Command	Environment	What it does
`/design-os-studio:doctor`	Claude Code	Read-only diagnostic check of installed skill paths, plugin manifests, Cargo crates, and binary availability (Codex: the `design-os-studio-doctor` prompt)
`python3 scripts/self_check.py`	Terminal / CI	Deterministic offline self-check of required files, plugin manifests, crate manifests, visual proof images, the skill file, and the Zero Fake UI gate
`designos-studio [file] [flags]`	Desktop / Headless CI	Launch the native GPU/CPU Studio GUI or render headless screenshots (`--gpu --screenshot out.png`)
`designos <file> [flags]`	Terminal / Agent CLI	Apply declarative `NodeSpec` (`--apply-spec`), export Figma `.fig` (`--export-fig OUT.fig`, add `--overwrite` to replace an existing file), inspect JSON (`--inspect-json`), generate code (`--codegen`), or manage comments (`--comments-json`)
`designos-mcp --workspace <dir>`	MCP Client (`stdio`)	Expose typed MCP tools listed below (`designos_open_file`, `designos_apply_spec`, `designos_export_fig_file`, `designos_generate_code`, etc.)
`designos-diff compare <a> <b>`	Terminal / CI	Compute SSIM and anti-aliasing-aware pixel diffs between two PNGs
`./scripts/build-release.sh <ver> --local-host`	Terminal / CI	Compile all 4 binaries and package the host's native release packages (`.dmg`, `.zip`, `.deb`), `release-manifest.json`, and `SHA256SUMS`

Tool (`36` total)	Mode	Required Args	Description
`designos_get_document`	read-only	—	Summarize the current in-memory document: pages, counts, shared styles (fill, text, effect, grid) with their values, and undo state.
`designos_get_libraries`	read-only	—	List this file's local publishable assets, enabled libraries (with pinned and latest versions and update_available), and disabled libraries in the active library root.
`designos_get_metadata`	read-only	—	Return a sparse XML node hierarchy (IDs, types, names, page-space bounds, layout, component/variant props, text previews, and lint issue counts) for a page or subtree.
`designos_search_design_system`	read-only	`query`	Search components, component sets, shared styles, and variables across this file and its enabled libraries, returning ranked instance-ready references and NodeSpec examples.
`designos_list_nodes`	read-only	—	List node summaries in numeric ID order. Query matches names case-insensitively; parent_id filters direct children. Use next_offset to paginate.
`designos_get_node`	read-only	`node_id`	Read the full native node including geometry, paints, text, bindings, and child IDs.
`designos_get_variables`	read-only	—	Read variable definitions and collections. With node_id, also resolve that node's direct bindings using inherited collection modes.
`designos_generate_code`	read-only	`language`, `node_id`	Generate developer handoff code or SVG for a layer using resolved variable values. Returns source text; writes no files.
`designos_create_node`	mutating	`kind`, `parent_id`	Create one layer in a container; defaults to x/y=0, width/height=100. Supports undo. Text is only valid for text layers. Changes are in memory until saved. Content added to, removed from or moved in an instance slot is kept when the main component changes.
`designos_update_node`	mutating	`node_id`	Update specified fields of one non-page layer. Coordinates are parent-relative. Replacing text clears text runs and list ranges. Supports undo; changes remain in memory until saved.
`designos_delete_node`	mutating	`node_id`	Remove a non-page layer and its entire subtree. Supports undo; changes remain in memory until saved. Content added to, removed from or moved in an instance slot is kept when the main component changes.
`designos_list_comments`	read-only	—	List canvas comment threads enriched with resolved world coordinates, target node ID/name/kind, and top-level frame ID/name. Filter by resolved state, page_id, or node_id.
`designos_add_comment`	mutating	`text`	Pin a new comment thread to a node (with local offset x/y) or page coordinates. Supports undo.
`designos_reply_comment`	mutating	`text`, `thread_id`	Append a reply message to an existing canvas comment thread and optionally mark it resolved/unresolved. Supports undo.
`designos_resolve_comment`	mutating	`thread_id`	Mark a canvas comment thread resolved (default true) or unresolved (false). Supports undo.
`designos_apply_spec`	mutating	`spec`	Build a complete UI subtree from a declarative NodeSpec (supports EaseUI BrainWave 2.0 presets like easeui-screen/easeui-card/easeui-button-primary, $easeui.* tokens, and Auto-Layout 5.0 row/column/wrap/hug/fill) in a single atomic undoable step together with the variables it creates. Replies with bindings_created, styles_linked and warnings (for example DEPRECATED_EASEUI_TOKEN). Content added to, removed from or moved in an instance slot is kept when the main component changes. Examples: 1) Token-bound frame with auto-layout: {"parent_id":1,"spec":{"kind":"frame","name":"Hero","layout":{"direction":"column","gap":16,"padding":[24,24,24,24]},"fill":"var:Color/Surface","children":[{"kind":"text","name":"Title","text":"Welcome"}]}} 2) Component instance with variant and overrides: {"parent_id":1,"spec":{"kind":"instance","name":"PrimaryCTA","component":"Button","variant":{"Size":"lg","State":"default"},"overrides":[{"path":"Label","text":"Continue"}]}} 3) Component instance with filled slots: {"parent_id":1,"spec":{"kind":"instance","name":"SettingsCard","component":"Card","slots":{"header":[{"kind":"instance","component":"CardHeader"}],"body":[{"kind":"instance","component":"FormRow"}],"footer":false}}}
`designos_export_spec`	read-only	`node_id`	Export a node and its descendants as a declarative NodeSpec JSON tree, enriched with Dev Mode status/annotations and any canvas comment threads pinned within the subtree.
`designos_set_dev_status`	mutating	`node_id`	Set a layer's Dev Mode handoff status ('ready', 'completed', or 'clear') and/or append a developer annotation. Supports undo.
`designos_export_fig_file`	mutating	`output_path`	Export the current session document to a Figma binary .fig container (with fig-kiwi header and deflate chunks) inside the workspace.
`designos_query_xpath`	read-only	`selector`	Query layers in a page or subtree with a streaming single-pass XPath evaluator, node budget, cursor pagination, compact rows, and solver-backed linter predicates (has-problem, is-bound, has-hardcoded, @problems, @inProgress). Examples: 1) Truncated text: {"selector":"//TEXT[has-problem('text-truncated')]"} 2) Hard-coded fills inside a frame: {"selector":"//FRAME[@name='Card']//[has-hardcoded('fills/0')]"} 3) Layers an agent is working on: {"selector":"//[@inProgress]"}
`designos_lint`	read-only	—	Run the unified solver-backed geometric, text, token, and structural design linter on a page, specific node subtrees, or the active page.
`designos_get_guidelines`	read-only	—	List available design guideline topics or return the guideline document for a topic ('design-system', surface guides, 'archetypes', 'archetype:', or 'rules').
`designos_import_web_capture`	mutating	—	Import a .webcapture.json / .capture.json bundle (or inline capture JSON) into a page as an editable auto-layout frame tree in one undoable step, returning the ImportReport.
`designos_undo`	mutating	—	Undo the latest successful edit in this session; returns changed=false if the stack is empty.
`designos_lint_fix`	mutating	—	Apply deterministic fixes for auto-fixable lint findings on a page, specific node subtrees, or the active page in a single undo step.
`designos_redo`	mutating	—	Redo the most recently undone edit in this session; returns changed=false if the stack is empty.
`designos_get_screenshot`	read-only	—	Render a node, a set of nodes on the same page, or a page-space rectangular region and return it inline as MCP image content (PNG or JPEG), automatically downsized to max_long_edge (default 1024).
`designos_set_in_progress`	mutating	`node_ids`, `value`	Flag or clear root frames as in progress while an agent works on them (work state, not an undo step).
`designos_apply_batch`	mutating	`ops`	Execute 1..=200 write operations (apply_spec, insert/create, update, move, delete, set_slot, set_variables, set_style, set_in_progress) as a single atomic transaction and one undo group. Later ops may reference nodes created by earlier ops via '$prev', '@', or '@/'. With dry_run=true, computes and returns created IDs, name_to_id map, touched_roots, and touched_bounds without mutating the document or publishing a live patch. Pass idempotency_key to deduplicate retries (a key names one logical write; after a reconnect, call designos_get_node before trusting a replayed id). Note: in a live Studio session, if the editor remaps a colliding ID on replay, the reply holds the session IDs until the next canvas reload. Examples: (1) create + $prev: {"ops":[{"op":"create","parent":1,"kind":"frame","name":"Header"},{"op":"create","parent":"$prev","kind":"text","text":"Title"}]}; (2) apply_spec with as + @handle/Child update: {"ops":[{"op":"apply_spec","as":"hero","spec":{"kind":"frame","name":"Hero","children":[{"kind":"text","name":"Child","text":"Hi"}]}},{"op":"update","node":"@hero/Child","opacity":0.9}]}; (3) set_slot: {"ops":[{"op":"set_slot","node":"@card","slot":"body","fill":[{"kind":"text","text":"Body"}]}]}; (4) dry_run: {"dry_run":true,"ops":[{"op":"insert","kind":"rectangle","name":"Box"}]}.
`designos_get_design_context`	read-only	`node_id`	Return generated code in the target language, Dev Mode hints (variables with CSS/platform code syntax, linked styles, component instances/properties, annotations, dev status, Code Connect stub), and an inline screenshot (scale 0.5, max_long_edge 1024), with an XML outline fallback when the subtree exceeds 5,000 nodes or generated code exceeds 40,000 characters.
`designos_configure_session`	mutating	—	Configure per-session MCP options for the automatic mutating-call lint issues block (issues.mode: preset \| errors_only \| off, issues.preset, issues.max_items: 1..=100) and auto_fix settings. Persists across reconnects in the session directory and resets on document switch.
`designos_get_app_state`	read-only	—	Return the pre-fetched design context block. Sections: freshness, document, depth-3 target frames outline, variables summary, components and libraries, active style, and rules pack, plus session state. Pass include_selection=true ONLY when the user explicitly asks about their canvas selection.
`designos_open_file`	mutating	`path`	Import a .designos, .designos, .fig, SVG or Figma REST JSON file inside the workspace into this isolated session. Does not control an open editor. Unsaved changes require discard_changes=true.
`designos_save_file`	mutating	`path`	Save this session to a .designos file inside the workspace. Existing files are not overwritten unless overwrite=true. Parent directory must exist.
`designos_render_png`	mutating	`node_id`, `path`	Rasterize a frame or layer to a NEW .png file inside the workspace using DESIGN:OS Studio's deterministic renderer. Existing files are never overwritten.
`designos_new_document`	mutating	`name`	Start a blank document with one page. Unsaved changes require discard_changes=true.

How it works

Intent & Skill Routing — Your AI agent matches your request against skills/design-os-studio/SKILL.md frontmatter triggers, or works in the Agents panel (RailItem::Agents) with designos-mcp connected.
Progressive Context Loading — Only the concise SKILL.md router loads initially; docs/cookbook.md, docs/install.md, and crates/designos-mcp/README.md load on demand.
Deterministic Scene-Graph & Auto-Layout Compilation — designos-doc mutates the typed Document tree and runs Auto-Layout 5.0 (relayout_subtree), while designos-fig reads .fig archives and writes them as fig-kiwi version 106.
Uniform Spatial Culling & GPU Compilation — designos-render indexes world bounds and clips in a uniform spatial grid with 2048-unit cells (SceneIndex) with zoom-based level of detail, and designos-gpu compiles visible primitives into canonical GeomCache meshes and multi-pass wgpu shaders.
Visual & Test Verification — Outputs are verified via headless screenshots (--gpu --screenshot), designos-diff comparison, cargo test --workspace, which passes more than 6,000 tests in the macOS CI job, and python3 scripts/self_check.py.

User Prompt / Agents Panel / CLI / MCP Invocation
                        │
                        ▼
┌───────────────────────────────────────────────────────────┐
│ skills/design-os-studio/SKILL.md + designos-mcp (stdio)   │
│ Progressive disclosure router & typed MCP/CLI contracts   │
└───────────────────────┬───────────────────────────────────┘
                        │ mutates / queries
                        ▼
┌───────────────────────────────────────────────────────────┐
│ designos-doc (Auto-Layout 5.0) + designos-fig (.fig)      │
│ Canonical scene graph, Variables, Components & Kiwi I/O   │
└───────────────────────┬───────────────────────────────────┘
                        │ indexes & renders
                        ▼
┌───────────────────────────────────────────────────────────┐
│ designos-render (2048-unit grid) + designos-gpu (wgpu)    │
│ Zoom-based LOD, GeomCache & UI3 Phosphor Chrome           │
└───────────────────────┬───────────────────────────────────┘
                        │ verifies
                        ▼
┌───────────────────────────────────────────────────────────┐
│ scripts/self_check.py + designos-diff + doctor command    │
│ Local visual & contract verification gate                 │
└───────────────────────────────────────────────────────────┘

What loads when

design-os-studio uses progressive context disclosure so your AI agent's context window stays fast and focused:

File	Loaded when
`skills/design-os-studio/SKILL.md`	Always — routing rules, binary flags, and execution workflow
`docs/cookbook.md`	When selecting copy-paste CLI/MCP workflows, `.spec.json` roundtrips, or headless screenshot recipes
`docs/install.md` / `docs/releasing.md`	When installing or packaging `.dmg`, `.zip`, or `.deb` releases
`commands/doctor.md` / `prompts/doctor.md`	Only when running the doctor command
`llms.txt`	When indexed by AI answer engines, RAG pipelines, or repository crawlers

File structure

design-os-studio/
├── .claude-plugin/
│   ├── plugin.json                 # Claude Code plugin manifest
│   └── marketplace.json            # Claude Code marketplace catalog
├── .codex-plugin/
│   └── plugin.json                 # OpenAI Codex plugin & interface manifest
├── .agents/
│   └── plugins/marketplace.json    # Cross-agent local plugin registry
├── .factory-plugin/
│   ├── plugin.json                 # Factory / Droid plugin manifest
│   └── marketplace.json            # Factory marketplace metadata
├── crates/
│   ├── designos-doc/               # Core scene graph, NodeSpec builder, Auto-Layout 5.0
│   ├── designos-fig/               # Figma .fig (fig-kiwi, writes version 106) & REST JSON read/write
│   ├── designos-render/            # Deterministic tiny-skia CPU renderer & SceneIndex (2048-unit grid cells)
│   ├── designos-gpu/               # wgpu GPU compiler (SceneCompiler, GeomCache, WGSL shaders)
│   ├── designos-app/               # Desktop studio, Agents panel, micro-interactions, Variables & Dev Mode
│   ├── designos-library/           # Local library, 8 KB fast header probe, zero-alloc autosave
│   ├── designos-fonts/             # Bundled Inter and Roboto Mono variable fonts & async Fontsource cache
│   ├── designos-export/            # PNG/JPG/PDF/SVG exporters & Dev Mode codegen in eight languages
│   ├── designos-svg/               # SVG parser & scene-graph importer
│   ├── designos-diff/              # Pixel diff & SSIM CLI (designos-diff)
│   ├── designos-eval/              # Design evaluation harness (source tree only, not in release packages)
│   ├── designos-webcapture/        # Rendered web page capture importer
│   └── designos-mcp/               # Local stdio MCP server (designos-mcp)
├── skills/
│   └── design-os-studio/
│       └── SKILL.md                # Canonical agent skill entrypoint
├── commands/
│   └── doctor.md                   # doctor diagnostic command (Claude Code)
├── prompts/
│   └── doctor.md                   # Codex diagnostic prompt mirror
├── scripts/
│   ├── self_check.py               # Deterministic repository, crate & skill self-check
│   ├── zero_fake_ui_gate.py        # Zero-Fake-UI deterministic enforcement gate
│   ├── capture-visual-proof.sh     # Headless GPU screenshot generator
│   ├── build-release.sh            # Cross-platform release builder (.dmg, .zip, .deb, .tar.gz)
│   ├── package-macos.sh            # macOS .app + .dmg + install-cli.command packager
│   └── package.sh                  # Windows .zip + Linux .deb / .tar.gz packager
├── docs/
│   ├── index.html                  # GitHub Pages landing page
│   ├── images/                     # Screenshots and 2x captures from the app
│   ├── videos/                     # Video and GIF assets
│   ├── cookbook.md                 # Copy-paste prompt & CLI recipes
│   ├── install.md                  # Cross-platform installation guide
│   ├── releasing.md                # Release engineering & self-updater guide
│   └── llms.txt                    # GEO / LLM discovery index
├── PRIVACY.md                      # Privacy statement
├── SECURITY.md                     # Vulnerability disclosure & security policy
├── CONTRIBUTING.md                 # Contribution workflow & verification rules
├── CODE_OF_CONDUCT.md              # Contributor Covenant code of conduct
├── CHANGELOG.md                    # Release history
├── llms.txt                        # Root LLM indexing manifest
├── LICENSE                         # PolyForm Shield 1.0.0 license text
└── README.md

Quality bar & Limitations

It's working if...

python3 scripts/self_check.py prints ok: design-os-studio self-check passed (design-os-studio) and exits 0.
cargo test --workspace passes with 0 failures. The macOS CI job runs more than 6,000 tests.
A file you leave still stops using CPU: on Metal, the process used 0.01 s of CPU in 20 s idle on the Untitled UI PRO kit.
Your AI coding agent loads skills/design-os-studio/SKILL.md automatically or connects via the Agents panel / designos-mcp.

Known issues

Saving a .fig from Studio drops numbered-list formatting and writes inherited or variable-bound paints on instances as fixed values (#834). Keep the original .fig, or save as .designos, until it is fixed. v0.5.0 behaves the same.
On very large pages (100,000 layers or more), Rename layers semantically and Boost resolution in the command palette can take several seconds (#993). The next release addresses this first.
On macOS, Quit from the Dock, logout and shutdown still skip the Save changes question (#977). Cmd+Q and Quit in the app menu ask.
The macOS app is ad-hoc signed, so the first launch asks for a one-time Open Anyway in System Settings > Privacy & Security.

When not to use

Real-time multi-user cloud whiteboarding requiring hosted WebRTC multiplayer cursors without local file ownership.
Parametric 3D mechanical part modeling, gears, or STL slicing (use design-os-3d-blender instead).
Paperboard folding dielines, Kawasaki/Maekawa crease verification, and spot-color pre-press PDF separations (use design-os-origami instead).

What is DESIGN:OS Studio (design-os-studio)? DESIGN:OS Studio (design-os-studio) is a native Rust interface design studio drawn on the GPU (wgpu), a Figma .fig reader and writer, an Agents panel for Claude Code, Codex, Grok, Antigravity and Gemini CLI, a Dev Mode code generator for eight languages, and a Model Context Protocol server (designos-mcp).

How does DESIGN:OS Studio compare with Figma, Penpot, and similar tools? It is local-first. Files stay on your disk, the canvas is native Rust drawn through wgpu (Metal on macOS; Direct3D 12 and Vulkan on Windows and Linux) with a tiny-skia CPU renderer, and agents reach the open file through a local MCP server. It has no real-time multiplayer or cloud administration. Use Figma or a hosted Penpot instance for those.

Can DESIGN:OS Studio both open and save standard Figma .fig files? Yes, with one known issue. crates/designos-fig reads .fig containers (DEFLATE or Zstd, ZIP-wrapped or bare) and writes version 106 with meta.json and images/. It carries Auto-Layout traits, VectorNetwork geometry, symbolOverrides, parameterConsumptionMap variable bindings, and handoffStatusMap Dev Mode statuses, except for the cases in #834: numbered-list formatting is dropped and inherited or variable-bound paints on instances are written as fixed values.

How does the Agents panel work without paid third-party API keys? The panel starts your already-signed-in local CLI (claude, codex, grok, agy, gemini, or a command you add) in a real portable-pty + vt100 terminal tab. Studio sets DESIGNOS_BIN, DESIGNOS_FILE, and DESIGNOS_SESSION_DIR for the session and registers designos-mcp with the CLIs that support it, and the composer sends into the live session. Each CLI bills through its own plan, not through Studio.

How fast does DESIGN:OS Studio render large files? It limits work to the viewport with a spatial index of 2048-unit grid cells (SceneIndex) and zoom-based level of detail, shares meshes between repeated shapes (GeomCache), and reuses the cached frame when nothing changed (FrameKey). On Metal, an idle view used 0.01 s of CPU in 20 s on the 336 MB Untitled UI PRO kit, which has 207,601 nodes, measured with v0.6.0 on an Apple M4 Max. Load time depends on the file and the machine.

How is DESIGN:OS Studio installed and licensed? Pre-built packages are available for macOS (.dmg + .tar.gz, verified on Apple Silicon), Windows (.zip with a per-user install.ps1), and Linux (.deb + .tar.gz). The Windows and Linux packages are built by the same release workflow but are not verified before release. Or you can build from source with cargo run --release -p designos-app --bin designos-studio. It is source-available under PolyForm Shield 1.0.0, with no telemetry.

DESIGN:OS Ecosystem

design-os-studio is the flagship native Rust/GPU studio in the DESIGN:OS ecosystem:

Engine	Live Docs	Repository	Layer
DESIGN:OS Studio	jangtrinh.github.io/design-os-studio	`jangtrinh/design-os-studio`	`rust / wgpu studio`
DESIGN:OS CLI	jangtrinh.github.io/design-os	`jangtrinh/design-os`	`cli`
Knowledge Builder	jangtrinh.github.io/design-os-knowledge-builder	`jangtrinh/design-os-knowledge-builder`	`compiler`
Figma Plugin & CLI	jangtrinh.github.io/design-os-figma-plugin	`jangtrinh/design-os-figma-plugin`	`plugin`
SVG Animation Engine	jangtrinh.github.io/design-os-svg-animation	`jangtrinh/design-os-svg-animation`	`engine`
3D Blender Agent	jangtrinh.github.io/design-os-3d-blender	`jangtrinh/design-os-3d-blender`	`3d / cad`
OPAH ONE Drone	jangtrinh.github.io/design-os-drone-showcase	`jangtrinh/design-os-drone-showcase`	`hardware`
GitHub Pages Engine	jangtrinh.github.io/design-os-github-page	`jangtrinh/design-os-github-page`	`pages`
Apple Design OS	jangtrinh.github.io/design-os-apple	`jangtrinh/design-os-apple`	`swiftui`
Agent Teacher	jangtrinh.github.io/design-os-pedagogy	`jangtrinh/design-os-pedagogy`	`pedagogy`
Origami CAD	jangtrinh.github.io/design-os-origami	`jangtrinh/design-os-origami`	`packaging`
Voice UX Architecture	jangtrinh.github.io/design-os-voice-ux	`jangtrinh/design-os-voice-ux`	`voice-ai`
Code2Flow	jangtrinh.github.io/design-os-code2flow	`jangtrinh/design-os-code2flow`	`ast / audit`
Generative UI	jangtrinh.github.io/design-os-generative-ui	`jangtrinh/design-os-generative-ui`	`runtime`

Contributing & Governance

Contributing: See CONTRIBUTING.md for pull request guidelines and verification gates (python3 scripts/self_check.py and cargo test --workspace).
Code of Conduct: Governed by CODE_OF_CONDUCT.md.
Security & Privacy: No telemetry. See SECURITY.md and PRIVACY.md.
Changelog & LLM Index: Track releases in CHANGELOG.md and machine-readable index in llms.txt.

License

DESIGN:OS Studio is source-available under PolyForm Shield 1.0.0 © Jang Trinh. You can use and modify it freely, including for paid work. You cannot resell it or use it to build a product that competes with it.

Releases up to v0.5.0 were published under MIT OR Apache-2.0 and keep that license.

Third-party files keep their own licenses (full notices in THIRD_PARTY_LICENSES.md):

Bundled Fonts: Inter is © The Inter Project Authors under the SIL Open Font License 1.1 (crates/designos-fonts/assets/inter/OFL.txt). Roboto Mono is © The Roboto Mono Project Authors under the SIL Open Font License 1.1 (crates/designos-fonts/assets/roboto-mono/OFL.txt).
Icons: Studio UI3 chrome and canvas tool icons use official Phosphor Icons under the MIT License (crates/designos-app/assets/icons/phosphor/) alongside Lucide under the ISC License (crates/designos-app/assets/icons/lucide/LICENSE).
Trademarks: DESIGN:OS Studio is an independent source-available project by Jang Trinh and is not affiliated with, endorsed by, or sponsored by Figma, Inc.

If design-os-studio saves you time, a star on GitHub helps other engineers and AI agents find it.

DESIGN:OS Studio (`design-os-studio`)

Open Figma `.fig` files, edit them and save them back. Studio draws the canvas on the GPU with `wgpu` (Metal, DirectX 12 or Vulkan). The Agents panel runs Claude Code, Codex, Grok, Antigravity or Gemini CLI as a live session on the open file with your own sign-in, so Studio needs no API key. Work with variables and modes, select matching layers with Multi-Edit (`Q`), read Dev Mode code in eight languages (CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML), and capture headless screenshots from a terminal or CI.

Why this exists

Why DESIGN:OS Studio?

Dimension	DESIGN:OS Studio	How to check
Rendering	Native Rust canvas: `wgpu` on Metal, DirectX 12 or Vulkan, with a `tiny-skia` CPU renderer for headless captures. It requests no repaint while the view is idle (`FrameKey` frame reuse).	Open a file, leave it still, and read the process CPU time twice with `ps -o time= -p <pid>`.
Large files	A spatial index of 2048-unit grid cells (`SceneIndex`) limits work to the viewport, and repeated shapes share one mesh (`GeomCache`). The 336 MB Untitled UI PRO kit opens as one document of 207,601 nodes.	`designos <file> --inspect-json` prints the node count.
`.fig` files	Reads `.fig` containers (`fig-kiwi`, `DEFLATE` or `Zstd`) and writes container version 106, in a ZIP with `meta.json` and `images/`. Known issue in 0.6.0: saving a `.fig` drops numbered-list formatting and writes inherited or variable-bound paints on instances as fixed values.	Export a file, then read the version from the `canvas.fig` header (see below).
Agents	The Agents panel starts your own agent CLI (Claude Code, Codex, Grok, Antigravity or Gemini CLI) as a live session on the open file, and keeps a file's sessions across restarts. Each CLI uses its own sign-in, so Studio needs no API key.	`designos-studio <file> --panel agents`
MCP server	`designos-mcp` serves its tools over stdio: see the design, read its design system, write in one step (`designos_apply_batch`) and lint the result (`designos_lint`).	Send `tools/list` to `designos-mcp --workspace <dir>`. The tool table below is generated from that list.
Variables	Color, number, string and boolean variables in collections with modes. A frame can pin its own mode per collection, and modes round-trip through `.fig`. Import and export Figma JSON and W3C Design Tokens (DTCG).	`designos <file> --export-variables <out>`
Dev Mode	Built-in Dev Mode (`Shift+D`) with code in CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML.	`designos <file> --select <layer> --codegen react`
Privacy and license	No telemetry. Studio makes these network requests: open-licensed font downloads from the Fontsource API when a file uses fonts you do not have, a public status-page check after an agent provider error, a connection check when you click Retry connection, and a plugin download from GitHub when you install a plugin. The agent CLIs you start use the network under their own terms. Source-available under `PolyForm Shield 1.0.0`.	`git grep -n 'ureq::' -- crates` lists the HTTP calls. The Figma REST client in `designos-fig` is a cargo feature that is off by default.

To read the container version of an exported file, run unzip -p out.fig canvas.fig | head -c 12 | xxd. The header starts with fig-kiwi and ends with 6a00 0000, which is 106 in little-endian.

Where hosted tools win, and it is not close: real-time multiplayer with live cursors, enterprise cloud administration with SSO and SCIM, and hosted comment notifications by email or Slack. Studio has none of these. If your workflow needs real-time cloud multiplayer without local file ownership, use Figma (paired with our live bridge design-os-figma-plugin) or a hosted Penpot instance instead.

Facts Register

Instrument Field	Specification	Verification / Notes
Repository	`jangtrinh/design-os-studio`	Cargo workspace, `crates/designos-*`. Four binaries ship: `designos-studio`, `designos`, `designos-mcp`, `designos-diff`
Engine Stack	Rust + `wgpu` + `tiny-skia`	Metal (verified on macOS) · Direct3D 12 / Vulkan (Windows and Linux, not verified before release) · No Electron
Figma Interop	Reads `.fig`; writes container version 106	`crates/designos-fig` round-trip tests · more than `6,000` automated tests pass in the macOS CI job · known issue #834
Agent Surface	Agents panel + `designos-mcp`	`Claude Code` · `Codex` · `Grok` · `Antigravity` · `Gemini CLI`, each with its own sign-in
Telemetry / Network	No telemetry	Network use: font downloads from the Fontsource API for fonts a file needs, a status-page check after an agent provider error, a connection check when you click Retry connection, plugin downloads you start from GitHub, and the agent CLIs you start
License	`PolyForm Shield 1.0.0` (source-available)	Release packages: macOS `.dmg` (verified), Windows `.zip`, Linux `.deb` and `.tar.gz` (built, not verified before release)

Quickstart

1. Install once

Install the agent skill plugin in Claude Code, copy the skill into Codex, download a release package (.dmg, .zip, .deb, .tar.gz), or build the four binaries from source:

# Option A: Claude Code plugin marketplace
/plugin marketplace add jangtrinh/design-os-studio
/plugin install design-os-studio@design-os-studio

# Option B: Clone and launch the native Rust/wgpu Studio (or package a .dmg / .zip / .deb)
git clone https://github.com/jangtrinh/design-os-studio
cd design-os-studio
cargo run --release -p designos-app --bin designos-studio
./scripts/build-release.sh <version> --local-host

2. First Safe Use & The Practical Loop

First safe use (three bounded, non-destructive steps):

Run the deterministic offline repository, crate, and skill self-check:
```
python3 scripts/self_check.py
```
Apply a declarative NodeSpec JSON to a document and export it as a Figma .fig file (container version 106). app.designos is created if it does not exist:
```
designos app.designos --apply-spec examples/specs/easeui-agent-console.spec.json
designos app.designos --export-fig out.fig
```
--export-fig writes only to a path that ends in .fig and does not exist yet. Re-running it needs --overwrite, which replaces an existing regular file; a symbolic link is never written through.

Render the file on the CPU and on the GPU, then compare the two PNGs. designos-diff prints the SSIM score and exits 0 while the mismatch ratio stays under the threshold:

designos-studio out.fig --size 1600x1000 --no-toast --screenshot cpu.png
designos-studio out.fig --gpu --size 1600x1000 --no-toast --screenshot gpu.png
designos-diff compare cpu.png gpu.png --tolerance 8 --threshold 0.02 --out diff.png

The Practical Agentic Loop:

Lifecycle Verb / Flag	Role in the Loop
`--panel variables`	Opens the Variables view: collections, modes and alias bindings.
`--panel agents`	Opens the Agents panel: pick an agent CLI, resume the file's last session, or start from a sample prompt.
`--apply-spec / --export-fig`	Compiles declarative JSON specs through Auto-Layout 5.0, then writes a `.fig` file (container version 106).
`--screenshot / designos-diff`	Renders a headless frame, on the GPU with `--gpu`, and compares two PNGs.

3. Ask in plain English (or invoke the Agent CLI directly)

Open your project in your AI coding agent (or in the Studio's Agents panel) and describe the outcome you need:

"Apply examples/specs/easeui-agent-console.spec.json to a new document, export it to out.fig, and capture a 1600x1000 GPU screenshot."

"List the open comment threads, make the change each one asks for, and resolve the thread."

"Lint the open page with designos_lint, apply the safe fixes, and list what is left."

"Generate React, Tailwind and SwiftUI code for the selected frame, then compare a before and after screenshot with designos-diff."

What's new

Notes for every release are in the CHANGELOG. The newest is 0.6.1, a short list. v0.6.0 has captures from the release build, and older releases are short lists.

0.6.1

Agents panel. The bottom terminal dock and the >_ rail button are gone. Cmd+` (Ctrl+` on Windows and Linux) opens and closes the Agents panel. Agents ask before acting by default.
Unsaved edits. Studio asks Save changes to {name}? before a close, a quit or an open drops edits to a file outside the library, and asks before a file changed on disk replaces them. On macOS, Cmd+Q asks too. An agent that opens another document no longer replaces yours.
Undo. Undo and redo of your own edits restore the document exactly. The command palette's design fix and its Figma AI rows are one undo step each. After a font face arrives, and for an agent's edits, undo solves layout again.
Paste and drop. Paste text and images from other apps, and drop PNG, JPEG or WebP files on the canvas. Pasting a main component in its own file makes an instance.
.fig files. Export never replaces an existing file and says where it wrote. designos --export-fig refuses a path that does not end in .fig and a symbolic link, and needs --overwrite to replace a file. A save or export to .fig or .pen warns when it leaves comments out.
Slow machines. Draw, move, resize and rotate end where the pointer let go. A software renderer starts on the CPU canvas.
CLI. designos --version prints the version, and a file argument that is not on disk stops with an error.

0.6.0

Also in 0.6.0

Agents panel. A file keeps its sessions after a restart. Review what an agent changed in a turn and keep it or revert it in one undo step. Stop one agent or all of them from the panel.
Variables. Import and export Figma JSON and W3C Design Tokens (DTCG) from the Variables menu, or with --import-variables and --export-variables. An import merges into the file and reports what it skipped.
MCP. Agents can see the design, read its design system, write in one step with designos_apply_batch and check their work with designos_lint.
Dev Mode. HTML joins CSS, Tailwind, React, SwiftUI, UIKit, Compose and Android XML.
License. Studio is source-available under PolyForm Shield 1.0.0. Releases up to 0.5.0 keep MIT or Apache-2.0.

0.5.0

Slots. Create a slot on a component and set its rules: minimum and maximum children, preferred components, stretch on insert and show empty. Edit slot content in an instance without detaching it.
Empty slots. An empty slot shows a + that opens the preferred-instance picker. Migrate to slot turns an instance-swap or boolean region into a slot in one undo step.
Dev Mode. Code for React, Tailwind, SwiftUI and Compose gets one parameter per slot. The component playground lets you try properties and variants without editing the file.
Check designs. It flags hard-coded numbers that match a number variable, suggests variables and styles from enabled libraries, and audits text and overrides inside instances.
.fig files. Export follows Figma's own field numbering, types and enum values, and slot preferred values are written as Figma's real object.
Agent tabs. Antigravity and Grok tabs start again, and a tab that fails to start shows the cause.

0.4.0

Grid auto layout. More than 8 rows and columns, auto-placed items and auto rows, and children aligned inside their cell. Edit tracks on the canvas or in the Properties panel: insert, delete, resize and drag to reorder.
Auto layout. Child margins from .fig files, per-child align-self, and an Update auto layout action that upgrades an older frame.
Layout guides match Figma. Alignment, a fixed column or row width, auto count, and show or hide per guide. All of it round-trips through .fig.
Check designs. A panel that audits the page for low contrast, unbound colors, detached styles and detached instances, with a one-click Fix per finding and Fix all.
Vectors and export. Offset path, and scale for several selected points. PDF export draws vectors with selectable text. Lossless WebP export.
Dev Mode. Grid code for CSS, Tailwind and React is printed from the real tracks and placement.

0.3.0

Paste from Figma. Copy a selection in Figma desktop and press Cmd+V on the canvas. The layers land centered in the view as one undo step, images included.
Effect and grid styles. Create, apply, detach and rename them. Edit a style from the picker and every layer that uses it updates in one undo step. .fig files bring their effect and grid styles.
Auto layout and text. Space around and Space evenly, vertical wrap, and the text wrap modes Balance and Pretty.
Variables. Bind paint and effect opacity to number variables. Variables keep their Web, Android and iOS code syntax.
Dev Mode. UIKit and Android XML join the code languages, and a variable prints the way Figma does.
PDF export. Selected frames export as one multi-page PDF from the Export panel.

What it makes

Studio compiles every document through one scene graph (SceneCompiler + GeomCache), writes .fig files, and captures headless frames (--screenshot and designos-diff).

Pillar 1 — Agents panel (`Claude Code` · `Codex` · `Grok` · `Antigravity` · `Gemini CLI`)

Pillar 2 — Variables, Multi-Edit (`Q`) & Suggest Auto-Layout

Pillar 3 — Dev Mode (`Shift+D` / `</>`) Multi-Target Codegen & Box-Model Inspector

Pillar 4 — Declarative `NodeSpec` JSON -> Auto-Layout 5.0 -> `.fig` export

designos app.designos --apply-spec examples/specs/easeui-agent-console.spec.json
designos app.designos --export-fig out.fig

Deliverable / Mode	Best for	Output Format	Verification Gate
Native `.fig` Read/Write	Opening, editing, and saving Figma archives offline	`.fig` (`fig-kiwi`, version 106 on write, plus `meta.json` and `images/`)	`crates/designos-fig` round-trip tests · known issue #834
Declarative `NodeSpec` Canvas Compiler	Agent-authored UI screens with deterministic Auto-Layout 5.0	`.spec.json` / `.designos` / `.fig`	`designos --apply-spec` + `--inspect-json`
Agents Panel & `designos-mcp`	Live agent sessions on the open file and prompt-to-canvas work	`designos-mcp` (`stdio`) + `RailItem::Agents`	MCP tool-list test pins the tool list
Dev Mode Multi-Target Codegen	Exporting production UI code and token bindings per frame	`CSS` · `Tailwind` · `React` · `SwiftUI` · `UIKit` · `Compose` · `Android XML` · `HTML`	`crates/designos-export` codegen tests
Headless Visual Proof & Diff	Automated CI screenshot capture and pixel and SSIM comparison	`PNG` / `SVG` / `PDF` / `JPG` + diff report	`designos-studio --gpu --screenshot` + `designos-diff`

Figma-style micro-interactions

Area	What the canvas does
Inspector fields	Drag a field label to scrub the value, step it with the arrow keys, type math such as `+ - * /`, and edit `Mixed` selections. The digits `0` to `9` set opacity.
Auto layout and CSS Grid	On-canvas gap and padding handles, add (`⇧A`) and remove (`⌥⇧A`) auto layout, Suggest Auto-Layout, CSS Grid track pills, and Smart Selection with Tidy up.
Selection and guides	Marquee select, hierarchy keys (`Enter`, `Tab`, and `N` or `⇧N` between frames), `⌥`-hover distance guides, and smart snap guides.
Shapes and vectors	On-canvas corner radius handles, ellipse, polygon and star controls, and vector network editing with join and split.
Layers, Eyedropper and Scale	Inline layer rename, the Eyedropper (`I`) and the Scale tool (`K`).
Arrange	Group (`⌘G`), ungroup (`⇧⌘G`) and frame selection (`⌥⌘G`), plus align with `⌥A`, `⌥W`, `⌥S`, `⌥D`, `⌥H` and `⌥V`.
Components, prototype and comments	Create component (`⌥⌘K`) and detach instance (`⌥⌘B`), variants, variable binding, prototype flows, pin comments, and copy and paste of properties (`⌥⌘C`, `⌥⌘V`).

How large files stay fast

Mechanism	What it does	Code
Idle frame reuse	No repaint is requested while the view is idle. The cached frame is re-blitted.	`FrameKey` in `crates/designos-app/src/canvas/gpu.rs`
Viewport culling	Top-level and hit-test queries scan a uniform spatial grid of 2048-unit cells, not every node.	`SceneIndex::query_top_level`
Incremental index	Moving or resizing one node updates its subtree, not the whole index.	`SceneIndex::update_subtree`
Shared meshes	Component instances and repeated shapes share one tessellation.	`GeomCache::shared`

Installation

Native Cross-Platform Installers (`macOS` · `Windows` · `Linux`)

Platform	Primary Installer	Portable Archive & CLI Installer	Bundled Binaries
macOS (Apple Silicon and Intel, universal)	`designos-<ver>-macos.dmg` (`designos.app` + `install-cli.command`)	`designos-<ver>-macos-universal.tar.gz`	`designos-studio`, `designos`, `designos-mcp`, `designos-diff`
Windows (x64)	`designos-<ver>-x86_64-pc-windows-msvc.zip` (per-user `install.ps1` / `uninstall.ps1`, no admin prompt)	None. An NSIS installer is built only when NSIS is on the build machine, and the release runner does not have it.	`designos-studio.exe`, `designos.exe`, `designos-mcp.exe`, `designos-diff.exe`
Linux (x64)	`designos_<ver>_amd64.deb` (`apt install`, `.desktop`, `.designos`/`.fig` MIME)	`designos-<ver>-x86_64-unknown-linux-gnu.tar.gz` (`./install.sh`)	`designos-studio`, `designos`, `designos-mcp`, `designos-diff`

# Build & package native installers + release-manifest.json + SHA256SUMS locally into dist/
./scripts/build-release.sh <version> --local-host

Claude Code

Run these two commands inside Claude Code:

/plugin marketplace add jangtrinh/design-os-studio
/plugin install design-os-studio@design-os-studio

OpenAI Codex

Install to your personal Codex skills directory:

git clone https://github.com/jangtrinh/design-os-studio /tmp/design-os-studio
mkdir -p ~/.codex/skills/design-os-studio ~/.codex/prompts
cp -R /tmp/design-os-studio/skills/design-os-studio/* ~/.codex/skills/design-os-studio/
cp /tmp/design-os-studio/prompts/doctor.md ~/.codex/prompts/design-os-studio-doctor.md
rm -rf /tmp/design-os-studio

Gemini CLI & Google Antigravity

git clone https://github.com/jangtrinh/design-os-studio /tmp/design-os-studio
mkdir -p ~/.gemini/skills/design-os-studio
cp -R /tmp/design-os-studio/skills/design-os-studio/* ~/.gemini/skills/design-os-studio/
rm -rf /tmp/design-os-studio

OpenCode, Cursor, Windsurf & Other Agent Harnesses (Skill + `designos-mcp`)

git clone https://github.com/jangtrinh/design-os-studio /tmp/design-os-studio
mkdir -p ~/.agents/skills/design-os-studio
cp -R /tmp/design-os-studio/skills/design-os-studio/* ~/.agents/skills/design-os-studio/
rm -rf /tmp/design-os-studio

To wire the local stdio MCP server (designos-mcp) in mcpServers:

{
  "mcpServers": {
    "design-os-studio": {
      "command": "/ABSOLUTE/PATH/TO/designos-mcp",
      "args": ["--workspace", "/ABSOLUTE/PATH/TO/designs"]
    }
  }
}

Verify installation:

python3 scripts/self_check.py

Uninstall:

rm -rf ~/.claude/skills/design-os-studio ~/.codex/skills/design-os-studio ~/.gemini/skills/design-os-studio ~/.agents/skills/design-os-studio

Usage & Prompt Cookbook

Generate & Export .spec.json -> .fig

"Apply examples/specs/easeui-agent-console.spec.json to a new document, export it to out.fig, and capture a 1600x1000 GPU screenshot."

Resolve Canvas Comments

"List the open comment threads, make the change each one asks for, and resolve the thread."

Export Multi-Target Code & Compare Screenshots

"Generate React, Tailwind, and SwiftUI code for the selected frame, then compare a before and after screenshot with designos-diff."

Commands & Diagnostics

Command	Environment	What it does
`/design-os-studio:doctor`	Claude Code	Read-only diagnostic check of installed skill paths, plugin manifests, Cargo crates, and binary availability (Codex: the `design-os-studio-doctor` prompt)
`python3 scripts/self_check.py`	Terminal / CI	Deterministic offline self-check of required files, plugin manifests, crate manifests, visual proof images, the skill file, and the Zero Fake UI gate
`designos-studio [file] [flags]`	Desktop / Headless CI	Launch the native GPU/CPU Studio GUI or render headless screenshots (`--gpu --screenshot out.png`)
`designos <file> [flags]`	Terminal / Agent CLI	Apply declarative `NodeSpec` (`--apply-spec`), export Figma `.fig` (`--export-fig OUT.fig`, add `--overwrite` to replace an existing file), inspect JSON (`--inspect-json`), generate code (`--codegen`), or manage comments (`--comments-json`)
`designos-mcp --workspace <dir>`	MCP Client (`stdio`)	Expose typed MCP tools listed below (`designos_open_file`, `designos_apply_spec`, `designos_export_fig_file`, `designos_generate_code`, etc.)
`designos-diff compare <a> <b>`	Terminal / CI	Compute SSIM and anti-aliasing-aware pixel diffs between two PNGs
`./scripts/build-release.sh <ver> --local-host`	Terminal / CI	Compile all 4 binaries and package the host's native release packages (`.dmg`, `.zip`, `.deb`), `release-manifest.json`, and `SHA256SUMS`

Tool (`36` total)	Mode	Required Args	Description
`designos_get_document`	read-only	—	Summarize the current in-memory document: pages, counts, shared styles (fill, text, effect, grid) with their values, and undo state.
`designos_get_libraries`	read-only	—	List this file's local publishable assets, enabled libraries (with pinned and latest versions and update_available), and disabled libraries in the active library root.
`designos_get_metadata`	read-only	—	Return a sparse XML node hierarchy (IDs, types, names, page-space bounds, layout, component/variant props, text previews, and lint issue counts) for a page or subtree.
`designos_search_design_system`	read-only	`query`	Search components, component sets, shared styles, and variables across this file and its enabled libraries, returning ranked instance-ready references and NodeSpec examples.
`designos_list_nodes`	read-only	—	List node summaries in numeric ID order. Query matches names case-insensitively; parent_id filters direct children. Use next_offset to paginate.
`designos_get_node`	read-only	`node_id`	Read the full native node including geometry, paints, text, bindings, and child IDs.
`designos_get_variables`	read-only	—	Read variable definitions and collections. With node_id, also resolve that node's direct bindings using inherited collection modes.
`designos_generate_code`	read-only	`language`, `node_id`	Generate developer handoff code or SVG for a layer using resolved variable values. Returns source text; writes no files.
`designos_create_node`	mutating	`kind`, `parent_id`	Create one layer in a container; defaults to x/y=0, width/height=100. Supports undo. Text is only valid for text layers. Changes are in memory until saved. Content added to, removed from or moved in an instance slot is kept when the main component changes.
`designos_update_node`	mutating	`node_id`	Update specified fields of one non-page layer. Coordinates are parent-relative. Replacing text clears text runs and list ranges. Supports undo; changes remain in memory until saved.
`designos_delete_node`	mutating	`node_id`	Remove a non-page layer and its entire subtree. Supports undo; changes remain in memory until saved. Content added to, removed from or moved in an instance slot is kept when the main component changes.
`designos_list_comments`	read-only	—	List canvas comment threads enriched with resolved world coordinates, target node ID/name/kind, and top-level frame ID/name. Filter by resolved state, page_id, or node_id.
`designos_add_comment`	mutating	`text`	Pin a new comment thread to a node (with local offset x/y) or page coordinates. Supports undo.
`designos_reply_comment`	mutating	`text`, `thread_id`	Append a reply message to an existing canvas comment thread and optionally mark it resolved/unresolved. Supports undo.
`designos_resolve_comment`	mutating	`thread_id`	Mark a canvas comment thread resolved (default true) or unresolved (false). Supports undo.
`designos_apply_spec`	mutating	`spec`	Build a complete UI subtree from a declarative NodeSpec (supports EaseUI BrainWave 2.0 presets like easeui-screen/easeui-card/easeui-button-primary, $easeui.* tokens, and Auto-Layout 5.0 row/column/wrap/hug/fill) in a single atomic undoable step together with the variables it creates. Replies with bindings_created, styles_linked and warnings (for example DEPRECATED_EASEUI_TOKEN). Content added to, removed from or moved in an instance slot is kept when the main component changes. Examples: 1) Token-bound frame with auto-layout: {"parent_id":1,"spec":{"kind":"frame","name":"Hero","layout":{"direction":"column","gap":16,"padding":[24,24,24,24]},"fill":"var:Color/Surface","children":[{"kind":"text","name":"Title","text":"Welcome"}]}} 2) Component instance with variant and overrides: {"parent_id":1,"spec":{"kind":"instance","name":"PrimaryCTA","component":"Button","variant":{"Size":"lg","State":"default"},"overrides":[{"path":"Label","text":"Continue"}]}} 3) Component instance with filled slots: {"parent_id":1,"spec":{"kind":"instance","name":"SettingsCard","component":"Card","slots":{"header":[{"kind":"instance","component":"CardHeader"}],"body":[{"kind":"instance","component":"FormRow"}],"footer":false}}}
`designos_export_spec`	read-only	`node_id`	Export a node and its descendants as a declarative NodeSpec JSON tree, enriched with Dev Mode status/annotations and any canvas comment threads pinned within the subtree.
`designos_set_dev_status`	mutating	`node_id`	Set a layer's Dev Mode handoff status ('ready', 'completed', or 'clear') and/or append a developer annotation. Supports undo.
`designos_export_fig_file`	mutating	`output_path`	Export the current session document to a Figma binary .fig container (with fig-kiwi header and deflate chunks) inside the workspace.
`designos_query_xpath`	read-only	`selector`	Query layers in a page or subtree with a streaming single-pass XPath evaluator, node budget, cursor pagination, compact rows, and solver-backed linter predicates (has-problem, is-bound, has-hardcoded, @problems, @inProgress). Examples: 1) Truncated text: {"selector":"//TEXT[has-problem('text-truncated')]"} 2) Hard-coded fills inside a frame: {"selector":"//FRAME[@name='Card']//[has-hardcoded('fills/0')]"} 3) Layers an agent is working on: {"selector":"//[@inProgress]"}
`designos_lint`	read-only	—	Run the unified solver-backed geometric, text, token, and structural design linter on a page, specific node subtrees, or the active page.
`designos_get_guidelines`	read-only	—	List available design guideline topics or return the guideline document for a topic ('design-system', surface guides, 'archetypes', 'archetype:', or 'rules').
`designos_import_web_capture`	mutating	—	Import a .webcapture.json / .capture.json bundle (or inline capture JSON) into a page as an editable auto-layout frame tree in one undoable step, returning the ImportReport.
`designos_undo`	mutating	—	Undo the latest successful edit in this session; returns changed=false if the stack is empty.
`designos_lint_fix`	mutating	—	Apply deterministic fixes for auto-fixable lint findings on a page, specific node subtrees, or the active page in a single undo step.
`designos_redo`	mutating	—	Redo the most recently undone edit in this session; returns changed=false if the stack is empty.
`designos_get_screenshot`	read-only	—	Render a node, a set of nodes on the same page, or a page-space rectangular region and return it inline as MCP image content (PNG or JPEG), automatically downsized to max_long_edge (default 1024).
`designos_set_in_progress`	mutating	`node_ids`, `value`	Flag or clear root frames as in progress while an agent works on them (work state, not an undo step).
`designos_apply_batch`	mutating	`ops`	Execute 1..=200 write operations (apply_spec, insert/create, update, move, delete, set_slot, set_variables, set_style, set_in_progress) as a single atomic transaction and one undo group. Later ops may reference nodes created by earlier ops via '$prev', '@', or '@/'. With dry_run=true, computes and returns created IDs, name_to_id map, touched_roots, and touched_bounds without mutating the document or publishing a live patch. Pass idempotency_key to deduplicate retries (a key names one logical write; after a reconnect, call designos_get_node before trusting a replayed id). Note: in a live Studio session, if the editor remaps a colliding ID on replay, the reply holds the session IDs until the next canvas reload. Examples: (1) create + $prev: {"ops":[{"op":"create","parent":1,"kind":"frame","name":"Header"},{"op":"create","parent":"$prev","kind":"text","text":"Title"}]}; (2) apply_spec with as + @handle/Child update: {"ops":[{"op":"apply_spec","as":"hero","spec":{"kind":"frame","name":"Hero","children":[{"kind":"text","name":"Child","text":"Hi"}]}},{"op":"update","node":"@hero/Child","opacity":0.9}]}; (3) set_slot: {"ops":[{"op":"set_slot","node":"@card","slot":"body","fill":[{"kind":"text","text":"Body"}]}]}; (4) dry_run: {"dry_run":true,"ops":[{"op":"insert","kind":"rectangle","name":"Box"}]}.
`designos_get_design_context`	read-only	`node_id`	Return generated code in the target language, Dev Mode hints (variables with CSS/platform code syntax, linked styles, component instances/properties, annotations, dev status, Code Connect stub), and an inline screenshot (scale 0.5, max_long_edge 1024), with an XML outline fallback when the subtree exceeds 5,000 nodes or generated code exceeds 40,000 characters.
`designos_configure_session`	mutating	—	Configure per-session MCP options for the automatic mutating-call lint issues block (issues.mode: preset \| errors_only \| off, issues.preset, issues.max_items: 1..=100) and auto_fix settings. Persists across reconnects in the session directory and resets on document switch.
`designos_get_app_state`	read-only	—	Return the pre-fetched design context block. Sections: freshness, document, depth-3 target frames outline, variables summary, components and libraries, active style, and rules pack, plus session state. Pass include_selection=true ONLY when the user explicitly asks about their canvas selection.
`designos_open_file`	mutating	`path`	Import a .designos, .designos, .fig, SVG or Figma REST JSON file inside the workspace into this isolated session. Does not control an open editor. Unsaved changes require discard_changes=true.
`designos_save_file`	mutating	`path`	Save this session to a .designos file inside the workspace. Existing files are not overwritten unless overwrite=true. Parent directory must exist.
`designos_render_png`	mutating	`node_id`, `path`	Rasterize a frame or layer to a NEW .png file inside the workspace using DESIGN:OS Studio's deterministic renderer. Existing files are never overwritten.
`designos_new_document`	mutating	`name`	Start a blank document with one page. Unsaved changes require discard_changes=true.

How it works

Intent & Skill Routing — Your AI agent matches your request against skills/design-os-studio/SKILL.md frontmatter triggers, or works in the Agents panel (RailItem::Agents) with designos-mcp connected.
Progressive Context Loading — Only the concise SKILL.md router loads initially; docs/cookbook.md, docs/install.md, and crates/designos-mcp/README.md load on demand.
Deterministic Scene-Graph & Auto-Layout Compilation — designos-doc mutates the typed Document tree and runs Auto-Layout 5.0 (relayout_subtree), while designos-fig reads .fig archives and writes them as fig-kiwi version 106.
Uniform Spatial Culling & GPU Compilation — designos-render indexes world bounds and clips in a uniform spatial grid with 2048-unit cells (SceneIndex) with zoom-based level of detail, and designos-gpu compiles visible primitives into canonical GeomCache meshes and multi-pass wgpu shaders.
Visual & Test Verification — Outputs are verified via headless screenshots (--gpu --screenshot), designos-diff comparison, cargo test --workspace, which passes more than 6,000 tests in the macOS CI job, and python3 scripts/self_check.py.

User Prompt / Agents Panel / CLI / MCP Invocation
                        │
                        ▼
┌───────────────────────────────────────────────────────────┐
│ skills/design-os-studio/SKILL.md + designos-mcp (stdio)   │
│ Progressive disclosure router & typed MCP/CLI contracts   │
└───────────────────────┬───────────────────────────────────┘
                        │ mutates / queries
                        ▼
┌───────────────────────────────────────────────────────────┐
│ designos-doc (Auto-Layout 5.0) + designos-fig (.fig)      │
│ Canonical scene graph, Variables, Components & Kiwi I/O   │
└───────────────────────┬───────────────────────────────────┘
                        │ indexes & renders
                        ▼
┌───────────────────────────────────────────────────────────┐
│ designos-render (2048-unit grid) + designos-gpu (wgpu)    │
│ Zoom-based LOD, GeomCache & UI3 Phosphor Chrome           │
└───────────────────────┬───────────────────────────────────┘
                        │ verifies
                        ▼
┌───────────────────────────────────────────────────────────┐
│ scripts/self_check.py + designos-diff + doctor command    │
│ Local visual & contract verification gate                 │
└───────────────────────────────────────────────────────────┘

What loads when

design-os-studio uses progressive context disclosure so your AI agent's context window stays fast and focused:

File	Loaded when
`skills/design-os-studio/SKILL.md`	Always — routing rules, binary flags, and execution workflow
`docs/cookbook.md`	When selecting copy-paste CLI/MCP workflows, `.spec.json` roundtrips, or headless screenshot recipes
`docs/install.md` / `docs/releasing.md`	When installing or packaging `.dmg`, `.zip`, or `.deb` releases
`commands/doctor.md` / `prompts/doctor.md`	Only when running the doctor command
`llms.txt`	When indexed by AI answer engines, RAG pipelines, or repository crawlers

File structure

design-os-studio/
├── .claude-plugin/
│   ├── plugin.json                 # Claude Code plugin manifest
│   └── marketplace.json            # Claude Code marketplace catalog
├── .codex-plugin/
│   └── plugin.json                 # OpenAI Codex plugin & interface manifest
├── .agents/
│   └── plugins/marketplace.json    # Cross-agent local plugin registry
├── .factory-plugin/
│   ├── plugin.json                 # Factory / Droid plugin manifest
│   └── marketplace.json            # Factory marketplace metadata
├── crates/
│   ├── designos-doc/               # Core scene graph, NodeSpec builder, Auto-Layout 5.0
│   ├── designos-fig/               # Figma .fig (fig-kiwi, writes version 106) & REST JSON read/write
│   ├── designos-render/            # Deterministic tiny-skia CPU renderer & SceneIndex (2048-unit grid cells)
│   ├── designos-gpu/               # wgpu GPU compiler (SceneCompiler, GeomCache, WGSL shaders)
│   ├── designos-app/               # Desktop studio, Agents panel, micro-interactions, Variables & Dev Mode
│   ├── designos-library/           # Local library, 8 KB fast header probe, zero-alloc autosave
│   ├── designos-fonts/             # Bundled Inter and Roboto Mono variable fonts & async Fontsource cache
│   ├── designos-export/            # PNG/JPG/PDF/SVG exporters & Dev Mode codegen in eight languages
│   ├── designos-svg/               # SVG parser & scene-graph importer
│   ├── designos-diff/              # Pixel diff & SSIM CLI (designos-diff)
│   ├── designos-eval/              # Design evaluation harness (source tree only, not in release packages)
│   ├── designos-webcapture/        # Rendered web page capture importer
│   └── designos-mcp/               # Local stdio MCP server (designos-mcp)
├── skills/
│   └── design-os-studio/
│       └── SKILL.md                # Canonical agent skill entrypoint
├── commands/
│   └── doctor.md                   # doctor diagnostic command (Claude Code)
├── prompts/
│   └── doctor.md                   # Codex diagnostic prompt mirror
├── scripts/
│   ├── self_check.py               # Deterministic repository, crate & skill self-check
│   ├── zero_fake_ui_gate.py        # Zero-Fake-UI deterministic enforcement gate
│   ├── capture-visual-proof.sh     # Headless GPU screenshot generator
│   ├── build-release.sh            # Cross-platform release builder (.dmg, .zip, .deb, .tar.gz)
│   ├── package-macos.sh            # macOS .app + .dmg + install-cli.command packager
│   └── package.sh                  # Windows .zip + Linux .deb / .tar.gz packager
├── docs/
│   ├── index.html                  # GitHub Pages landing page
│   ├── images/                     # Screenshots and 2x captures from the app
│   ├── videos/                     # Video and GIF assets
│   ├── cookbook.md                 # Copy-paste prompt & CLI recipes
│   ├── install.md                  # Cross-platform installation guide
│   ├── releasing.md                # Release engineering & self-updater guide
│   └── llms.txt                    # GEO / LLM discovery index
├── PRIVACY.md                      # Privacy statement
├── SECURITY.md                     # Vulnerability disclosure & security policy
├── CONTRIBUTING.md                 # Contribution workflow & verification rules
├── CODE_OF_CONDUCT.md              # Contributor Covenant code of conduct
├── CHANGELOG.md                    # Release history
├── llms.txt                        # Root LLM indexing manifest
├── LICENSE                         # PolyForm Shield 1.0.0 license text
└── README.md

Quality bar & Limitations

It's working if...

python3 scripts/self_check.py prints ok: design-os-studio self-check passed (design-os-studio) and exits 0.
cargo test --workspace passes with 0 failures. The macOS CI job runs more than 6,000 tests.
A file you leave still stops using CPU: on Metal, the process used 0.01 s of CPU in 20 s idle on the Untitled UI PRO kit.
Your AI coding agent loads skills/design-os-studio/SKILL.md automatically or connects via the Agents panel / designos-mcp.

Known issues

Saving a .fig from Studio drops numbered-list formatting and writes inherited or variable-bound paints on instances as fixed values (#834). Keep the original .fig, or save as .designos, until it is fixed. v0.5.0 behaves the same.
On very large pages (100,000 layers or more), Rename layers semantically and Boost resolution in the command palette can take several seconds (#993). The next release addresses this first.
On macOS, Quit from the Dock, logout and shutdown still skip the Save changes question (#977). Cmd+Q and Quit in the app menu ask.
The macOS app is ad-hoc signed, so the first launch asks for a one-time Open Anyway in System Settings > Privacy & Security.

When not to use

Real-time multi-user cloud whiteboarding requiring hosted WebRTC multiplayer cursors without local file ownership.
Parametric 3D mechanical part modeling, gears, or STL slicing (use design-os-3d-blender instead).
Paperboard folding dielines, Kawasaki/Maekawa crease verification, and spot-color pre-press PDF separations (use design-os-origami instead).

DESIGN:OS Ecosystem

design-os-studio is the flagship native Rust/GPU studio in the DESIGN:OS ecosystem:

Engine	Live Docs	Repository	Layer
DESIGN:OS Studio	jangtrinh.github.io/design-os-studio	`jangtrinh/design-os-studio`	`rust / wgpu studio`
DESIGN:OS CLI	jangtrinh.github.io/design-os	`jangtrinh/design-os`	`cli`
Knowledge Builder	jangtrinh.github.io/design-os-knowledge-builder	`jangtrinh/design-os-knowledge-builder`	`compiler`
Figma Plugin & CLI	jangtrinh.github.io/design-os-figma-plugin	`jangtrinh/design-os-figma-plugin`	`plugin`
SVG Animation Engine	jangtrinh.github.io/design-os-svg-animation	`jangtrinh/design-os-svg-animation`	`engine`
3D Blender Agent	jangtrinh.github.io/design-os-3d-blender	`jangtrinh/design-os-3d-blender`	`3d / cad`
OPAH ONE Drone	jangtrinh.github.io/design-os-drone-showcase	`jangtrinh/design-os-drone-showcase`	`hardware`
GitHub Pages Engine	jangtrinh.github.io/design-os-github-page	`jangtrinh/design-os-github-page`	`pages`
Apple Design OS	jangtrinh.github.io/design-os-apple	`jangtrinh/design-os-apple`	`swiftui`
Agent Teacher	jangtrinh.github.io/design-os-pedagogy	`jangtrinh/design-os-pedagogy`	`pedagogy`
Origami CAD	jangtrinh.github.io/design-os-origami	`jangtrinh/design-os-origami`	`packaging`
Voice UX Architecture	jangtrinh.github.io/design-os-voice-ux	`jangtrinh/design-os-voice-ux`	`voice-ai`
Code2Flow	jangtrinh.github.io/design-os-code2flow	`jangtrinh/design-os-code2flow`	`ast / audit`
Generative UI	jangtrinh.github.io/design-os-generative-ui	`jangtrinh/design-os-generative-ui`	`runtime`

Contributing & Governance

Contributing: See CONTRIBUTING.md for pull request guidelines and verification gates (python3 scripts/self_check.py and cargo test --workspace).
Code of Conduct: Governed by CODE_OF_CONDUCT.md.
Security & Privacy: No telemetry. See SECURITY.md and PRIVACY.md.
Changelog & LLM Index: Track releases in CHANGELOG.md and machine-readable index in llms.txt.

License

Releases up to v0.5.0 were published under MIT OR Apache-2.0 and keep that license.

Third-party files keep their own licenses (full notices in THIRD_PARTY_LICENSES.md):

Bundled Fonts: Inter is © The Inter Project Authors under the SIL Open Font License 1.1 (crates/designos-fonts/assets/inter/OFL.txt). Roboto Mono is © The Roboto Mono Project Authors under the SIL Open Font License 1.1 (crates/designos-fonts/assets/roboto-mono/OFL.txt).
Icons: Studio UI3 chrome and canvas tool icons use official Phosphor Icons under the MIT License (crates/designos-app/assets/icons/phosphor/) alongside Lucide under the ISC License (crates/designos-app/assets/icons/lucide/LICENSE).
Trademarks: DESIGN:OS Studio is an independent source-available project by Jang Trinh and is not affiliated with, endorsed by, or sponsored by Figma, Inc.

If design-os-studio saves you time, a star on GitHub helps other engineers and AI agents find it.

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install Design Os Studio?

Does Design Os Studio need an API key?

What transport does Design Os Studio use?

When was Design Os Studio last checked?

Documentation

DESIGN:OS Studio (design-os-studio)

Why this exists

Why DESIGN:OS Studio?

Facts Register

Quickstart

1. Install once

2. First Safe Use & The Practical Loop

3. Ask in plain English (or invoke the Agent CLI directly)

What's new

0.6.1

0.6.0

0.5.0

0.4.0

0.3.0

What it makes

Pillar 1 — Agents panel (Claude Code · Codex · Grok · Antigravity · Gemini CLI)

Pillar 2 — Variables, Multi-Edit (Q) & Suggest Auto-Layout

Pillar 3 — Dev Mode (Shift+D / </>) Multi-Target Codegen & Box-Model Inspector

Pillar 4 — Declarative NodeSpec JSON -> Auto-Layout 5.0 -> .fig export

Figma-style micro-interactions

How large files stay fast

Installation

Native Cross-Platform Installers (macOS · Windows · Linux)

Claude Code

OpenAI Codex

Gemini CLI & Google Antigravity

OpenCode, Cursor, Windsurf & Other Agent Harnesses (Skill + designos-mcp)

Usage & Prompt Cookbook

Commands & Diagnostics

How it works

What loads when

File structure

Quality bar & Limitations

It's working if...

Known issues

When not to use

DESIGN:OS Ecosystem

Read Next & Documentation

Contributing & Governance

License

Add this server

Host a copy with our keys and logs.

Server facts

Tools

Questions

How do I install Design Os Studio?

Does Design Os Studio need an API key?

What transport does Design Os Studio use?

When was Design Os Studio last checked?

Documentation

DESIGN:OS Studio (design-os-studio)

Why this exists

Why DESIGN:OS Studio?

Facts Register

Quickstart

1. Install once

2. First Safe Use & The Practical Loop

3. Ask in plain English (or invoke the Agent CLI directly)

What's new

0.6.1

0.6.0

0.5.0

0.4.0

0.3.0

What it makes

Pillar 1 — Agents panel (Claude Code · Codex · Grok · Antigravity · Gemini CLI)

Pillar 2 — Variables, Multi-Edit (Q) & Suggest Auto-Layout

Pillar 3 — Dev Mode (Shift+D / </>) Multi-Target Codegen & Box-Model Inspector

Pillar 4 — Declarative NodeSpec JSON -> Auto-Layout 5.0 -> .fig export

Figma-style micro-interactions

DESIGN:OS Studio (`design-os-studio`)

Pillar 1 — Agents panel (`Claude Code` · `Codex` · `Grok` · `Antigravity` · `Gemini CLI`)

Pillar 2 — Variables, Multi-Edit (`Q`) & Suggest Auto-Layout

Pillar 3 — Dev Mode (`Shift+D` / `</>`) Multi-Target Codegen & Box-Model Inspector

Pillar 4 — Declarative `NodeSpec` JSON -> Auto-Layout 5.0 -> `.fig` export

Native Cross-Platform Installers (`macOS` · `Windows` · `Linux`)

OpenCode, Cursor, Windsurf & Other Agent Harnesses (Skill + `designos-mcp`)

DESIGN:OS Studio (`design-os-studio`)

Pillar 1 — Agents panel (`Claude Code` · `Codex` · `Grok` · `Antigravity` · `Gemini CLI`)

Pillar 2 — Variables, Multi-Edit (`Q`) & Suggest Auto-Layout

Pillar 3 — Dev Mode (`Shift+D` / `</>`) Multi-Target Codegen & Box-Model Inspector

Pillar 4 — Declarative `NodeSpec` JSON -> Auto-Layout 5.0 -> `.fig` export

Native Cross-Platform Installers (`macOS` · `Windows` · `Linux`)

OpenCode, Cursor, Windsurf & Other Agent Harnesses (Skill + `designos-mcp`)