Create an origin shot or add a non-destructive design revision with editable elements, source choices, layout variants, render profiles, and a reusable poster output.
Where: Flowgen -> Add -> Video & Motion -> Shot Design Gen
Before you start
- Provide at least a prompt, connected source/reference, or an upstream shot.
- Use explicit socket handles when Reference, Asset, Footage, Page to edit, CSS, and Structure ref could otherwise be confused.
Key ideas
- Origin or revision: With no shot_in connection, Shot Design Gen creates the origin nested shot/precomposition. With shot_in, it resolves the live upstream chain and stores only this node's design contribution.
- Editable native document: The resolved shot is one page-framed native editor document with semantic element/source anchors. editor_out exposes that bundle, while shot_out preserves the live composable shot reference.
- Several inputs, different jobs: Reference images direct style; Assets are placed media; Footage is source material the model may inspect; Page to edit and CSS are exact editable sources; Design System and Structure ref are standards; Skill/Review/System Prompt govern the compiler.
- Layout is separate from resolution: Preview format chooses an editable composition variant. Render profile chooses delivery pixels for that variant. Changing 16:9 to 9:16 is a layout decision; changing 1080p to 4K is not.
- Poster is a real output: The node maintains automatic or manual poster preferences per variant. Set poster uses the source playhead and poster_out emits the captured image in the same run that creates it when capture is available.
- Shot Design Gen card: VideoShotNode uses the authored shared-card path. Create an editable shot or add a semantic design revision to an upstream shot.
- Properties sidebar: WebNodePanel.tsx
- Opened surfaces: Nested shot editor; poster preview; reasoning
Steps
- Add Shot Design Gen and describe the framing, focus, layout, hierarchy, source selection, crop, safe area, and text treatment.
- For an origin, leave shot_in empty. For a revision, connect an upstream shot_out to Shot to extend / shot_in.
- Connect standards and sources to their intended sockets: Design System, Structure ref, Image ref, Page to edit, CSS, Footage, and Assets.
- Choose the Shot Design skill, model, and thinking level; add Skill, Review, or a System Prompt only when the built-in stage instructions need augmentation.
- Choose a Preview format and its Render profile. The defaults include 16:9, 9:16, 1:1, and 4:5 with 720p, 1080p, 1440p, and 4K profiles.
- When source footage is available, trim its source range and move the playhead. Use Set poster when that frame should represent the shot.
- Run the node and inspect its editable preview and resolution report. Fix broken/conflicting semantic targets before continuing.
- Connect shot_out to another Shot Design/Motion shot_in, or to Video Composition shots_in. Use editor_out for the resolved native bundle and poster_out for the still.
Inputs in card order
- Prompt / prompt_in: up to eight text briefs.
- Skill / skill_in: one standing instruction source.
- Design System / design_system_in: one complete web/video-target stylesheet and tokens.
- Structure ref / pattern_in: one finished page used as read-only structural/style truth; deliberately requires explicit wiring.
- Image ref / reference_in: up to the shared generation reference limit; visual direction, not placement.
- Page to edit / html_in: one exact final-element editor page with matching exported CSS.
- CSS / css_in: one exact stylesheet-only source.
- Footage / footage_in: up to sixteen inspectable source media values.
- Assets / asset_in: up to twenty-four placed media values.
- Shot to extend / shot_in: one exact upstream shot.
- Review / critic_in: one reviewer result.
- System prompt / system_prompt_in: shared append/replace instruction socket.
Outputs
- Shot / shot_out: exact live shot reference for another shot stage or Video Composition.
- Editor / editor_out: resolved native one-page document bundle.
- Poster / poster_out: current captured poster image when available.
Default formats
- 16:9 Landscape: 1920 x 1080 native canvas.
- 9:16 Story: 1080 x 1920.
- 1:1 Square: 1080 x 1080.
- 4:5 Portrait: 1080 x 1350.
- Each format offers 720p, 1080p, 1440p, and 4K render profiles with orientation-correct dimensions.
Non-destructive chain semantics
A shot wire does not carry a copied document. The downstream stage resolves the upstream contributions by reference and persists only its own contribution. Editing an earlier stage therefore re-derives later previews without creating divergent embedded copies.
Billing
A new semantic design compile uses the selected text/orchestrator model and context, and the card/MCP quote follows the actual model round. Pure deterministic replay or projection refresh does not invent an additional model charge.
Shot Design Gen controls and presets
- Add path: Flowgen → Add → Video & Motion → Shot Design Gen.
- Card: VideoShotNode.
- Properties: WebNodePanel.tsx.
- Controls: Prompt; Skill; Model/thinking; Preview format; Render profile; Source range; Poster.
- Opened surfaces: Nested shot editor; poster preview; reasoning.
Tips
- Use Structure ref for belongs-beside-this composition, Image ref for look/direction, and Assets for files that must appear unchanged.
- Author vertical/square layout decisions as variants; do not treat render resolution as responsive layout.
- Name important layers/elements so later Motion revisions can target stable semantic anchors.
- Set an intentional poster after source trim so list and composition thumbnails remain meaningful.
Limitations and important notes
- One node resolves one nested shot, not a complete master timeline.
- Transitions between separate shots belong to Video Composition.
- A broken or ambiguous semantic target can leave a chain resolved-with-conflicts and block a strict run.
- pattern_in is deliberate-only and is excluded from automatic HTML socket guessing.
Troubleshooting
The node edited the wrong source role
Reconnect using explicit handles. Image ref is direction, Assets is placement, Footage is inspectable source, and Page to edit is exact authored HTML.
A later stage lost or duplicated an earlier design
Connect exact shot_out -> shot_in and do not route the shot through a generic media/default socket.
The poster output is missing
Move to a valid source frame, use Set poster, and rerun. A poster can only be emitted when a current capture exists for the resolved shot version.
Changing 1080p did not rearrange the composition
Render profile changes pixels only. Choose another Preview format/layout variant for a different composition.
FAQ
Can Shot Design come after Shot Motion?
Yes. Design and Motion stages can be repeated and interleaved in any useful order.
Should I flatten the shot before another stage?
No. Keep the exact shot chain so semantic edits remain live and editable.