Misaki Studio is a design and animation tool that exports its work as React components you can ship — not a spec or a redline. What you draw is what compiles.
Most design tools stop at the picture. The developer then rebuilds it by hand, and the two drift apart from the first sprint. Misaki Studio removes that step: the file you design is the component, and export writes the code for it.
Design. Elements, text and images on a canvas, with a full style panel — layout, spacing, fills, borders, effects — and multiple screens for responsive work. Vector work is real vector work: paths are bezier curves with handles you edit point by point, and paths combine with unite, subtract, intersect and exclude (curves are flattened when they combine, so a boolean of two curved shapes comes back faceted). Mesh gradients and animated shaders are elements too, not images you import.
Animation. Timelines with keyframes and easing, on the same elements you just designed — no separate prototyping tool to re-draw everything in. Timelines can autoplay, follow the scroll, or be driven by a component's own state — and they animate more than numbers: a path can morph into another shape — even into one with a different number of points — and mesh gradients can be keyframed like anything else.
Logic. Properties, states, events and conditions, wired visually: a button that reacts, a form that validates, a list that repeats over data. Components can also navigate, scroll or move focus in response to an event.
Data. APIs, CMS content and shared storage mount straight into a design, so a list repeats over live rows. A built-in database adds tables, views and a real sign-in flow — a members-only screen knows who is looking at it.
Design system. Colors, fonts, images, sounds, spacing, radius and themes as shared tokens, so a change lands everywhere at once — and survives export as CSS variables.
Code, when the canvas is the wrong tool. A component can be written as React source instead of drawn, and still be placed, typed and exported like any other. See Code components.
Every component exports as two files, named after it in lower case:
<name>.tsx — a typed, reusable React component. Props you defined become its props; states become useState; events become handlers.
<name>.module.scss — a CSS module. Your styles, scoped to the component.
That output is ordinary React. It drops into an existing app, takes props from your code, and needs no manual editing to be useful. See How export works for the mapping in detail.
Designers who are tired of their work being approximated in code, and developers who are tired of doing the approximating. It suits product teams building an interface once and maintaining it as a component library — and the whole tool is exposed over MCP, so an AI agent can drive it too.
Next: Getting started — sign in and create your first project.