Misaki Studio is a visual workspace for building interface components with design, responsive behavior, animation, logic, and data in the same project—and turning that work into code you can use.
You can work directly in the editor, ask an MCP-connected agent to inspect or change the project, or move between both approaches. The project remains the shared source of the work; the UI and MCP are two ways to operate on it.
Build Pages, reusable Components, and Mockups from an element hierarchy rather than a flattened picture. Use responsive screens, variants, themes, and shared design-system files to describe how the interface should adapt.
Components can declare properties, states, events, validators, variants, and test cases. Their elements can use conditions, repetition, bindings, listeners, API requests, mounted data, and state-driven actions.
Create timelines on the same component elements you design. Configure segments, keyframes, easing, triggers, and audio while keeping the canvas and component data together.
A project can include code components, scripts, APIs, storage, database and content tables, documents, media, design-system files, and environment or export settings. Each file type opens the workspace that fits its job.
Misaki Studio includes code preview, local and Git export routes, package publishing, and website publishing surfaces. The correct route depends on your app mode, target, framework, and how you want to own the generated output; the Export & Ship decision guide makes those differences explicit.
Use the visual editor when you want direct control over hierarchy, layout, styling, timelines, and the visible result.
Use an MCP-connected agent when you want to describe a change, inspect structure, repeat operations, work with precise references, or ask for machine-readable verification.
Use both when you want the agent to perform bounded work and the editor to remain your review and refinement surface.
MCP does not reproduce every tab, panel, or navigation gesture. It often reaches the same project result by addressing a project, file, and element directly. The documentation labels each workflow as UI + MCP, Partial MCP, UI only, MCP only, or Desktop required.
Go to Choose your path for a short route for designers, developers, React/Next.js developers, and agent-first users.
If you want to orient yourself first, tour the project interface. If you prefer to learn by building, create your first component.
For direct adoption answers, see General questions.