Unplanned Studio: An agentic design engineering platform for a world where everyone can code.

Main point: Unplanned Studio is a browser-based OS where designers build real React apps on shared components and tokens, with AI skills guiding them, so they can validate ideas in code without blocking engineers.

The problem

Static screens miss state, edge cases and real data, so problems surface late in engineering. Figma can't tell you a layout breaks with 400 items instead of 4.

What changed

AI made code cheap, but designers also need a safe environment with conventions built in. Around February 2026 the models got good enough to work within a real system's conventions.

What it is

A desktop-style OS in a browser tab (a Next.js app) with windows, a dock and a command palette. Apps live in src/apps/ and are registered in src/os/config/apps.tsx. Per-designer folders and automatic app discovery may come later.

What's underneath, honestly

• Figma MCP and Code Connect: the same component in Figma and in code
• A window manager built from scratch, with layout saved between visits
• Real persistence where it matters: Scribbles uses Supabase. One shared storage layer for every app is still a goal.
• Messy data testing: on the roadmap
• Tokens in CSS, browsable in Designbook. No token write-back UI yet.

The AI layer

Skills for: create a new app, check my app, first-time setup, and start a new branch (with what changed on main). The AI can also read Figma directly.

The proposal pipeline (target state)

The aim is for designers to propose components from their apps, with reviewers promoting the good ones to the shared library. This is the north star, not all built yet.

What it means for teams

Designers validate in the real stack, engineers focus on what only they can do, the library grows from real use, and onboarding takes one session. The tools don't arrive pre-packaged. You build the infrastructure. That's what I've been doing.