framer_design
Framer DESIGN surface — build real, native, client-editable Framer pages server-side (layout, typography, design tokens, components, native animation). THIS is the tool for any design/layout/styling work; framer_canvas set_attributes/set_text are low-level node ops that bypass the design layer and silently produce Framer's default typography. action: 'guide' (START HERE — returns the compact DSL reference; no framer_site_id needed, and it is the same for every project so fetch it ONCE per session), 'apply' (dsl=, optional page_path — builds/edits the canvas; returns errors, linter warnings and renamedIds mapping your temp ids to canonical ids you MUST use in later edits), 'find_images' (query= — stock photo candidates), 'add_image' (url= — uploads it into the project and returns a permanent asset URL; always do this before using an image in fill=, remote URLs fetch inconsistently and fail silently). Changes are NOT live until framer_publish.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| dsl | No | DSL commands (action=apply | validate). Every command ends with ';'. apply runs a local pre-flight first and REFUSES to send known-wrong attributes — the API accepts them and silently does nothing, so this is the only place they can be caught. | |
| url | No | Image URL to upload (action=add_image) | |
| code | No | React/TSX source (action=create_code_file). This is the ONLY way to get continuous motion or texture — an animated gradient, a grain overlay, a carousel, an animated counter. The DSL silently ignores appearEffect.loop/.repeat/loopEffect.*, so anything that moves forever has to live here. Export a default component and use addPropertyControls so the client can tune it in Framer afterwards. | |
| name | No | Component file name (action=create_code_file), e.g. 'AuroraGrain.tsx' | |
| brief | No | action=suggest: describe the page and the feel you want, e.g. 'dark premium studio hero, iridescent moving background'. Returns a build plan naming the NATIVE primitive for it — which shader, the preset set, the two layout rules that silently ruin a build, and how to verify. START HERE for any design work: it costs no round trip and it is the difference between using the one-line shader Framer ships and hand-writing a React component to imitate it. | |
| query | No | Image subject (action=find_images) | |
| action | Yes | suggest | guide | validate | apply | find_images | add_image | code_files | create_code_file | add_component | |
| page_path | No | Optional page path to scope the change (action=apply) | |
| insert_url | No | action=add_component: the export's insertURL from action=code_files. NOT url or identifier — both read back undefined, and using them looks exactly like the component not existing. | |
| framer_site_id | No | From connect_framer (not needed for action=guide) | |
| skip_validation | No | action=apply: send even if pre-flight found errors. Rarely correct — each error is an attribute Framer accepts and ignores, so the apply reports success while nothing lands. |