Generate or revise website structure, copy, responsive CSS, and simple behavior as a live draft that later Motion, Code, Section, or Document Editor nodes can continue editing.
Where: Flowgen → Add → Generate → Website → HTML
Key ideas
- Structure-first authoring: HTML owns semantic markup, content hierarchy, layout, responsive CSS, and straightforward behavior before specialized animation/code stages.
- Draft output: draft_out preserves the editable authoring relationship for downstream web nodes; html_out is a static snapshot for consumers that need plain markup.
- Layered revisions: The node can start from a brief/references or revise an upstream draft without flattening it into an image.
- Web Design Gen card: WebHtmlNode uses the authored shared-card path. Author/revise HTML, copy, CSS, and optional simple JS in a layered live web draft.
- Properties sidebar: WebNodePanel.tsx
- Opened surfaces: Full-page preview; reasoning
Steps
- Add HTML and describe the page/section role, content hierarchy, breakpoints, and design constraints.
- Connect research, copy, images, Brain context, design-system, or an upstream draft.
- Run and inspect semantics, responsive layout, copy, and the live preview.
- Connect draft_out to Motion/Code/Section/Document Editor; use html_out only for a consumer that explicitly expects a snapshot.
Shared authored card and inspector
- Prompt, Skill, Reference, Assets, Draft, Design System, and Review inputs.
- Model, responsive behavior, media, design system, code-writing toggle, chat/review, and versions in WebNodePanel.
- draft_out is the live layered authoring reference; resolved outputs are value snapshots.
Opened surfaces
Open full-page preview and reasoning. The node is AI-authored and does not open a direct code editor; use the embedded f0 editor downstream when manual editing is required.
Web Design Gen controls and presets
- Add path: Flowgen → Add → Website → Web Design Gen.
- Card: WebHtmlNode.
- Properties: WebNodePanel.tsx.
- Controls: Prompt; Skill; Reference; Assets; Draft; Design System; Review; model/responsive/versions.
- Opened surfaces: Full-page preview; reasoning.
Troubleshooting
A downstream authoring node does not receive later HTML changes
Connect HTML draft_out to the downstream draft_in. A snapshot html_out does not preserve the live draft chain.