Choose your path

Start with the result you want, not with every feature Misaki Studio contains. All four paths use the same project model, so you can change routes whenever the work changes.

I am designing an interface

Start by learning the five regions of the editor, then build one small reusable component.

1. Read Start as a designer.

2. Tour the project interface, then use the deeper Project interface reference as needed.

3. Create your first component.

4. Preview your work.

This path emphasizes visual hierarchy, layout, styles, reusable parts, responsive behavior, timelines, and the visible result. You do not need to begin with MCP or generated-code details.

I am building application behavior

Start with the same component, then follow its data and behavior rather than stopping at appearance.

1. Read Start as a developer.

2. Learn how projects and files organize application content.

3. Tour the project interface, paying attention to Logic and the file-sensitive workspace.

4. Create your first component.

5. Preview your work.

This path is for developers who want to understand how visual elements connect to state, events, data sources, and source code.

I need React or Next.js output

Begin with a small component so the exported structure has a concrete meaning.

1. Read Start as a React or Next.js developer.

2. Learn the generated unit by reading Components, then create your first component.

3. Preview your work.

4. Learn how export works, then choose an output.

5. Export your code, or compare the five current boilerplates if you need a prepared destination.

6. Check exact dependencies, compatibility, and re-export behavior before adopting the result.

The current output and boilerplate pages distinguish verified behavior from unfinished work. Before adoption, read generated output, dependencies and compatibility, existing-app integration, and re-export safety.

I want an agent to help

Read Use the UI, an agent, or both before asking an agent to mutate a project.

The safe pattern is simple: select the project, describe a bounded target, let the agent inspect before editing, require verification, and review the result in the editor. Use the visual editor for direct refinement whenever it is faster or clearer.

A useful first session

Whichever path you choose, aim to finish these four things:

1. Open a project and identify Files, Elements, the canvas, the inspector, and the timeline.

2. Open or create one Component file.

3. Make one bounded change through the UI or MCP.

4. Verify the visible result and understand how to undo the content change.

That is enough context to choose the next guide from experience instead of guessing from a feature list.