Generate, revise, and hand-edit one responsive website section while keeping its upstream copy, media, and design-system inputs connected.
Where: Flowgen → Add → Website → Section / Agentic Web
Key ideas
- One section, native output: The Section node produces an editable f0 section document, screenshot/preview, HTML/CSS, and a live draft that can feed a website document.
- Create or edit: Start from a brief and references, or connect an existing section/draft and ask for a bounded revision while retaining source inputs.
- Direct editor access: Open the node editor for precise responsive layout, typography, styling, motion, and content changes after generation.
- Agentic Web / Interactive element card: UnifiedSectionNode uses the authored shared-card path. Generate/revise a native editable website section with prompt, references, design system, agent stages, and review.
- Properties sidebar: SectionPanel.tsx
- Opened surfaces: Embedded f0 editor; preview; history/restore; reasoning
Steps
- Add a Section node and describe its job, content, responsive intent, and design direction.
- Connect copy, media, research, Brain records, or a design system as typed references.
- Generate the section and inspect both the preview and structure.
- Open the embedded editor for hands-on refinement, save, then connect the section/draft output to Website Studio or another authoring node.
Two visible Add presets
- Agentic Web: the default UnifiedSection authoring contract.
- Interactive element: interactive:true, motion:false, three_d:false, sectionType interactive.
Card and properties
- Prompt, orchestrator/model, mode/capabilities, section type.
- Design system, references/media, source HTML/CSS.
- Stages, review, versions, and history.
Opened surfaces
Use preview and reasoning during the run; open the embedded f0 editor for direct structural, responsive, interaction, motion, code, or 3D refinement.
Agentic Web / Interactive element controls and presets
- Add path: Flowgen → Add → Website → Agentic Web / Interactive element.
- Card: UnifiedSectionNode.
- Properties: SectionPanel.tsx.
- Controls: Prompt/orchestrator/model; capabilities/section type; design system; references/media; source HTML/CSS; stages/review/history.
- Opened surfaces: Embedded f0 editor; preview; history/restore; reasoning.
- Agentic Web: Default unified section authoring contract.
- Interactive element: interactive:true, motion:false, three_d:false, sectionType interactive.
Tips
- Describe the section’s role and content hierarchy, not only its visual style.
- Connect the project design system or Brain brand record instead of repeating brand rules in every prompt.
Troubleshooting
The section looks right but does not update downstream
Use the live section/draft output expected by the downstream node and keep the connection intact; a screenshot or static HTML output will not preserve the editable relationship.