Quickstart: Claude Code
Make and inspect one source-backed design change through MCP.
Open a design in Fanta and connect Claude Code. Try this prompt:
Read Fanta's design guidelines and active page. Find space for a 360 × 220 card, add a named frame and text, arrange them vertically, then show me a screenshot. Review the resulting source diff.
Claude Code should call get_guidelines and get_editor_state with empty_space: [360, 220], then inspect nearby nodes with batch_get. It can create the frame with batch_design; the result returns a node ID for a later batch that adds children. A batch paints its operations on the canvas as they run, then commits as one undo step; an error rolls back the preview. Use a small batch for one visible section. Call report_agent_activity with a stable agent ID and name, then pass that identity in batch_design.activity if you want Fanta’s Follow control to track the streamed steps. There are no temporary name bindings between operations.
For source editing, ask the agent to read the page path returned by get_editor_state, prepare the complete FNX document, call validate_fnx_source with that candidate, then write the file only after validation succeeds. The open canvas reloads valid saved source. The project-local AGENTS.md explains syntax and stable IDs; fanta.md records the design brief. For managed JSON edits, validate the complete candidate too; valid JSON syntax alone does not prove its types and references are valid.
get_screenshot can target the new frame ID. The canvas edit autosaves to FNX; File → Review Changes shows the Git diff in a non-Store build when the project is in Git. Ask for a focused correction and another screenshot if the result needs work.