jangtrinh/design-os-studio

_{70-second film. Click to watch it with sound.}

Native GPU-accelerated interface design studio, enterprise Figma .fig v106 binary read/write engine, Agentic PTY Chat UI, Live Variables & Multi-Edit (Q), and 22-tool Model Context Protocol server written in Rust.

Open and save 723,136-record enterprise Figma .fig v106 binary archives in ~1.5s with 0.0% idle CPU on Metal, DirectX 12, and Vulkan (wgpu + tiny-skia). Execute all 100 / 100 Figma A-to-Z Micro-Interactions (#1..#100) natively on canvas, run Claude Code (claude), OpenAI Codex (codex), Antigravity CLI (agy), Gemini CLI (gemini), and Grok CLI (grok) directly inside the native Agentic PTY Chat UI with zero paid external API keys, switch live Design Variables across Light and Dark modes with Multi-Edit (Q) and Suggest Auto-Layout (⇧A), generate multi-target Dev Mode code (React, Tailwind, CSS, SwiftUI, Jetpack Compose, Flutter, Rust egui), and automate headless GPU visual QA from any terminal or CI pipeline.

Why DESIGN:OS · Facts · Quickstart · Safe Loop · New in 0.3.0 · What it makes · Micro-Interactions · Install · How it works · Commands · Limits & FAQ

Browser-wrapped Electron design tools choke on very large enterprise files, lock .fig binary authoring behind proprietary cloud servers, and force AI coding agents to scrape large, noisy REST JSON payloads without direct canvas write-back. design-os-studio is a local-first GPU studio written in Rust (wgpu + tiny-skia) with native fig-kiwi v106 binary read/write, Figma-style micro-interactions, an embedded Agentic PTY Chat UI for your existing CLI subscriptions (claude, codex, agy, grok), Live Variables Mode Switching & Multi-Edit (Q), and a 22-tool stdio MCP server.

Where traditional platforms win, and it is not close: Browser-hosted multiplayer whiteboarding with simultaneous live WebRTC cursors, enterprise cloud org SSO/SCIM admin consoles, and hosted comment email/Slack notifications. If your workflow requires real-time cloud multiplayer without local git or file ownership, use Figma Cloud (paired with our live bridge design-os-figma-plugin) or a hosted Penpot instance instead.

Install the AI agent skill plugin in Claude Code / Codex, download a release package (.dmg, .zip, .deb, .tar.gz), or build all 4 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 & launch 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 0.3.0 --local-host

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

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

   python3 scripts/self_check.py

2. Apply a declarative NodeSpec JSON onto a document and roundtrip to a standard Figma .fig v106 binary archive:

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

3. Capture a headless GPU verification screenshot and run perceptual SSIM diffing:

   designos-studio out.fig --gpu --size 1600x1000 --screenshot actual.png
   designos-diff compare docs/images/designos-agent-spec.png actual.png --out diff.png

The Practical Agentic Loop:

Open your project in your AI coding agent (or inside the Studio's Agents left-rail PTY Chat panel) and describe the outcome you need:

"Apply examples/specs/easeui-agent-console.spec.json onto the DESIGN:OS Studio canvas, export a verified Figma .fig v106 binary archive to out.fig, and capture a 1600x1000 GPU screenshot."

"Open the Design Variables modal (--panel variables), switch the active token collection from Light to Dark mode, batch-edit matching layers with Multi-Edit (Q), and resolve all open canvas pin-comments."

"Inspect the API Docs frame in Dev Mode, generate production React + Tailwind + SwiftUI code, and run designos-diff to verify 0.00% visual regression."

Real screenshots of the editor, captured headlessly with designos-studio --screenshot (2x; the two Dev Mode shots are 1.5x so the whole Code panel fits). Click an image for full size. The 70-second promo film plays on the project site.

Effect and grid styles Local styles list with two effect styles and two grid styles.	Edit a style The Edit style panel for the Shadow/Card effect style that the selected card uses.
Auto layout: Space evenly and vertical wrap Each wrapped column spreads its own items evenly.	Text wrap: Balance next to Auto Balance (right) evens out the lines that Auto (left) leaves with a one-word last line.
Dev Mode: UIKit A variable prints as its iOS code syntax, Theme.Color.textPrimary.	Dev Mode: Android XML The same variable prints as its Android code syntax, @color/text_primary.
Scale: Untitled UI PRO v8.0 Figma kit, by Untitled UI 208,610 nodes on 113 pages when opened. Shown: the Input field frame.

Every artifact produced by design-os-studio is backed by deterministic scene-graph compilation (SceneCompiler + GeomCache), native fig-kiwi v106 binary serialization, and headless GPU/CPU visual verification (--screenshot + designos-diff).

_{Command: designos-studio --fixture showcase --panel agents-chat --size 1440x900 --scale 2 --screenshot docs/images/designos-agents-chat.png}

Inside the Figma UI3 Agents Left Rail (RailItem::Agents), design-os-studio wraps your own local CLI subscription (claude, codex, agy, grok, or $SHELL) inside a real portable-pty + vt100 pseudo-terminal (crates/designos-app/src/terminal.rs). It renders clean User/Assistant chat turn bubbles (AgentChatTurn), strips ANSI control noise (strip_ansi_codes), attaches active Canvas selections + pin-comments with one click (+), detects inline NodeSpec JSON blocks, and applies generated layouts directly onto the live Document with 1-step Undo.

_{Command: designos-studio --fixture showcase --panel variables --size 1440x900 --scale 2 --screenshot docs/images/designos-variables.png}

Inspect and switch primitive, semantic, and component token collections (COLOR, FLOAT, STRING, BOOLEAN) across Light and Dark modes in real time (= / Variables modal), press Q (⌘E) to enter Multi-Edit across matching sibling layers across frames, and press ⇧A (Ctrl+Shift+A) to run Suggest Auto-Layout heuristic row/column/wrap inference with instant relayout.

_{Command: designos-studio --fixture showcase --select "Hero" --dev react --dev-demo --size 1440x900 --scale 2 --screenshot docs/images/designos-devmode.png}

Switch into Dev Mode (Shift+D or </>) to inspect CSS box-model padding/margin/border diagrams, resolved variable tokens, handoffStatusMap (Ready for dev badges), and copy-ready code generated deterministically in CSS, Tailwind, React (JSX), SwiftUI, UIKit, Jetpack Compose, and Android XML.

_{Command: designos app.designos --apply-spec examples/specs/easeui-agent-console.spec.json && designos app.designos --export-fig out.fig}

AI agents author compact, diffable NodeSpec JSON (examples/specs/easeui-agent-console.spec.json) rather than guessing pixel coordinates. designos-doc computes exact recursive Auto-Layout 5.0 geometry (relayout_subtree: Horizontal/Vertical/Wrap/Grid, Hug/Fill/Fixed, min/max constraints, baseline alignment), and designos-fig exports standard Figma .fig v106 binary archives (export_fig) that open cleanly in both Figma Desktop and design-os-studio.

The Studio targets the small, tactile interactions Figma users expect on the canvas. The table groups the project's own reference list (#1..#100) and describes scope. Not every item has an automated test: launch_e2e_proves_100_figma_micro_interactions_end_to_end drives eight of them (#15, #16, #18, #32, #77, #78, #81, #82).

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 and tested by their users. Please report anything that breaks.

# Build & package native installers + release-manifest.json + SHA256SUMS locally into dist/
./scripts/build-release.sh 0.3.0 --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 22-tool 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, skills/design-os-studio/SKILL.md activates automatically 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 & Roundtrip .spec.json -> .fig v106 Binary

"Apply examples/specs/easeui-agent-console.spec.json onto the DESIGN:OS Studio canvas, export a verified Figma .fig v106 binary archive to out.fig, and capture a 1600x1000 GPU screenshot."

Switch Variable Modes, Multi-Edit (Q) & Resolve Canvas Pin-Comments

"Open the Design Variables modal (--panel variables), switch the active token collection from Light to Dark mode, batch-update matching layers with Multi-Edit (Q), and resolve all open canvas pin-comments."

Export Multi-Target Code & Run Perceptual Diffing

"Inspect the API Docs frame in Dev Mode, generate React, Tailwind, and SwiftUI code, and run designos-diff against our baseline screenshot."

1. Intent & Skill Routing — Your AI agent matches your request against skills/design-os-studio/SKILL.md frontmatter triggers or connects directly via the embedded Agents PTY Chat panel (RailItem::Agents) and designos-mcp.
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 and writes standard fig-kiwi v106 .fig binary archives.
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 & Epistemic Gate Verification — Outputs are verified via headless GPU screenshots (--gpu --screenshot), designos-diff SSIM comparison, cargo test --workspace (more than 2,800 tests), and python3 scripts/self_check.py.

User Prompt / Agentic PTY Chat / CLI / MCP Invocation
                        │
                        ▼
┌───────────────────────────────────────────────────────────┐
│ skills/design-os-studio/SKILL.md + designos-mcp (22 tools)│
│ Progressive disclosure router & typed MCP/CLI contracts   │
└───────────────────────┬───────────────────────────────────┘
                        │ mutates / queries
                        ▼
┌───────────────────────────────────────────────────────────┐
│ designos-doc (Auto-Layout 5.0) + designos-fig (.fig v106) │
│ 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           │
│ Zero-telemetry 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 v106 binary) & 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/               # UI3 desktop studio, micro-interactions, PTY Chat, Variables & Dev Mode
│   ├── designos-library/           # Local library, 8 KB fast header probe, zero-alloc autosave
│   ├── designos-fonts/             # Bundled Inter variable font & async Fontsource cache
│   ├── designos-export/            # PNG/JPG/PDF/SVG exporters & 5-target Dev Mode codegen
│   ├── designos-svg/               # SVG parser & scene-graph importer
│   ├── designos-diff/              # Perceptual SSIM & structural diff CLI (designos-diff)
│   └── designos-mcp/               # 22-tool local stdio MCP server (designos-mcp)
├── skills/
│   └── design-os-studio/
│       └── SKILL.md                # Canonical agent skill entrypoint
├── commands/
│   └── doctor.md                   # /doctor diagnostic slash command
├── prompts/
│   └── doctor.md                   # Codex diagnostic prompt mirror
├── scripts/
│   ├── self_check.py               # Deterministic repository, crate & skill self-check
│   ├── zero_fake_ui_gate.py        # 14/14 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/                     # Verified GPU visual proof & Retina 2x Micro-Interaction captures
│   ├── videos/                     # Launch and promo films and 12 micro-interaction clips
│   ├── 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                      # Zero-telemetry & local-first privacy commitment
├── 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                         # Dual MIT / Apache-2.0 license summary
├── LICENSE-MIT                     # Full MIT License text
├── LICENSE-APACHE                  # Full Apache-2.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 its more than 2,800 unit, golden, and parity tests across all 11 Rust crates with 0 failures (macOS CI).
• Enterprise .fig v106 files (723,136 Kiwi records / 112,474 nodes) load and render in ~1.5s on Metal/Vulkan/DX12 with 0.0% static viewport CPU usage.
• Your AI coding agent loads skills/design-os-studio/SKILL.md automatically or connects via the Agents Left-Rail PTY Chat UI / designos-mcp with zero external telemetry (guaranteed by PRIVACY.md).

• 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 open-source ecosystem:

• README — Architecture, comparison table, 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, PTY Chat workflows, and headless GPU QA recipes.
• Release Engineering (docs/releasing.md) — Cross-platform packaging and the release checklist.
• Dual MIT OR Apache-2.0 License (LICENSE) — Permissive open-source licensing and third-party notices.

• 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: Zero telemetry — see SECURITY.md and PRIVACY.md.
• Changelog & LLM Index: Track releases in CHANGELOG.md and machine-readable index in llms.txt.
• License: Dual-licensed under MIT or Apache-2.0 (LICENSE) © Jang Trinh.
  • Bundled Fonts: Inter is © The Inter Project Authors under the SIL Open Font License 1.1 (crates/designos-fonts/assets/inter/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 open-source 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.