Own your design canvas.

Open Figma files, paste from Figma desktop, and let a coding agent build on the same canvas.

Windows · Linux · all downloads

DESIGN:OS Studio with a copy of the Untitled UI PRO v8.0 Figma kit open: the Page header component set is selected on the canvas, the Pages and Layers panels are on the left, and the Design panel with its Properties is on the right

Every number has a render.

Each card states one fact. Its back is a real capture from Studio.

  • 207,601

    nodes in one file

    The Untitled UI PRO v8.0 Figma kit opens and renders on the GPU, across 113 pages.

    DESIGN:OS Studio with the Untitled UI PRO v8.0 kit open: the Pages and Layers panels on the left, the Page header component set selected on the canvas, and the Design panel on the right
    207,601 nodes
  • 36

    MCP tools

    Coding agents edit the document you have open through designos-mcp. Built-in presets: Claude Code, Codex, Grok, Antigravity and Gemini CLI.

    DESIGN:OS Studio with the Untitled UI PRO v8.0 kit open: a Metric group frame built from a NodeSpec is selected on the canvas, with its auto layout, wrap and dimensions in the Design panel
    36 MCP tools
  • 8

    code targets

    Dev Mode prints CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML.

    DESIGN:OS Studio in Dev Mode with the Avatar group component set selected and the Inspect panel on the right showing Ready for dev, a component playground, MCP link and Code Connect
    8 code targets

Five layers, one window.

Studio opens your .fig file in a native window. The canvas draws it on the GPU, the Layers panel and the inspector edit it, and the Agents rail opens a coding agent beside your work.

DESIGN:OS Studio with the Untitled UI PRO v8.0 kit open: the left rail and the Layers panel on the left, the Input field frame selected on the canvas at 4888 by 2584, the Design inspector on the right and the tool bar along the bottom
  1. The .fig fileRead and written natively. This one, the Untitled UI PRO v8.0 kit, has 207,601 nodes.
  2. CanvasDrawn on the GPU with wgpu. When nothing changes for a quarter second, it draws one full-quality frame.
  3. LayersPages and layers, as the file has them.
  4. InspectorDesign, Prototype and Dev Mode, with code in 8 targets.
  5. Agents railOpens the Agents panel for Claude Code, Codex, Grok, Antigravity and Gemini CLI.

01 Figma

Bring your Figma in.

  • Paste from Figma desktop. Press Cmd+V on the canvas. Images come along.
  • Read and write .fig files. Open a Figma file, edit it, save it back.
  • Styles and variables travel with the file. A .fig file brings its effect styles, grid styles and variable modes with it.
DESIGN:OS Studio with the Untitled UI PRO v8.0 kit open on the Buttons page: the Button component set is selected on the canvas, with its variants and properties in the Design panel

02 Agents

Let an agent build with you.

  • 36 tools through designos-mcp. Built-in presets for Claude Code, Codex, Grok, Antigravity and Gemini CLI.
  • Live sessions in the Agents panel. Each CLI uses its own sign-in, keeps its sessions across restarts, and asks before acting by default.
  • Every agent turn is one undo step. Review what changed and keep it or revert it, while your view stays where it was.
DESIGN:OS Studio Agents panel beside an Untitled UI canvas with the Avatar group component selected, showing Claude Code, Codex, Grok, Antigravity and Gemini CLI in the New session list

03 Code

Ship the code.

  • Dev Mode prints 8 targets: CSS, Tailwind, React, SwiftUI, UIKit, Compose, Android XML and HTML.
  • Inspect tokens and layout. Read the CSS box-model diagram, resolved variables, slot parameters and Ready for dev status.
DESIGN:OS Studio Dev Mode on the Untitled UI kit with the Avatar group component set selected and the Inspect tab open on the right

Built for big files.

207,601 nodes on 113 pages

That is the Untitled UI PRO v8.0 Figma kit. The canvas draws it on the GPU through wgpu.

Large pages render at low zoom, and after a quarter second without changes the canvas draws one full-quality frame.

One page of the Untitled UI PRO v8.0 kit zoomed out to 6% on the DESIGN:OS Studio canvas, with all 28 Page header frames rendered in a grid
One page of the kit, zoomed out to 6%.

What’s new.

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

0.7.5

  • Colours, type and scale. The chrome moves to a neutral dark palette with Studio orange for brand actions and an orange keyboard focus ring. Body text is 12 px with three text weights, corner radii are 6, 8, 12 and 16 px, and rows, fields and text grow only where the new scale says. Regions and panel widths stay where they were.
  • Controls. Buttons, fields, checkboxes, toggles, tabs, menu items, badges, tooltips and the rest paint from one shared look. A keyboard-focused control draws a 2 px focus ring in every state, menu items sit inset in their panel, and a switch shorter than 24 px takes clicks in a 24 px band.
  • Window and left panel. The title bar, file tabs, left rail, floating toolbar, rulers and shell menus use the new look, with a 4 px press band beside each ruler. Pages, the Dev section and Layers keep their 240 px width and section order with 32 px rows and buttons, Studio orange marks live state, and a click on a page row leaves the keyboard on the canvas.
  • Popovers, dialogs and the command bar. Command bar rows are 36 px, Enter runs the row you picked with the keyboard, and in a small window the bar scrolls its rows instead of covering the bottom toolbar. Dialogs use 14 px text and 40 px buttons, and brand buttons carry a dark label on orange.
  • Home. Home uses the same dark palette, + Design file is Studio orange with a dark label instead of blue, and the sidebar, header, filter bar, file grid and Trash stay where they were.
  • Assets, Variables, Libraries and Check designs. The Assets search field shows a focus ring only while it has focus, Variables cells draw nothing at rest and booleans are switches, Libraries shows change labels such as New and Changed as status chips, and Check designs rules use checkboxes with a segmented contrast choice.

0.7.0

  • Styles. Delete a style (Delete style) while linked layers keep its resolved values and variable bindings, group styles by / prefix into renameable folders (Rename folder) in Figma's order, edit style descriptions (Description) and read them as hover tooltips in style pickers and the colour picker's Libraries tab, and keep text alignment on each text layer while text styles carry paragraph indent, list spacing and leading trim.
  • Effects and shadows. Drop shadows and inner shadows take a blend mode (Blend), the shadow cut-out of a frame with no fill and Show behind off follows its visible children's shapes, and the Effects section's + menu caps each effect type (8 drop shadows, 8 inner shadows, 1 layer blur, 1 background blur) without trimming imported effects.
  • Export and files. PNG and SVG export bounds match Figma for shadows, strokes and groups; after an export, a toast shows where the file went with Show in folder (using Downloads when no save dialog is available) and never overwrites an existing file (Card-1.png, Card-2.png, …); and atomic saves keep macOS ACLs and extended attributes while leaving your own .tmp files alone.
  • Left rail and panels. The left rail is icon-only with hover and keyboard-focus tooltips (Main menu, File, Agents, Assets, Tools, Variables, Plugins, Updates & Shortcuts), and a draggable separator between Pages and Layers resizes the Pages list and remembers its height.
  • Agents panel and canvas. Expanding the changed layers card with Show all scrolls inside the Agents panel with Show less while keeping Revert and Keep reachable, and an interrupted move on the canvas keeps the last pointer position.
  • CLI and MCP. A --screenshot run with unsaved edits closes after writing the PNG without stopping on Save changes to {name}?, and --apply-spec, designos_apply_spec and designos_apply_batch centre hugging button labels inside NodeSpec presets and aligned frames while designos_create_node and designos_update_node keep explicit text box sizes.

0.6.5

  • Starter file. A new library gets a Getting started project with DESIGN-OS Studio Starter, and an existing library gets it once on its first launch of 0.6.5; files you already have are not touched. Open starter sample opens a fresh copy, launching with no file argument opens Home, and the older samples, --seed-library, release --fixture and the old examples folder are removed.
  • Variables. designos FILE --export-variables OUT.json --format dtcg --mode MODE exports one variable mode across the file’s collections (or --collection) as a single self-contained DTCG .tokens.json file with default-mode fallback, --resolve-aliases, and --color-format (hex or object), and multi-file DTCG exports keep same-named collections distinct.
  • Agents panel. Tabs clear their scrollback when an agent redraws on a UI zoom so output no longer repeats, quiet Codex turns change from Working… to Done after 1.5 s and hide Stop, and the approval banner shows Show prompt to focus the current waiting tab or Open tab to switch to another waiting tab.
  • Canvas and .fig import. Frame, component and instance labels repaint after an agent rename and cut to fit with … like Figma; hug and fixed-width NodeSpec text is measured with the text renderer; .fig files with top-bit 64-bit values import and export cleanly; and icons and vectors inside resized component instances scale with the instance while keeping their strokes.
  • Styles and performance. Deleted and orphan style records from imported .fig files are hidden from style pickers, Assets, layer chips and MCP listings, while unnamed listed styles show Unnamed fill style, Unnamed text style, Unnamed effect style or Unnamed grid style; large multi-layer edits finish faster by recording only the layers that changed.
  • CLI and MCP. --select accepts id:<n>, fig:<figma id>, name:<text>, none or a layer name, supports --zoom fit, and exits 2 without writing on a miss; Home › Import › Enter a path… opens ~/ and file:// paths and starts toast timers on first paint; MCP imports enforce a 512 MiB FILE_TOO_LARGE limit, and MCP file writes return INVALID_NAME and NAME_TOO_LONG.

0.6.3

  • Agents panel. Hook outputs (agent-status.json, agent-events.jsonl, turn-marks.jsonl, claude-transcript.json) and Claude’s prompt-hook replies live in a Studio-private hook-out folder outside the session folder, $TMPDIR, /tmp, /var/tmp and every folder an agent CLI is granted, and the turn-mark hook reads doc-patch.jsonl size with stat -L instead of opening it.
  • CLI and MCP. --screenshot on a missing, empty or corrupt file exits 1 with an error message and writes no PNG. --apply-spec, designos_apply_spec and designos_apply_batch report invalid NodeSpec fields in plain words instead of serde type errors, and the docs note that Ask covers agent tabs started from Studio while your own designos CLI and external designos-mcp hosts approve their own calls.
  • Linux. Home › Import opens the file chooser when org.freedesktop.portal.Desktop starts on first use or when zenity is installed, and when no file dialog can open it names the cause and offers Enter a path….

0.6.2

  • Agents panel. Ask-mode approvals, Claude’s hooks and MCP config, and session folders for unsaved files live in Studio’s own data folder, and Studio and designos-mcp refuse links and FIFOs in session files. The skill and agent files no longer include the document or page name.
  • Gemini, Grok and Antigravity. Gemini CLI tabs in Ask mode show Needs approval with an Open tab button and hold the composer while Gemini’s confirmation prompt is on screen. Ask-mode Grok and Antigravity tabs move non-Studio session configs aside before starting, and Grok never evaluates a .envrc.
  • Styles and Properties. Create a text style from a text layer in the Typography section (Create text style), pick styles from enabled libraries when the file has none of its own, and export a page from the page panel’s Export section.
  • Components and Dev Mode. Syncing a main component keeps its instances’ own layer names. Dev Mode keeps each code line on one row with horizontal scrolling, grows the MCP prompt box to fit, and escapes \, ", \( and control characters in SwiftUI strings.
  • Command palette. Rename layers semantically and Boost resolution take about a second per click on a very large page, where they took about four.
  • CLI and MCP. designos-diff --version prints the version. MCP file writes (designos_save_file, designos_render_png, designos_export_fig_file) refuse links, control or bidi characters, and names over 255 bytes; designos_export_fig_file refuses an existing file unless overwrite is set; and outside-workspace errors no longer echo the path.

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

Screenshots retaken with the 0.7.5 release 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.

DESIGN:OS Studio Check designs panel open on the Buttons/Button component set of the Untitled UI kit: the Color group lists hard-coded fills such as Fill #FFFFFF that match the kit's white variables, a Contrast group follows, and a Fix all button sits at the top
Check designs: Color Hard-coded colors that match a variable are listed under Color, with Fix all at the top.
DESIGN:OS Studio Agents panel in ask mode: an approval card reading Claude Code wants to run Bash, with the command git status --short, a 1 of 3 count and Deny and Approve buttons, beside the Untitled UI Avatar group on the canvas
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.

Read the full changelog

Install.

Download Studio 0.7.6

Verified on macOS. The Windows and Linux packages are built by the same release workflow but are not verified before release. On a Mac, the first launch needs Open Anyway once. All downloads and checksums

Add the skill to your coding agent

Claude Code

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

Codex

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 and 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

Questions.

What is DESIGN:OS Studio?

A native desktop design editor written in Rust. It draws on the GPU with wgpu, opens and saves Figma .fig files, and bundles a local server so coding agents can edit the open document.

Can I use my Figma files?

Yes. Studio opens and saves .fig files. You can also copy layers in Figma desktop and paste them onto the Studio canvas with Cmd+V. They land centered in the view as one undo step, images included.

How do coding agents work with it?

Studio bundles designos-mcp, a local MCP server, and an Agents panel with built-in presets for Claude Code, Codex, Grok, Antigravity and Gemini CLI. Agent edits replay into your open document, wait while you drag, and each one is its own undo step.

Which systems does it run on?

macOS, Windows and Linux. Releases are verified on macOS; the Windows and Linux packages are built by the same release workflow but are not verified before release. On a Mac, the first launch needs Open Anyway once.

What is the license?

PolyForm Shield 1.0.0: free to use and modify, including for commercial work, but you may not resell it or offer a product that competes with it. The source is on GitHub.

Own your design canvas.

Source-available. macOS, Windows and Linux.

Listed on

  • Listed on mcpservers.org
  • Fazier badge
  • Listed on Aback Launch