Separate structure/styles, animation, and interactive code into focused nodes whose draft chain stays live when upstream work changes.
Where: Flowgen → Add → Generate → Website → HTML / Motion / Code
Key ideas
- HTML: The workhorse node writes markup, copy, CSS, responsive layout, and optionally a small code element.
- Motion: Adds GSAP timelines, scroll effects, hover/click behavior, and interactions to the upstream draft.
- Code: Adds React/TSX, canvas, WebGL, Three.js, particles, or live data visualization when markup is not enough.
- Run status, not a continuing chat: The conversation/brain button opens a Web run-status sidebar showing persisted rounds, the actual brief used, what was written, what changed, critic verdict, notes/events, per-round cost, and the live status trail.
Steps
- Create HTML and give it the page/section brief.
- Run and review its live preview.
- Connect HTML draft_out to Motion draft_in and/or Code draft_in; never chain through snapshot html_out.
- Connect the final draft into the appropriate Document Editor page input and open the embedded editor for hands-on refinement.
Choose the focused node
- HTML: structure, copy, CSS, responsive layout, and a small amount of simple behavior.
- Motion: GSAP timelines, scroll effects, hover/click behavior, and interaction choreography.
- Code: React/TSX, canvas, WebGL/Three.js, particles, live data, or behavior that should be an interactive code element.
Keep the draft chain live
Connect draft_out to the next node’s draft_in. Do not use snapshot html_out between authoring nodes, because snapshots sever the live draft relationship. Finish in Document Editor/Section and open its embedded editor for direct refinement.
Reading a web run
- Written describes what the model produced; Changed describes the bytes that actually moved.
- Each round shows the accumulated brief/notes it really ran with.
- A resumable stop is reported, but the panel intentionally has no input box that could add a billed continuation by surprise.
Page output and export fidelity
Editor-backed nodes expose every page downstream, including video scenes. Page HTML connections include their normalized exported CSS. HTML ZIP exports preserve the intended page content and styles; targeted website edits can read and repair the existing source instead of rebuilding unrelated content.
Limitations and important notes
- Opening the web-run panel does not resume or continue the prior generation.
- Generate starts a fresh node run; continuation/resumption requires a separately designed and priced interaction.
Troubleshooting
Upstream changes no longer reach Motion or Code
Reconnect the upstream draft_out to downstream draft_in and remove any snapshot-only html_out link between authoring stages.