Designer AI, motion, interaction, drawing, and media tools

Use Design, Plan, and Ask safely; target elements and layers; author motion and interaction; annotate; research; and run local media tools inside Designer.

Where: Open a Designer node -> AI mode menu, canvas mode controls, layers, motion/Tweaks, or selected-element toolbar

Key ideas

AI modes change permissions: Design has the full writing tool table. Plan and Ask expose read-only tools only, so the agent cannot quietly mutate the document. Plan returns a reviewable plan in chat; Ask answers from document context.
Canvas modes are separate: Edit selects and changes real elements, Draw creates marks and shapes, Comment places review pins, and Preview runs the artifact. These canvas modes are independent of the AI mode.
One clock for pixels and beats: MotionSpec drives element tweens, split-text reveals, masks, overlap, beats, and transport. The timeline, preview, Tweaks rail, poster, and compiled runtime resolve the same authored clock.
Media helpers operate on selected assets: Background removal, subject selection, and scroll-scrub conversion are editing tools, not separate generated nodes. Their availability and cost differ from provider generation.

Steps

Use Plan when the structure needs approval, Ask when you only need an answer, and Design when the document should change.
In Edit mode, select the smallest stable element or layer and request a precise change. Use the floating property bar for direct values.
Open motion/Tweaks to add beats, tweens, text reveals, masks, overlap, or saved motion assets, then preview with transport.
Use Draw for visual marks or shapes and Comment for draggable review pins. Mention annotations in AI chat when they are part of the request.
For research, let the agent search the web, read a URL, or start deep research; for media, select the actual image before removing its background, selecting a subject, or creating scroll scrub.
Expose useful text, number, color, select, toggle, or image fields when a saved component needs editable knobs.

AI tool families

Document: read/write document, edit/style/insert/remove/move element, set stylesheet. All of them take an optional page_id.
Motion and interaction: set_motion (beats and presets) and set_interactions - click, hover, press, enter, leave, keydown, timeout, load, inview, scroll, plus pointermove parallax, tilt, magnetic and cursor-var - and set_exposed_fields.
Pages: list_pages, add_page, set_page_type, read_page, read_slides, switch_page.
Research: search_web, read_url, research_topic. Deep research may continue asynchronously and return a resume id.
Media on the device, free: remove image background, select an object, add scroll scrub.
Media that costs credits: generate_image_asset, generate_video_asset (charged per second of clip), generate_audio_asset, edit_image_asset, generate_logo_asset.
Brain: list_records, read_record, search_records and write_record - the durable notes in this workspace, so a brand does not have to be re-explained every conversation.
Design system: set_design_system_brief and derive_design_system_from_reference. Both write a BRIEF, never CSS, so a system the AI built is still one a person can turn a knob on. They work on a Design system page.
Review: document context, annotations, next steps, conversation rewind, and saved versions.

Motion and interaction authoring

Motion presets can be saved as Motion assets and applied later.
Text can be split for staggered reveals.
Masks and overlapping beats are authored into the same spec.
InteractionSpec stores click/hover/other runtime behavior in the document.
Motion and interaction are compiled when the artifact is serialized or exported.

Local media behavior

Remove background: free local inference; first use can download about 100 MB.
Select object: free local segmentation; first use can download about 200 MB, needs WebGPU, and understands a direct subject better than relational phrases.
Scroll scrub: re-encodes every frame with WebCodecs in Chromium and needs enough scroll height; it is unavailable for Deck and Video kinds.

Exposed fields

Types: text, number, color, select, toggle, image.
Targets: text content, style property, or CSS variable.
When saved as an f0 inline code element, exposed fields become normal sidebar/timeline controls rather than hidden HTML internals.

Complete slide builds and honest delivery choices

Designer deck playback includes the entrance and all later beats up to the next slide. Posters, thumbnails, PDF, and PPTX captures use completed-slide timing. Plain Share is the compiled document without a pager; use Presentation to deliver a navigable deck.

PDF is available for non-empty content, not only Document kind.
PPTX is enabled by actual Deck slides declared in the motion structure.
Card-driven deck generation creates a deck-shaped artifact rather than an unrelated single page.
External artifact storage and exported files retain the content needed for restoration.
MCP open_designer returns current native tool declarations, including the current motion/deck capabilities; invoke those through invoke_designer_tool, then close_designer to save.

Standalone projects, direction, kit, review, and resource workspaces

Designer now operates as a dashboard project as well as a Flowgen node. Every page remains in one shared document with per-page type and undo, collaborators can occupy different pages, and supported editor cards can be promoted to a project and explicitly pulled back. Media, Brain, Design system, art directions, the immersive section kit/library, and rendered page review are first-class workflows rather than implicit prompt conventions.

Use list_directions/set_direction before building, then check conformance.
Use list_kit_sections and insert_kit_section to assemble tested structures with slot and pin metadata.
review_page looks at rendered screenshots, returns ten 1–5 scores and at most six fixes, and normally allows two rounds.
Sharing, Presentation, PDF/PPTX, image/video output, and Flowgen pull-back are distinct delivery paths.

Tips

Use Ask before Design when you need to understand an unfamiliar document.
Name layers and stable elements before complex motion work.
Use direct subject descriptions such as "the red shoe", not "the object behind the person".
Preview motion at real speed and scrub several beats before export.

Limitations and important notes

Plan and Ask cannot edit; switch to Design deliberately.
Deep research can take minutes and may need to be resumed.
Local segmentation depends on browser/device capabilities and substantial first-use model downloads.
Scroll scrub is Chromium/WebCodecs dependent and can create large assets.

Troubleshooting

The AI explained a change but did not make it

Check the AI mode. Plan and Ask are read-only; use Design to modify the artifact.

Object selection refuses a request

Select the image and name one visible subject directly. Relational or ambiguous descriptions are intentionally rejected.

Scroll scrub is unavailable

Use a page-like kind in Chromium, confirm the source is a video, and provide enough scroll height.