Generate a complete brand design system — palette, typography, spacing, elevation — from a brand name, industry and mood, via an agentic loop that screenshots and scores itself, then apply or save it.
Where: canvas → left rail → Add → Brand & ads → Design System — Add a Design System node, set brand fields, generate
Key ideas
- Brand inputs: Set Brand Name, Industry and Mood (used when no text prompt is connected); or wire a Prompt/Text node and reference images to steer the look.
- Agentic scoring loop: Generation plans, generates, evaluates and refines — scoring palette, typography, contrast, spacing, elevation, consistency and originality. Tune Max Refinements (default 2) and Quality Target (default 8/10).
- Apply / save / preview: Once generated, Apply pushes the tokens into the project, Save Asset stores it in the asset browser, and Preview shows the screenshot; individual variables are editable.
- Design System output: The design_system_out handle feeds the payload into downstream nodes such as Logo and Section so they inherit the same brand.
- Design System card: DesignSystemNode uses the authored shared-card path. Generate and refine a native design-system payload from brand, industry, mood, and prompt context.
- Properties sidebar: webNodes.tsx
- Opened surfaces: Full preview; result editor; asset save/apply; reasoning
- Separate web and video masters: A complete Design System now carries target-specific editable reference masters. Web and Video can vary composition while sharing the same brand tokens, class rules, responsive/RTL evidence, and motion vocabulary.
- Open and save either master: Each target master opens in its own native editor. Saving writes the authored document and motion back to the Design System node, and downstream web, shot, composition, poster, copy, thumbnail, and export paths paint the complete target stylesheet.
- Motion and absolute section tones: The Web and Video target masters include authored motion. Section tones are absolute design-system tokens rather than vague suggestions, and web/shot/composition/Designer AI surfaces are expected to honor them.
Steps
- Add a Design System node.
- Fill in Brand Name, Industry and Mood (or connect a brief to the Prompt handle).
- Set Max Refinements and Quality Target as desired.
- Click Generate and watch the scoring/refine steps; review the screenshot and scores.
- Apply it to the project, Save as an asset, or wire design_system_out into a Logo / Section node.
- Generate or open the Design System, switch between Web and Video target masters, edit the selected native document, save it back, then connect design_system_out to every web/shot/composition/editor consumer that must paint it.
- Define section-tone tokens and motion in the target master, save it, then connect design_system_out to every consumer that must use the same composition, tone, and movement.
Design System controls and presets
- Add path: Flowgen → Add → Website → Design System.
- Card: DesignSystemNode.
- Properties: webNodes.tsx.
- Controls: Prompt; orchestrator; brand/industry/mood; quality; steps; screenshots; scores; versions.
- Opened surfaces: Full preview; result editor; asset save/apply; reasoning.
What travels on design_system_out
- Tokens/variables, fonts, palette, spacing/elevation, and global/class CSS.
- Separate target master documents and target-specific composition.
- Responsive and RTL web reference states.
- The video master's real shot timeline.
- Authored reveal/timeline motion read back as portable GSAP where supported.
Source-of-truth rule
A connected Design System is not merely a screenshot or payload.css fragment. Consumers read the complete normalized sheet for their target. A pattern page is a separate read-only structural reference and does not replace the Design System.