# Misaki Studio

> Misaki Studio is a design tool whose canvas is the DOM — a desktop app for macOS and Windows, and in the browser.
>
> What you draw compiles. Each design file exports as a typed React component: a .tsx and a .module.scss pair, with declared properties, key-checked variants and named children slots. Timelines export as data the runtime plays, responsive screens export as container queries, and logic — states, events, conditions, validation — exports inside the component instead of staying behind in the design tool.
>
> The same project also carries what sits behind an interface: a design system as tokens and themes, APIs, CMS content, storage, and a database with a built-in sign-in flow. Pages export as routes, and can be published to a live HTTPS URL.
>
> An AI agent can drive all of it over MCP, using tools shaped after the editor's own panels.

## Pages
- [Misaki Studio — design, animate, and export real React](https://misakistudio.io/): Misaki Studio is a design tool whose canvas is the DOM — a desktop app for macOS and Windows, and in the browser. What you draw compiles. Each design file exports as a typed React component: a .tsx and a .module.scss pair, with declared properties, key-checked variants and named children slots. Timelines export as data the runtime plays, responsive screens export as container queries, and logic — states, events, conditions, validation — exports inside the component instead of staying behind in the design tool. The same project also carries what sits behind an interface: a design system as tokens and themes, APIs, CMS content, storage, and a database with a built-in sign-in flow. Pages export as routes, and can be published to a live HTTPS URL. An AI agent can drive all of it over MCP, using tools shaped after the editor's own panels.
- [About — Misaki Studio](https://misakistudio.io/aboutus/): The team behind Misaki Studio, and the thinking behind it. The premise the product is built on: a design gets approved and then built a second time by hand, and the two versions drift from the next sprint onward. Misaki Studio removes the rebuild by making the design file the component itself. A small team of engineers and designers, aiming at a single tool that builds a website, a design system and a product interface rather than a chain of tools with a handoff between each.
- [Blog — Misaki Studio](https://misakistudio.io/blog/): Index of writing from the Misaki Studio team. Posts on design tooling, code export and the ideas behind the product — currently an introduction to what Misaki Studio is and why one tool covering design, animation, logic and code export beats stitching several together, and a piece applying ruthless simplicity to the design-to-code problem.
- [What is Misaki Studio?](https://misakistudio.io/blogs/introduction/): An essay introducing Misaki Studio. Its argument: design, timeline and transition animation, logic and working code export normally take several separate tools whose output you stitch back together yourself — and even then the exported code is incomplete, because tools that cannot express behaviour cannot export it. Then a walk through the app: the project dashboard, the navigation bar, open files as tabs, the panels, the infinite canvas and code export.
- [What if Steve Jobs designed a UI/UX tool?](https://misakistudio.io/blogs/thestevejobways/): An essay: what if Steve Jobs had designed a UI/UX tool? "It should just work — design to code, instantly." Applies ruthless simplicity to the problem of turning interface design into maintainable code, and uses it to argue for one tool that runs from canvas to shipped component rather than a chain of tools with a handoff between each.
- [Contact — Misaki Studio](https://misakistudio.io/contact/): How to get support for Misaki Studio. Support and community run on Discord: real-time troubleshooting with the team, announcements of updates and hot patches, and users helping each other. The page carries the invite link.
- [Share a project — Misaki Studio](https://misakistudio.io/docs/account/share-a-project/): How to share a Misaki Studio project with other people. The owner can invite and remove collaborators; an invited person sees the project under their INVITATIONS tab and can leave it at any time. There is nothing to accept — an invite grants access straight away — and access is all-or-nothing, with no per-person roles. Collaboration is live: two people in the same project see each other's edits as they happen, in the browser and in the desktop app. An edit made while your connection is down is queued and sent in order when it returns. Covers inviting by account email from the project card's menu on the dashboard, and what the messages mean when the email belongs to no account or to yourself.
- [Connect to MCP — Misaki Studio](https://misakistudio.io/docs/ai-agents/connect-to-mcp/): How to connect an AI agent to Misaki Studio over MCP. The desktop app ships an MCP server. Point an agent at it and the agent can work inside your projects the same way you do — create files, build element trees, style them, wire logic and animation, and export code. MCP is the open standard AI tools use to talk to apps, so any MCP client works: Claude Code, Claude Desktop, Cursor and others. There is no setting to switch on. The server is part of the app: it starts when the app starts and stops when you quit, and the endpoint is live as soon as the app is running. It is served over streamable HTTP at http://localhost:16472/mcp. Before you start: install and open the desktop app, sign in at least once on this machine so your profile and projects exist locally, and leave the app running while the agent works.
- [Example prompts for AI agents — Misaki Studio](https://misakistudio.io/docs/ai-agents/example-prompts/): Prompts to try against an AI agent connected to Misaki Studio, roughly in order of difficulty. Two pieces of advice first. Work in a scratch project rather than something you care about — everything an agent does is undoable, but experimenting is easier when you do not have to undo anything. And open every session by having the agent read the server's own build playbook, react-to-design, before selecting a project: an agent that has not read it makes avoidable mistakes. Starts with read-only warm-ups that change nothing — list projects and show a file tree, describe a component's elements, properties, states, variants and what each variant changes, search the project for every element whose text mentions a phrase — then moves on to building. Worth knowing early: that search covers element names, text, code, and the names of properties, states and events, so it is how you find where something lives.
- [What AI agents can do — Misaki Studio](https://misakistudio.io/docs/ai-agents/what-agents-can-do/): What an AI agent connected to Misaki Studio over MCP can actually do. The tools are shaped after the editor's own surfaces rather than bolted beside them, so an agent has the capabilities you have and can join a project at any stage, not only at the start. Broadly, an agent can: create and read projects, folders, files and any file's whole element tree; build designs from elements, text, SVG, paths, images and component instances, with styles, variants and design-system tokens; wire behavior — properties, states, events, conditions and logic; animate with timelines and keyframes; manage the design system, including colors, fonts, images, sounds, spacing, radius and themes; set up data with CMS models, APIs and storage; and work the database — tables, views, write actions, and the auth built on them.
- [Figma vs Misaki Studio](https://misakistudio.io/docs/compare/figma-vs-misaki-studio/): A comparison of Figma and Misaki Studio. Figma draws on a WebGL scene graph, so everything drawn must later be translated into HTML and CSS by a person. Misaki Studio's canvas is the DOM: the element you select is a real element carrying real CSS, and export compiles those same nodes into the React that ships. Covers variants, exploration via mockups, and how each tool handles gaps in its own capabilities.
- [Framer vs Misaki Studio](https://misakistudio.io/docs/compare/framer-vs-misaki-studio/): A comparison of Framer and Misaki Studio. Both agree on the premise — designers should ship real, animated, interactive work without a rebuild — and aim it at different targets. Framer ships a website: design, publish, and you get a hosted site with genuinely excellent motion. Misaki Studio ships components — export produces a typed React library that drops into an app you already have — and can publish the site as well. Both canvases are real DOM running real React; the difference is where that React is allowed to live. Framer's stays on Framer, and no export hands you the components. Misaki Studio's lands in your repository as readable, diffable .tsx + .module.scss, with an inline preview and a debugger that steps its logic before any of it ships. Covers motion — Framer's page effects versus component-grade timelines that survive into the exported code — and states plainly that Framer supports custom domains today where Misaki Studio publishes to a stable preview URL.
- [Paper vs Misaki Studio](https://misakistudio.io/docs/compare/paper-vs-misaki-studio/): A comparison of Paper and Misaki Studio. The closest comparison of the set: both are GPU-fast, web-native and built for the agent era, and both treat an AI agent as a first-class user over MCP. Paper's shader and effect work is striking, and it is aimed at visual exploration. The split is exploration versus shipping. Misaki Studio's canvas is the front half of a compiler: the same nodes you style and animate compile to typed React, with timelines as data the runtime plays, logic as states and events inside the component, and pages as routes. Around it sits the machinery a shipped interface needs — typed properties and states, variants that compose, a design system with themes, validation, data binding, a database with sign-in built on it, an inline preview with a steppable debugger, and responsive screens that export as container queries. Covers where each tool is the right answer, and mockups as a scratch space with the full styling that is guaranteed never to reach the export.
- [Webflow vs Misaki Studio](https://misakistudio.io/docs/compare/webflow-vs-misaki-studio/): A comparison of Webflow and Misaki Studio. Webflow proved a visual tool can produce real, professional websites — class-based styling that maps closely to CSS, a mature CMS, and hosting. The two part ways over what kind of code comes out, and what kind of home it goes to. Webflow's output is a website served from Webflow, with interactions on its runtime and custom code in embeds; its code export is static HTML, CSS and JavaScript — a snapshot rather than components, with no typed props, no variants a caller composes, nothing a React app imports and passes data to. Misaki Studio's output is that component layer: .tsx + .module.scss pairs with typed Props, key-checked variants and named children slots, pages as routes, and the design system as CSS variables with typed helpers. One detail carries the difference: Webflow breakpoints are viewport media queries aimed at pages, while Misaki Studio exports container queries, so a component lays out correctly full-bleed and squeezed into a sidebar. Also states where Webflow is simply ahead — CMS depth, ecosystem maturity, and connecting your own domain.
- [Wix vs Misaki Studio](https://misakistudio.io/docs/compare/wix-vs-misaki-studio/): A comparison of Wix and Misaki Studio, two tools that barely compete. Wix gets a business online: pick a template, fill in your content, connect a domain, and the platform handles hosting, ecommerce, bookings and email, with no code involved at any point. For a restaurant, a shop or a portfolio with a contact form that is the right deal, and Misaki Studio is not a better answer for it. Misaki Studio builds product interfaces as code you own — a typed React component library exported into your repository, built by your pipeline, extended by your developers. A Wix site lives on Wix, and there is no moment where you take the components with you. Written as the easiest choice on the comparison list: one of its two opening paragraphs will read as obviously yours.
- [Canvas and elements — Misaki Studio](https://misakistudio.io/docs/concepts/canvas-and-elements/): How the canvas works in Misaki Studio: what you draw is a tree, and that tree becomes your markup — one node, one tag, in the order the tree shows. Frames, screens and Body: a component file opens on a frame holding one or more screens, where a screen is a fixed width you design against. They are not separate designs — one tree, seen at several widths. Inside every screen is Body, the root the component renders into; it is created with the screen and cannot be deleted. The ELEMENTS panel is the tree, and the honest view of a design, because the canvas can make two very different structures look identical. Tree order is DOM order, which is also stacking order. Dragging a row moves it, and the top, middle and bottom thirds of the row you drop onto mean before, into and after — so nesting and reordering are the same gesture. A placed component expands into its named children slots, so a slot is visible rather than remembered. Also covers the element types you can place, from the canvas toolbar or the right-click Add menu.
- [Code components — Misaki Studio](https://misakistudio.io/docs/concepts/code-components/): The other kind of component in Misaki Studio: authored as React source instead of drawn. It exists for the cases a canvas is the wrong tool for — a third-party chart or map library, a hand-tuned canvas widget, a piece of imperative logic that would be tortured as wires. One component drops to code and everything else about it stays the same. What makes a component a code component is its path: a file under components/code/ is one, the same way a file under pages/ is a page. It still declares properties and states, appears in the file tree, and is placed as an instance inside other designs — a caller cannot tell the difference. Covers the authoring contract: the source default-exports a React function component, and declared values arrive grouped per feature rather than spread across the top level — props.properties.label, not props.label. Also the MCP tools that create and replace one.
- [Components — Misaki Studio](https://misakistudio.io/docs/concepts/components/): What a component is in Misaki Studio, and how components are organised. A component is a design file that exports as one reusable React component — the unit everything else is built from, since pages are compositions of components and components are compositions of smaller components. Four atomic-design layers, enforced by the folders: atoms (Button, Input, Icon, Label), molecules (FormField, Card, SearchBar), organisms (Header, Footer, ProductList) and templates (AuthLayout, PageWrapper). Whole pages live outside this under PAGES, and a fifth folder, Code, sits beside the layers for components authored as React source — a different kind rather than a layer. Covers definitions versus instances: the file is the definition, and placing it inside another design creates a live reference, not a copy. The rule of thumb given is that if you catch yourself rebuilding something you have already drawn, it wants to be a component one layer down.
- [Design system — Misaki Studio](https://misakistudio.io/docs/concepts/design-system/): The design system in Misaki Studio: the files every project is created with — Colors, Fonts, Images, Audios, Videos, Spacing, Radius and Themes — and why tokens rather than values. A hard-coded value is a decision you have to find again; type a hex into forty places and the fortieth is where the rebrand breaks. A token is that decision made once and named: bind a style property to a token and the property follows it. Tokens are also the unit a theme switches, because a bound property points at a name rather than a value, so one project can hold several complete sets of values against the same names. Colors are tiered across three tabs, and the tab is the tier: PRIMITIVE is a literal (the raw palette), SEMANTIC is a reference to a primitive named for its job, ALIAS is a reference to a semantic named for its place. The chain runs one way only — alias to semantic to primitive — which is what stops a palette becoming a web of mutual references nobody can unpick.
- [How export works — Misaki Studio](https://misakistudio.io/docs/concepts/how-export-works/): The mental model behind Misaki Studio's generated code. One design file becomes one component, one element becomes one tag, and every logic block has a code equivalent. That one-to-one mapping is why the output reads like code someone wrote: if you can find it in the element tree you can find it in the JSX, and nothing appears in the JSX that the tree does not show. A component file exports as a .tsx and a .module.scss sharing its name, with the element tree becoming the JSX tree in the same order and nesting shown in the ELEMENTS panel. What maps to what: an element becomes a div (or svg, path, input, by type); a component instance becomes an import plus a Name.Component tag; style panel values become one generated class per element in the .module.scss; style variants become extra classes composed via a variant prop; screens and breakpoints become container queries.
- [Projects and files — Misaki Studio](https://misakistudio.io/docs/concepts/projects-and-files/): Why the unit of work in Misaki Studio is a project rather than a folder of loose files. A project is one product: its components, pages, design system, content and settings, together in one place. You create a project first and work inside it — there is no loose-file mode. The reasoning: most design tools start with files and pages, which works until a product has a component library, a design system, mockups and real content, at which point a flat list describes nothing. A Misaki Studio project has typed sections instead, each holding one kind of thing, so where a file lives tells you what it is — no folder convention to invent, and none for anyone else to learn. Covers each section of the FILES panel: Components in atomic layers, Pages that export as routes rather than reusable components, the Design System, and the rest.
- [Examples — built with Misaki Studio](https://misakistudio.io/docs/examples/): The demonstration behind the claim that what you draw is what compiles. This website — the marketing pages, and the documentation itself — was designed in Misaki Studio and runs on the React it exported. Not a demo built to be shown: the product's own shopfront, maintained the way you would maintain yours. The page gives the counts: generated files in the site's source, lines of generated code, and how many of those files carry shipped timeline animation. Every one opens with "// This file is generated by Misaki Studio. Do not edit." Nobody hand-edits them; a design change is re-exported and the diff reviewed like any other code change.
- [Animate — Misaki Studio guide](https://misakistudio.io/docs/guides/animate/): How animation works in Misaki Studio. Timelines put many elements on one clock, so a heading fades as a card slides and both scrub together. A CSS-style transition set per property in the DESIGN tab is the right tool for a hover; a timeline is the tool for a sequence. The timeline dock lives behind the ANIMATE tab and is off by default — if you have never seen a timeline in Misaki Studio, that is why. The primary gesture is not a keyframe dialog: it is editing on canvas with the panel open. Create a timeline, place the playhead, then move or resize an element, and a keyframe records at the playhead with the element's new values. The same gesture covers shapes — edit a path's anchors, drag a mesh point or change a shader parameter and the whole shape is captured as one keyframe, in one undo step. Around that: tracks per element expandable to per-property rows, a draggable playhead with ruler scrubbing and play/pause animating the real canvas elements, and copy/paste of whole tracks or single keyframes through the system clipboard, so they travel across files and windows.
- [Boilerplates — Misaki Studio guide](https://misakistudio.io/docs/guides/boilerplates/): Two starter repositories for exported Misaki Studio code — somewhere to put a folder of React components. misaki-studio-website runs and hosts your design as a website; misaki-studio-npm publishes your components as a package other projects install. Both are ordinary Next.js projects, and neither is required — if you already have an app, export straight into it. They exist so you do not have to assemble the config yourself the first time. Covers cloning the website starter and installing it, why its src/ (holding design-system/, pages/ and styles/) is exactly the shape an export produces and therefore the right export target, and adding a local-folder target pointing at it from the project's SETTINGS file.
- [Debug a component — Misaki Studio guide](https://misakistudio.io/docs/guides/debug/): The runtime debugger that ships with Misaki Studio's preview. Every action your logic takes is recorded with a readable label, the whole live context is inspectable, and you can step backwards — click any past action and the canvas re-renders as it was at that moment. Where to find it: open the component in the tab preview, the one that opens as its own page from the component header, then open the panel from the menu button in the preview's corner. The small floating preview window inside the editor runs the same logic but has no debugger. LOGS is the action log: every render lands as a row with a human label — Initialization, Element then Event then On Click, API then On Finish, Animation On Complete, Listeners Action, Component On State Change — so reading it top to bottom is reading what your component did, in order. Clicking a row time-travels; while parked in the past, events and animations stop mutating state and editor edits queue instead of clobbering the snapshot. INTERNAL is the live context: properties, states, variants, children, events, timelines, mounted APIs, storage, content and validator, plus the runtime's own view — active screen id, repeat scopes, and guards. Each element row prints the logic that actually resolved on it, and a nested component expands into its own context.
- [Design — Misaki Studio guide](https://misakistudio.io/docs/guides/design/): How to lay out and style an element in Misaki Studio. Everything here lives in the DESIGN tab of the style panel, applies per element, and can be varied per interaction state, per variant and per screen. Sizing: width and height each take one of seven modes — Fixed (px), Relative (%), Fill, Fit Content, Max Content, Viewport (vw/vh) and Auto — plus independent min and max on both axes and an aspect ratio. Two deserve precision: Fill means take the leftover space in my flex parent, so it is a flex instruction rather than a width and is only offered when the parent's direction runs along that axis; Fit Content emits min-content, so long labels wrap sooner than you might expect. Layout: an element's Display picks the layout system — flex row, flex column, grid, plus the ordinary block, inline, table and contents modes. Flex containers get direction, justify, align, wrap and gap (one value or separate row and column gaps), and children get their own align-self, justify-self, order, flex basis and shrink. Element types themselves are covered by Canvas and elements; this page is about styling what you placed.
- [Add logic — Misaki Studio guide](https://misakistudio.io/docs/guides/logic/): How a component in Misaki Studio comes to do something: the inputs it exposes, the state it owns, the events that change that state, the conditions and repeats that shape what renders, and real data behind all of it. Everything is wired visually and exports as ordinary React. Where logic runs matters: the design canvas renders your tree without executing logic. You wire in the panels and open a preview to see it live, which is why wiring can feel inert. The preview also carries a full debugger. Properties are the component's typed inputs — strings, numbers, booleans, colors, images, objects and object arrays, a page, even a reference to an element — declared in the DATA STRUCTURE panel with a default, bindable into text, image sources, style values and conditions, and surviving export as the component's Props. A component previewed on its own renders its properties as undefined, which is the most common reason data-driven logic appears to do nothing on a first try; save a test case or preview a parent that passes real props. States are values the component owns, declared like properties and exported as useState. Events cover click, double click, the mouse and key events, change, scroll, focus, blur, mount, outside-click on a popup, and a child component's state change — with On Mount as the initialize hook.
- [Publish a site — Misaki Studio guide](https://misakistudio.io/docs/guides/publish/): How to put a Misaki Studio project's pages on a live HTTPS URL — one menu click, no server of your own. Choose Publish Website from the project menu. The build runs on the server and the dialog reports each stage as it happens — exporting, building, uploading, deploying — with a bell notification when it starts and when it succeeds or fails, so you can close the dialog and keep working. One publish runs at a time per project; a second click during a build is refused. The first publish creates the project's preview host, and it is stable: republishing keeps the same URL forever, so a link shared last week shows this week's build. Two properties of that URL matter. It is unlisted rather than private — served noindex, nofollow so search engines stay away, but anyone with the link can open it and the address contains your project's name. And it is never someone else's: the edge serves sites strictly by hostname, so an unknown host gets an error rather than another project's build.
- [Responsive screens — Misaki Studio guide](https://misakistudio.io/docs/guides/responsive/): How responsive design works in Misaki Studio: one component, several widths. A screen is a breakpoint over the same element tree, never a separate design, so a desktop and a mobile version cannot drift apart — there is only one version, seen at different widths. Every screen in a file shares a single Body: add an element on any screen and it exists on all of them, and what changes per screen is styling, not structure. An element can still be dropped from specific screens. Screens are not fixed presets — add one at any width, and its width is an ordinary style value you edit like any other, so set it to the real breakpoint you care about. There is no practical limit; this site's own components ship with up to nine widths. Overriding is the ordinary editing gesture: select an element on the narrower artboard and edit it, and the change lands in that screen's layer automatically — same panel, same controls, no special mode. Any style property can be overridden per screen, interaction states included, so a screen can carry its own hover.
- [Export output reference — Misaki Studio](https://misakistudio.io/docs/reference/export-output/): What is actually in the files Misaki Studio generates — the lookup for someone reading the output. The model behind it is How export works. Each component exports as two files named after it in lower case: name.tsx, holding the component, its types and its defaults, and name.module.scss, holding its styles as a CSS module. Both open with "// This file is generated by Misaki Studio. Do not edit." Take that literally — re-exporting overwrites them, so to add behavior you import the generated component into a file of your own and wrap it. Components also carry "use client". Covers the component signature and how to extend the output without being overwritten.
- [File sections reference — Misaki Studio](https://misakistudio.io/docs/reference/file-sections/): What each section of a Misaki Studio project holds, and what it becomes on export. The conceptual overview is Projects and files; this is the detail. IMAGES — image assets used across the project — are copied into your assets and referenced by the components that use them. DESIGN SYSTEM (Themes, Fonts, Images, Audios, Videos, Colors, Spacing, Radius) becomes CSS custom properties plus typed helpers under design-system/. MOCKUPS — exploration and sketches — become nothing: deliberately never exported. COMPONENTS becomes one .tsx and .module.scss pair per component. PAGES becomes a route with a default export. APIs becomes a typed useApi hook per endpoint. Documents becomes a route tree plus a navigation manifest. CMS becomes static typed arrays.
- [MCP tools reference — Misaki Studio](https://misakistudio.io/docs/reference/mcp-tools/): The full inventory of Misaki Studio's MCP tools — what an AI agent can do inside a project. Setup is Connect to MCP; the shape of working with an agent is What agents can do. Everything in the list is something you can also do in the editor by hand, because the tool set is shaped after the UI rather than bolted beside it, with a few exceptions noted near the end. Grouped by surface. Projects and files: list-projects and select-project; create, rename and delete a project; update-project-description; get-project-details, get-file-tree and list-design-files for reading the file tree and a file's node tree; create-file, create-folder, rename-file, move-file, duplicate-file and delete-file; get-file-data for a file's raw contents; and undo and redo, which step the project's own undo stack — the same one you use. Further sections cover designing, styling, logic, animation, the design system, data and export.
- [Keyboard shortcuts — Misaki Studio](https://misakistudio.io/docs/reference/shortcuts/): Every keyboard shortcut in Misaki Studio, read from the app's own keybinding definitions rather than transcribed by hand. Ctrl on Windows and Linux, Cmd on macOS — every chord accepts either. Editing covers copy, cut, paste (including an image or raw SVG straight from your clipboard), undo, redo, delete with either Delete or Backspace, and Esc to clear the selection; the rest of the page covers the editor's remaining chords.
- [Export your code — Misaki Studio](https://misakistudio.io/docs/start-here/export-your-code/): How to turn a component on the canvas into React files on disk. Export writes to targets configured once per project, in the project's SETTINGS file under Export. Two kinds: a local folder — a path on this machine, best while developing, and desktop-app only because it writes to your filesystem — and Git, a repository and branch, which works in the browser too and is how you hand work to a team or CI. A project can have several targets, and exporting writes to all local-folder targets at once. Export is a whole-project action rather than a per-file one, so the output is always internally consistent: a component and the pages using it never disagree. Each design file becomes two files named after it in lower case — the .tsx React component and its .module.scss styles, scoped as a CSS module.
- [Getting started — Misaki Studio](https://misakistudio.io/docs/start-here/getting-started/): How to sign in to Misaki Studio and create your first project. Two ways in: email and password, or single sign-on with Google or GitHub. Signing up asks for name, email and password and sends a verification link. Then the dashboard: a notification bell listing what happened to your projects, an account menu that switches between signed-in accounts or logs out, a search box, the New Project button, and a Users panel for managing who has access to your projects.
- [What Misaki Studio is](https://misakistudio.io/docs/start-here/what-misaki-studio-is/): What Misaki Studio is, for someone who has not used it. A design and animation tool that exports its work as React components you can ship — not a spec or a redline. Most design tools stop at the picture and the developer rebuilds it by hand; here the file you design is the component, and export writes the code for it. Covers what you can build. Design: elements, text and images with a full style panel and multiple screens for responsive work, real bezier vector paths with unite/subtract/intersect/exclude, and mesh gradients and animated shaders as elements rather than imported images. Animation: timelines that autoplay, follow the scroll or follow component state, including path morphing between shapes with different point counts. Logic: properties, states, events and conditions. Data: APIs, CMS content and shared storage mounted into a design, plus a database with tables, views and a real sign-in flow. A design system of shared tokens that survives export as CSS variables. And code components, for when the canvas is the wrong tool.
- [Where to go next — Misaki Studio](https://misakistudio.io/docs/start-here/where-to-go-next/): Where to read next after building and exporting a first component in Misaki Studio. A signpost page, split by what you are doing. If you are designing: design, animate, responsive screens, the design system, and components. If you are integrating: how export works, export output, logic, and connecting an AI agent over MCP. If you are working with other people: sharing a project, and publishing a site. If something is wrong: the runtime debugger, and troubleshooting.
- [Your first component — Misaki Studio](https://misakistudio.io/docs/start-here/your-first-component/): A step-by-step build of a first component in Misaki Studio: a container element with a text label inside, sized to fit its content. Walks the whole path — the FILES explorer and why the component belongs under COMPONENTS then Atoms; creating and naming the file, where a name may use only letters and numbers, must start with a letter and must be unique in its folder; the ELEMENTS tab and the element tree; finding Body, the root the component renders into; and adding the container element either from the right-click Add Element menu or by drawing it with the canvas toolbar.
- [Troubleshooting — Misaki Studio](https://misakistudio.io/docs/troubleshooting/): Common Misaki Studio failures and what they mean, with the exact app messages quoted so searching the text you are looking at lands you here. Connecting an AI agent: a client that cannot reach the server means the desktop app is not running, since the MCP server starts and stops with the app. "No project selected. Call list-projects first, then select-project." — every agent session starts with no project chosen. "app websocket not connected (is the app running?)" — previews, exports, screenshots and captures are performed by the app itself, not the MCP server. "No profile found. Create one first." — sign in to the app once on this machine. Quoted strings are exact app messages; unquoted headings are symptoms.
- [Documentation — Misaki Studio](https://misakistudio.io/docs/welcome/): The documentation index for Misaki Studio. Three entry points, by why you are here: Why Misaki Studio if you are evaluating the tool, Start Here if you are ready to build — sign in, draw a component, export React you can run — and AI & Agents if you want to drive it with an agent over MCP.
- [Why Misaki Studio](https://misakistudio.io/docs/why-misaki-studio/): The case for Misaki Studio: what problem it removes, who it suits, and where another tool is the better answer. The problem it names: a design gets approved, and then it gets built a second time. A developer reads the file and the spec and rebuilds the interface by hand; the two versions agree on the day they ship and drift from the next sprint onward. Every design change is a translation, every translation can lose a detail, and the design file stops being true. Handoff tools make the translation easier without removing it. What it does instead: the design file is the component. Draw a button and you get button.tsx and button.module.scss — a typed React component you import and pass props to. Change the design, export again, and the code changes with it. Covers the three things it puts in one place — design, animation and logic — and that all of them are driveable by an AI agent over MCP.
- [Course — Misaki Studio in a nutshell](https://misakistudio.io/documents/): A short course on Misaki Studio, for someone deciding whether to learn it. Runs from what the tool is, through projects and files, to components and design — the same ground as the Start Here documentation, arranged as a sequence to read straight through rather than a reference to dip into.
- [Download — Misaki Studio](https://misakistudio.io/download/): Download the Misaki Studio desktop app. Builds for macOS on Apple silicon and for Windows on Intel/AMD. The desktop app is what ships the MCP server an AI agent connects to, and it is the only build that can export straight into a local folder on your machine — the browser version exports to a Git repository instead.
- [Explore](https://misakistudio.io/explore/)
- [Item](https://misakistudio.io/explore/item/)
- [Pricing — Misaki Studio](https://misakistudio.io/pricing/): Plans and per-user pricing for Misaki Studio. Misaki Studio is a desktop design tool whose canvas is the DOM: what you draw exports as typed React with CSS modules, so a design does not get rebuilt by hand. Three tiers — a free plan, Pro and Max — priced per user per month. They differ in project storage, how many collaborators you can invite, whether generated code can be previewed, and how often exported code can be pulled and pushed.
- [Tiny Tools — Misaki Studio](https://misakistudio.io/tools/): Quality-of-life tools from the Misaki Studio team — small utilities for everyday design and front-end work.