DESIGN:OS Studio (design-os-studio)

_{DESIGN:OS Studio 0.6.0 on a copy of the Untitled UI PRO v8.0 Figma kit, by Untitled UI. Click for full size.}

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 DESIGN:OS · Facts · Quickstart · Safe Loop · What's new · What it makes · Micro-Interactions · Install · How it works · Commands · Limits & FAQ

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.

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.

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

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

1. Run the deterministic offline repository, crate, and skill self-check:

   python3 scripts/self_check.py

2. 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.
3. 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:

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."

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.

• 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.

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.

Check designs: Color Hard-coded colors that match a variable are listed under Color, each with a one-click Fix, plus Fix all.

Ask before acting With Ask before acting on, Claude Code's request to run a command waits in the Agents panel for Approve or Deny.

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.

• 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.

• 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.

• 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.

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.

_{Command: designos-studio untitled-ui-kit.fig --select "Avatar group" --zoom 100 --panel agents --gpu --size 1440x900 --scale 2 --screenshot docs/images/designos-agents-chat.png
The new-session picker reads each CLI's version and sign-in state from the machine that took the capture. A live session is not shown.}

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.

_{Command: designos-studio untitled-ui-kit.fig --panel variables --gpu --size 1440x900 --scale 2 --screenshot docs/images/designos-variables.png}

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.

_{Command: designos-studio untitled-ui-kit.fig --select "Avatar group" --zoom 100 --dev react --gpu --size 1440x900 --scale 2 --screenshot docs/images/designos-devmode.png}

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.

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

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.

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.

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.

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

Run these two commands inside Claude Code:

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

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

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

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"]
    }
  }
}

python3 scripts/self_check.py

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

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."

1. 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.
2. 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.
3. 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.
4. 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.
5. 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                 │
└───────────────────────────────────────────────────────────┘

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

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

• 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.

• 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.

• 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-studio is the flagship native Rust/GPU studio in the DESIGN:OS ecosystem:

• README — Architecture, facts, install options, and FAQ.
• Cross-Platform Installation Guide (docs/install.md) — macOS .dmg, Windows .zip, Linux .deb, and agent skill setup.
• Prompt & CLI Cookbook (docs/cookbook.md) — Copy-paste NodeSpec roundtrips, Agents panel workflows, and headless GPU QA recipes.
• Release Engineering (docs/releasing.md) — Cross-platform packaging and the release checklist.
• PolyForm Shield 1.0.0 License (LICENSE): source-available terms. Third-party notices are in THIRD_PARTY_LICENSES.md.

• 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.

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.