# 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

--- ## 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 `. | | **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 --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](https://github.com/jangtrinh/design-os-studio/issues/834): 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 --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 `. 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 --export-variables ` | | **Dev Mode** | Built-in Dev Mode (`Shift+D`) with code in CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML. | `designos --select --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`](https://jangtrinh.github.io/design-os-figma-plugin/)) or a hosted Penpot instance instead. --- ### Facts Register | Instrument Field | Specification | Verification / Notes | | :--- | :--- | :--- | | **Repository** | [`jangtrinh/design-os-studio`](https://github.com/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](https://github.com/jangtrinh/design-os-studio/issues/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: ```bash # 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 --local-host ``` ### 2. First Safe Use & The Practical Loop **First safe use (three bounded, non-destructive steps):** 1. **Run the deterministic offline repository, crate, and skill self-check:** ```bash 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: ```bash 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: ```bash 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](CHANGELOG.md). The newest is 0.6.1, a short list. [v0.6.0](https://github.com/jangtrinh/design-os-studio/releases/tag/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.

_{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. ### 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`)

DESIGN:OS Studio Agents panel beside an Untitled UI canvas with the Avatar group component selected. A New session list shows Claude Code, Codex, Grok, Antigravity and Gemini CLI with their versions and sign-in states, then Other CLI and Shell. Below it are sample prompts and the Ask for changes composer, under a chip that names the selection
_{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. ### Pillar 2 — Variables, Multi-Edit (`Q`) & Suggest Auto-Layout

DESIGN:OS Studio Variables view on the Untitled UI kit. The left column lists the file's variable collections: _Primitives, Color modes, Containers, Widths, Spacing, Radius and Typography, then collections from a library. The _Primitives collection is open on the Colors group and shows the Base and Neutral color scales with their hex values
_{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. ### Pillar 3 — Dev Mode (`Shift+D` / ``) Multi-Target Codegen & Box-Model Inspector

DESIGN:OS Studio Dev Mode on the Untitled UI kit with the Avatar group component set selected. The Inspect tab on the right shows the Ready for dev button, a component playground with its properties, annotations, dev links, the MCP section with a Copy link button, Code Connect and Layer properties
_{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 --select --codegen ` prints the same code, and `--dev ` 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): ```bash 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](https://github.com/jangtrinh/design-os-studio/issues/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`](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--macos.dmg` (`designos.app` + `install-cli.command`) | `designos--macos-universal.tar.gz` | `designos-studio`, `designos`, `designos-mcp`, `designos-diff` | | **Windows** (x64) | `designos--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__amd64.deb` (`apt install`, `.desktop`, `.designos`/`.fig` MIME) | `designos--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. ```bash # Build & package native installers + release-manifest.json + SHA256SUMS locally into dist/ ./scripts/build-release.sh --local-host ``` ### Claude Code Run these two commands inside Claude Code: ```text /plugin marketplace add jangtrinh/design-os-studio /plugin install design-os-studio@design-os-studio ``` ### OpenAI Codex Install to your personal Codex skills directory: ```bash 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 ```bash 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`) ```bash 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`: ```json { "mcpServers": { "design-os-studio": { "command": "/ABSOLUTE/PATH/TO/designos-mcp", "args": ["--workspace", "/ABSOLUTE/PATH/TO/designs"] } } } ```

Verify or uninstall

**Verify installation:** ```bash 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:** ```bash rm -rf ~/.claude/skills/design-os-studio ~/.codex/skills/design-os-studio ~/.gemini/skills/design-os-studio ~/.agents/skills/design-os-studio ```