Design from a reference
Use screenshots, existing nodes, and measured constraints to guide an agent's design work.
A reference is most useful when the agent can compare it with the actual Fanta canvas. Start with the page and the target frame rather than asking for a broad visual imitation.
Give the agent usable input
Include the reference image or a clear description, the intended canvas size, any required copy and assets, and the elements that must remain. Identify an existing page, frame, or node if the task is a revision. Ask the agent to read the editor state and relevant nodes before changing the document.
For an empty page, get_editor_state can look for space for a requested width and height. A batch_get call then exposes exact node IDs and details. get_design_system shows existing tokens and components, while get_screenshot gives the agent a visual baseline. These reads help it place new work without guessing IDs or overwriting nearby content.
Build and compare
- Define a frame at the target size and lay out the major regions.
- Add text, shape, image, and component layers in small, visible batches. Finish one component or screen section before starting the next.
- Use auto layout where content needs to flow with changes.
- Capture a screenshot of the page or target node.
- Compare hierarchy, spacing, type, color, and crop with the reference; adjust the mismatches.
The structured edit surface supports solid and gradient paints, typography, strokes, shadow and blur stacks, variables, component variants, and horizontal, vertical, or grid layout. It cannot directly set every design property. For individual rich-text runs or another unsupported property, inspect the FNX source, validate the complete candidate, and edit the relevant project file.
Keep the result editable
Use native frames, text, and shapes for the layout. Place bitmap images where the reference contains photography or raster detail. Hosted image and vector generation can supply new assets. prepare_design_asset opens a user-reviewed image or SVG prompt without submitting it; import_image saves a returned raster file or URL to project Assets without placing a layer. Generated SVG can become editable vector layers when added to the design. In Ultra mode, delegated specialists can receive the lead chat’s reference images when their model supports images; give each specialist a distinct page or component and inspect their visible milestones. Verify the result in Fanta before exporting.
A reference image is guidance, not proof of pixel-for-pixel equivalence. Compare screenshots at the same target dimensions, and inspect text, clipping, and responsive behavior in the live editor.