Designer node: complete reference

Create and refine a self-contained HTML artifact in an AI-first visual editor, with exact source, reference, asset, design-system, page, poster, motion, and editor-bundle contracts.

Where: Flowgen -> Add -> Editors -> Designer — Add Designer, choose a kind, then click Generate or open the editor.

Before you start

A Flowgen project.
An open browser is required because the Designer surface, preview, local media tools, and card-to-editor handoff run in the app.
Publishing, provider generation, and some export targets require the normal account/plan permissions.

Key ideas

One node, twelve page types: Designer is one node type named designer, and what it holds is a project of PAGES. Each page carries its own type: Landing page & web, Reel & video edit, Ads, Slides, Animation & motion, Documents & research, Wireframes & mockups, HTML email, Live dashboard, Logo, Media, and Design system. A type selects the starting scaffold, editor chrome, tools, and useful export targets; changing it never converts an existing document. designerKind on the node is the type of the ACTIVE page. Legacy values (Website clone, Prototype, Live artifact, Image, Audio, WebGL) still open an old node but are never offered again.
The artifact is HTML: Designer owns one self-contained HTML document with stable data-dsn-id element identities. MotionSpec, InteractionSpec, FieldSpec, comments, and other authoring metadata travel inside that document and are compiled into the runtime when it is saved, shared, or exported.
Generate opens the working surface: Designer is editor-driven. The card Generate action opens the surface and can hand the pending brief to its first AI turn; graph run_node is not the execution path for this node.
Direction, placement, and source are different: html_in is the one page being edited. reference_in contains images to resemble. asset_in contains files to place. design_system_in supplies the complete visual system. Keeping these roles separate prevents a reference from being inserted or an asset from being treated as immutable style direction.
Two page types are hosted views: Media and Design system are ordinary pages - they have a type, a document, a name and a tab - but a native panel draws them instead of the preview frame. The media page is a generation and library workspace; the design system page is the project tokens. Author them with their own controls rather than by writing markup.
It reaches past markup: Beyond the document, Designer can generate and edit image, video, audio and logo assets (these spend credits), remove a background or cut out an object on the device for free, search the web, read a url, run deep research, read and write the Brain records the user keeps in this workspace, and set the project design system from a brief or from a reference site or picture.
Designer card: DesignerNode uses the authored shared-card path. Create and edit a multi-page Designer project with page-kind-specific tools and exports.
Properties sidebar: Card-owned kind and brief controls; common properties shell
Opened surfaces: Full Designer surface; hosted Media view; hosted Design system view

Steps

Add Designer and choose the kind that best matches the intended artifact before authoring.
Write a brief on the card or connect Prompt. Connect at most one editable Page, then add Reference images, placement Assets, and a Design System only in their matching sockets.
Click Generate or Open Designer. Use Design mode to make the first version, then select, draw, annotate, or request targeted revisions in context.
Use the page tabs or deck rail when the artifact has more than one page or slide. Name pages before publishing so generated filenames and routes are meaningful.
Return to Flowgen and connect the output that matches the next job: HTML, CSS, editable bundle, poster image, motion cue sheet, or the pages dataset.

Inputs and precedence

Prompt / prompt_in: multi-connected text brief or instructions.
Page to edit / html_in: one HTML source. It is editable source, not a visual reference.
Assets / asset_in: multi-connected files for placement. Images, media, documents, and supported editor assets keep their role.
References / reference_in: multi-connected images that guide visual direction.
Design System / design_system_in: the complete connected system, painted into every page.

Outputs

HTML / html_out: the active compiled page.
CSS / css_out: extracted stylesheet output.
Editor / editor_out: a re-editable Designer bundle.
Poster / poster_out: the current poster/still image.
Motion / motion_out: a text cue sheet with duration, loop mode, absolute beat times, and deck slide stops where present. It is not a video clip.
Pages / pages_out: a dataset of every named page and its compiled document, ready for typed List/data workflows.

Starting scaffolds

Landing page & web starts fluid.
Slides start on a fixed 1920 x 1080 stage with slide stops.
Reel & video edit and Animation & motion start time-based.
Ads start on a fixed master stage with sizes and variations.
Documents & research starts as a centered, readable article.
Wireframes & mockups starts as low-fidelity structure.
HTML email starts on a narrow table-safe body.
Live dashboard includes a mount point.
Logo starts on a square mark stage.
Media and Design system are hosted views: their document is a bare root the frame is not asked to render.

Round-trip and document safety

Stable data-dsn-id values keep selection, targeted AI edits, layers, comments, fields, and motion attached across HTML round trips.
Preview communicates with the host through the Designer bridge; saving restores the authored document rather than scraping pixels from the iframe.
Leaving the document does not discard work. Conversation, versions, pages, and authored metadata persist with the node.

Designer controls and presets

Add path: Flowgen → Add → Website → Designer.
Card: DesignerNode.
Properties: Card-owned kind and brief controls; common properties shell.
Controls: Page type; Design/Plan/Ask; Edit/Draw/Comment/Preview; Design system; Open Designer.
Opened surfaces: Full Designer surface; hosted Media view; hosted Design system view.

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

Pick the kind before the first generation so the AI receives the correct stage and export assumptions.
Connect exact assets only when they must appear; use References for look-and-feel.
Use the editable editor_out bundle when another editor-backed node must preserve structure, and html_out for a finished page stream.
Use pages_out rather than manually duplicating nodes when downstream work must iterate over a multi-page artifact.

Limitations and important notes

Switching designerKind does not reflow, resize, or convert an existing artifact.
Designer is not a native f0 scene document; Website Editor and Video & Motion Editor own that separate iframe-backed document format.
motion_out is descriptive text, not rendered footage.
run_node must not be used as a substitute for opening Designer.

Troubleshooting

Generate created no graph result

Open the Designer surface. This node authors through its editor; it is not a normal headless run_node generator.

A reference image was inserted into the layout

Check the socket. Files to place belong on Assets; visual direction belongs on References.

Changing Page to Deck did not create slides

Kinds are presets, not conversion commands. Start a Deck or restructure the existing document into slide stops.

FAQ

Are Deck, Prototype, and WebGL separate Flowgen nodes?

No. They are presets on the single Designer node.

Can MCP edit Designer?

Yes. MCP can create and wire the node, call open_designer, read or edit through invoke_designer_tool using Designer native tool declarations - including add_page and a page_id on every document tool, so it can build and target any page - and call close_designer to flush and save. Designer never uses run_node or the f0 iframe document surface.