Start as a designer

Begin with one reusable visual component, see how its hierarchy and styles fit together, and preview the result before adding logic or export concerns.

You can complete this path entirely in the visual editor. MCP is optional: use it for bounded construction, inspection, or verification when that saves time.

Your first useful route

1. Tour the project interface to locate Files, Elements, the canvas, Design, Animate, Logic, and the timeline.

2. Create your first component to build a small Button from a container and label.

3. Preview your work to check the rendered component rather than judging only the design canvas.

After that first component, continue in this order:

1. Add more than one responsive screen and compare which properties change by width.

2. Turn repeated values into design-system colors, spacing, radius, fonts, images, or themes.

3. Add properties and variants so the component can be reused without duplicating it.

4. Add hover, focus, or active styles where the selected node supports them.

5. Add a short timeline and verify it in Preview.

The detailed responsive, design-system, properties/variants, and animation guides are part of the next rewrite stages. Until they are verified, use the current editor as the source for exact controls and availability.

The designer's mental model

• Files organize the project: Pages, Components, Mockups, design-system files, media, data, source, and settings.

• Elements organize one visual file: parent/child structure, screens, component instances, content, and drawing nodes.

• Design changes layout and appearance for the current canvas or element selection.

• Animate connects the selected element to timeline configuration.

• Logic describes properties, states, events, conditions, bindings, and data-driven behavior.

• Preview runs the component so interaction and state can be evaluated.

Not every control appears for every node or file. Misaki Studio changes the available workspace and inspector according to the selected file type and element.

Ask an agent without giving up visual control

Coverage: UI + MCP for project content; UI only for direct manipulation and session layout.

Start with a read-only request:

Select my project and inspect the Component I have open. Summarize its screens, top-level element hierarchy, responsive differences, variants, and timelines. Do not change anything. Tell me which parts need visual review in the editor.

For a change, bound both the target and the proof:

In the selected Component, add one Text child named Caption inside the element named Card. Match the Card's existing spacing system, do not change any sibling, then read the new node and show me a preview screenshot.

Review the affected hierarchy in Elements, the exact values in Design, and the rendered result in Preview. An agent's successful tool response is not a substitute for visual acceptance.

What to postpone

You do not need to understand package registries, framework routing, generated helper types, or every MCP operation before designing. Learn those when you are ready to hand the component to an application or collaborate with a developer.