# Design Studio A prototype sandbox for designers and product managers who build. Create connected prototypes and reusable systems that bring together components, theme, context, and skills. Work with your coding agent, your code, and your context, individually or with a team. Design Studio is open source and built on open file formats you can extend. Product: Design Studio Starter repository: https://github.com/itspatmorgan/design-studio-starter Published Design Studio demo: https://itspatmorgan.com/design-studio-starter/ License: MIT Creator: Patrick Morgan ## Build prototypes Build the interface, map the flow, explore alternatives, and capture the decisions behind them. Keep working views, diagrams, canvases, and documents together so the user and agent can develop the whole idea. Create and edit locally with the agent, then publish a Design Studio for others to explore interactive prototypes through a shared viewing link. Editing stays local. ## Make it yours Create distinct systems for different products or teams and reuse each across multiple prototypes. Each system brings together Context and Skills as instructions, and Theme, Components, and Assets as its toolkit. Assign the appropriate system to a prototype to give the agent the foundation and guidance for its work. The user can start with included examples and develop their system as they go. Curate a system around your idea: describe what you want to prototype. Your agent helps select and bring together components from shadcn/ui or Untitled UI, then shape the theme around your work. Bring your own design system: share your team’s React components and theme. Your agent reviews the source, identifies adaptations and dependencies, and proposes an import plan for review before bringing the system into Design Studio. ## Capture context Keep shared product knowledge and design principles in system context. Save the brief, assumptions, decisions, and open questions for an individual prototype as Markdown documents alongside its other artifacts. The user and agent can edit the same document. Choose the artifact types that help answer the question; no fixed sequence is required. ## Build together A published link lets people try interactive prototypes and browse artifacts. Share the repository when teammates or engineers need to continue from the code and context. Each contributor builds locally. Team mode scopes source editing; it does not control access to the published viewer. ## Work on your own terms Design Studio is open source. The user owns the code and the work they create. Prototypes use React and TypeScript, canvases use Excalidraw, diagrams use Mermaid, and documents use Markdown. These source files can move with the user. Use Design Studio through a plugin in ChatGPT Codex, Claude Code, or Cursor, or set it up directly from GitHub. The agent helps build and edit in a local sandbox. Defaults are shaped by real product and marketing work. Bring your own components, change the interface, and adapt the code, folder structure, and workflows to fit your team. ## Create a Design Studio Set up a local Design Studio to create and edit with your agent. For a viewing example, explore the published demo: https://itspatmorgan.com/design-studio-starter/ The Feedback Inbox sample includes a guided tour of connected artifacts: https://itspatmorgan.com/design-studio-starter/prototypes/ccncfpcyaa1hvjts The published demo is read-only for artifact editing, but its prototypes are interactive. Published Design Studios share designs for others to explore. Run a local copy to edit artifacts and build with your coding agent. Use a desktop coding app with local access. Each request covers setup through opening your local Design Studio. A restart, reload, or new chat may still be needed. The four setup procedures are documented at: https://github.com/itspatmorgan/design-studio-starter/blob/main/SETUP.md Plugins are in beta and distributed through local/repository installs. Do not imply a reviewed public-directory listing. ## 1. ChatGPT Codex plugin ### Set up locally Copy this prompt into a local Codex chat to install the plugin and create your Design Studio. Your agent will guide you through any restart or new chat needed. > Install the Design Studio plugin locally for Codex from https://github.com/itspatmorgan/design-studio-starter. Read SETUP.md and follow its Codex plugin installation and linked create-studio instructions. Handle the technical steps, preserve my other plugins and existing files, and create my Design Studio on this computer. Open its local preview and help me continue working in its folder. Guide me through any restart, plugin activation, or new chat needed. ## 2. Claude Code plugin Copy this prompt into a local Claude Code chat to install the plugin and create your Design Studio. Choose No folder for initial setup if available; your agent will guide you into your Design Studio folder. In the Claude desktop app, choose **Code**, then select **Local**. > Install the Design Studio plugin locally for Claude Code from https://github.com/itspatmorgan/design-studio-starter. Read SETUP.md and follow its Claude Code local plugin installation and linked create-studio instructions. Handle the technical steps, preserve my other plugins and existing files, and create my Design Studio on this computer. Open its local preview and help me continue working in its folder in Claude Desktop’s local Code view. Guide me through any restart, plugin activation, or new session needed. ## 3. Cursor plugin Copy this prompt into a local Agent chat in Cursor to install the plugin and create your Design Studio. Your agent will guide you through any reload needed. If plugin imports are restricted, use Direct from GitHub. > Install the Design Studio plugin locally for Cursor from https://github.com/itspatmorgan/design-studio-starter. Read SETUP.md and follow its Cursor local plugin installation and linked create-studio instructions. Handle the technical steps, preserve my other plugins and existing files, and create my Design Studio on this computer. Open its local preview and help me continue working in its folder. Guide me through any window reload, plugin activation, or new Agent chat needed. ## 4. Direct from the source repository Copy this prompt into your local coding agent to create Design Studio directly from GitHub. No plugin is required, so this also works when plugin installs are restricted. For manual setup without an agent, follow [manual installation](https://github.com/itspatmorgan/design-studio-starter/blob/main/SETUP.md#manual-installation): create a repository from the GitHub template or download the source, install mise, then run mise install, mise exec -- pnpm install, and mise exec -- pnpm dev in the repository folder. Open the local URL printed in the terminal. > Help me install Design Studio from https://github.com/itspatmorgan/design-studio-starter. Read its SETUP.md and follow the linked create-studio instructions. Handle downloading, setup, and opening it for me. Verify that setup will save files on my computer and help me choose the local folder. Preserve anything already there. Show me the running Design Studio and help me continue working in its folder. ## What happens after setup Your agent may need permission to download tools or create the folder. It handles the technical steps and tells you when it needs help. Your Design Studio and all its source files live in the local folder you confirm with your agent. It recommends a location based on your computer and permissions, preserves existing folders, and shows the actual absolute path and local preview URL. Continue working in that Design Studio folder, not in the plugin's files. A GitHub account is optional for personal use. Product and Marketing are example systems. Feedback Inbox and Design Studio Marketing are example prototypes for learning. Explore them, then ask your agent to customize, replace, or remove them for your own needs. Keep Studio, the application's system. New Design Studios start in Personal mode. When you are ready to collaborate, switch to Team in Design Studio settings. This enables Contributors & Permissions so you can assign Admins and system access. To return later, open the same Design Studio folder and ask **“Open my Design Studio.”** Plugin updates do not automatically upgrade an existing Design Studio. ## Publish for your team Hosting is optional and configured separately from the local authoring environment. Open the existing Design Studio folder and ask the agent to assess ChatGPT Sites, GitHub Pages, Netlify, Vercel, or your team’s static-site host for your tools, accounts, and intended audience. GitHub Pages can be used with any of the local agent setup paths; publishing workflows are not preconfigured in agent-created working Design Studios. Read the owned repository’s AGENTS.md and current publishing guidance before configuring hosting; read DEPLOY.md if present. Preserve existing provider identities and deployment settings. Sites requires native Sites tools and the publish-studio procedure. Guide the user through account sign-in or authorization. Build the static viewing site, configure the host's base path and direct-link routing, and verify a direct prototype link and reload. Choose access settings appropriate for the work being shared. Published prototypes remain interactive, but source editing and the agent stay local. Local changes appear on the viewing site after publishing a new build. Publishing source: https://github.com/itspatmorgan/design-studio-starter/blob/main/src/platform/context/publishing.md ## Stay involved Share work made with Design Studio and tag Patrick Morgan at https://x.com/itspatmorgan. Feedback and contributions: https://github.com/itspatmorgan/design-studio-starter Follow Unknown Arts for experiments and ideas about building with agents: https://www.unknownarts.com ## Work in Design Studio Read the owned Design Studio folder's README.md and AGENTS.md before editing files. Follow its getting-started guide to configure Design Studio identity and contributor details. Resolve the prototype's assigned system before changing its design or implementation. Bring the user's components, tokens, and design context into their own system. Keep the reasoning alongside the artifacts. Review working prototypes and their states in the browser. The local Design Studio Guide is available at /documentation/manual. This is a route in the running Design Studio app, not on Patrick's website. Detailed platform contracts live at /documentation/context in the same app. ## Sources Repository and current setup instructions: https://github.com/itspatmorgan/design-studio-starter#readme Getting-started source: https://github.com/itspatmorgan/design-studio-starter/blob/main/src/modules/documentation/pages/index.md Landing page: https://itspatmorgan.com/design-studio Why Patrick is building it: https://itspatmorgan.com/writing/build-a-design-os Use the cloned repository's current documentation as the authority for implementation and setup details.