Web Node Design References
Build complete websites piece by piece, create design systems, and iterate on designs with AI-powered composition.
What You Can Build
Web nodes with design references unlock powerful workflows:
✨ Design Systems: Create a brand style guide, then reference it across all your pages for consistency 🧩 Atomic Components: Build reusable headers, footers, and sections - compose them into complete sites 🔄 Design Variations: Try different color schemes, layouts, or styles without destroying your original 📄 Multi-Page Sites: Create pages that follow the same design language by referencing a "master" page 🎨 Data-Driven Designs: Generate HTML from spreadsheets, parameters, or API data 🖼️ Image-Rich Pages: Reference images by name - paths resolve automatically
Quick Start
The Magic of Quotes
Reference ANY node by putting its name in quotes:
"Create a hero section using 'HeroImage' with colors from 'BrandParams'"
The AI finds those nodes, reads their data, and uses it in your design. No connections required!
Or Connect Nodes
Connect nodes to auto-include them as references:
[Header] ─┐
[Colors] ─┼─→ [Homepage]
[Logo] ─┘
All three are automatically available to the AI.
Pro Tip: Hide the UI for Focus
Press H to hide handles, T to hide title bars, F to enter fullscreen mode. Perfect for presenting your designs or focusing on pixel-perfect layouts!
How It Works
Method 1: Connect Nodes Directly
Any node connected to a Web node automatically becomes a reference:
[Header Web Node] ─┐
[Params (colors)] ─┼─→ [Homepage Web Node]
[DataGrid (data)] ─┘
All three connected nodes are included in the AI context when you use the Web Designer Wizard.
Method 2: Quote Node Names in Prompts
Reference ANY node in your workflow by putting its name in quotes:
Prompt: "Create a hero section using 'HeroImage' with colors from 'BrandParams'"
The wizard will:
- Find nodes named "HeroImage" and "BrandParams" (case-insensitive)
- Extract their data
- Include it in the AI context
- Generate HTML that uses those references
You don't need to connect these nodes! Just name them in quotes.
Supported Node Types
Web Nodes
Use case: Style matching, component composition, layout reference
Example:
Prompt: "Create a footer matching the style of 'Header'"
AI receives:
**Header** (Web/HTML - 2543 chars):
<html>
<header class="bg-blue-600">...</header>
</html>
Params Nodes
Use case: Design tokens, configuration values, theme parameters
Example:
Prompt: "Create a card using 'DesignTokens' for colors and spacing"
AI receives:
**DesignTokens** (Parameters):
- primaryColor: #3b82f6
- secondaryColor: #10b981
- spacing: 24
- borderRadius: 8
DataGrid Nodes
Use case: Generate tables, charts, data-driven content
Example:
Prompt: "Create a sales report table using data from 'SalesData'"
AI receives:
**SalesData** (DataGrid - 12 rows × 4 cols):
Jan, 1200, 850, 2050
Feb, 1800, 920, 2720
Mar, 1500, 1100, 2600
... (truncated)
Image Nodes
Use case: Automatic image path resolution, hero images, logos
Example:
Prompt: "Create a hero section with 'HeroImage' as the background"
AI receives:
**HeroImage** (Image): Use src="images/heroimage.png" for this image
The image path is automatically resolved! The AI will generate:
<div style="background-image: url('images/heroimage.png')">
<h1>Hero Section</h1>
</div>
Code Nodes
Use case: Computed values, transformed data, API responses
Example:
Prompt: "Display the results from 'DataProcessor'"
AI receives the code node's output (JSON or raw data)
Agent/Chat Nodes
Use case: AI-generated content, dynamic text, descriptions
Example:
Prompt: "Create a landing page using content from 'CopyWriter'"
AI receives the agent's generated text
Other Node Types
Chart, DataViz, StatPlot, 3D, Note nodes all work! Each is formatted appropriately for AI context.
UI Features
Reference Badge
Web nodes show a blue badge indicating how many references they have:
[Web Node] [2 refs] 📄 Homepage
Hover over the badge to see which nodes are referenced.
Wizard Hint
The Web Designer Wizard shows available references:
💡 2 connected: Header, Footer. Reference any node: "NodeName"
This reminds you that:
- Connected nodes are automatically included
- You can quote any node name to reference it
Creative Workflows
1. Building a Design System from Scratch
Step 1: Create Your Brand Foundation
Create a Params node named "BrandSystem":
Primary: #3b82f6
Secondary: #10b981
Dark: #1f2937
Spacing: 24
Radius: 8
FontSize: 16
Step 2: Create Atomic Components
Create separate Web nodes for each component, all referencing "BrandSystem":
Header Node - Prompt:
"Create a modern navigation header using colors from 'BrandSystem'"
Hero Node - Prompt:
"Create an engaging hero section using 'BrandSystem' colors and 'HeroImage'"
Card Node - Prompt:
"Create a feature card component with 'BrandSystem' styling"
Footer Node - Prompt:
"Create a footer matching 'Header' style using 'BrandSystem'"
Step 3: Compose Pages
Create homepage, about page, contact page - all reference your components:
Homepage - Prompt:
"Create a landing page with 'Header', 'Hero', three 'Card' components, and 'Footer'"
About Page - Prompt:
"Create an about page using 'Header', 'Footer', and 'BrandSystem' colors"
Result: Entire website with consistent branding! Change BrandSystem, regenerate nodes = instant rebrand.
2. Design Iteration & Variations
The Problem: You love your design but want to try alternatives without losing the original.
The Solution: Branch and iterate!
[Original Homepage]
↓
┌────┼────┬─────────┐
↓ ↓ ↓ ↓
[Version A] [Version B] [Version C]
(Blue) (Green) (Dark)
Each variation prompt:
"Create a page matching 'Original Homepage' but with a green color scheme"
"Create a page matching 'Original Homepage' but with a dark theme"
"Create a page matching 'Original Homepage' but with bolder typography"
Pro tip: Name nodes clearly: "Homepage-Original", "Homepage-Blue", "Homepage-Dark"
Press H and T to hide UI chrome, compare versions side-by-side!
3. Multi-Page Website with Consistent Design
Step 1: Create your master design
Homepage - Create a beautiful homepage with your desired style
Step 2: Create other pages that follow the same design
About Page - Prompt:
"Create an about page following the design style of 'Homepage'"
Services Page - Prompt:
"Create a services page matching 'Homepage' design with a 3-column grid"
Contact Page - Prompt:
"Create a contact form page consistent with 'Homepage' style"
Result: Every page feels cohesive! The AI learns typography, colors, spacing, and layout patterns from your homepage.
4. Data-Driven Site Generation
The Magic: Generate entire pages from spreadsheet data!
Setup:
[HTTP Request] → Fetch products API
↓
[Code Node] → Transform JSON
↓
[DataGrid] → Display as table
↓
[Product Catalog] → Generate HTML
Product Catalog Prompt:
"Create a product catalog grid using data from 'DataGrid', styled with 'BrandSystem'"
The AI reads your data and generates:
- Product cards with actual names, prices, descriptions
- Proper image paths
- Add-to-cart buttons
- Responsive grid layout
Update the data, regenerate the page = instant new catalog!
5. Atomic Component Library
Build a reusable component library like Storybook:
[BrandSystem Params]
↓
┌────┴────┬─────────┬─────────┬──────────┐
↓ ↓ ↓ ↓ ↓
[Button] [Card] [Modal] [Form] [Nav]
Each component:
- References "BrandSystem" for colors/spacing
- Named clearly: "Button-Primary", "Card-Feature", "Modal-Confirm"
- Sized to ~300px for easy viewing
Usage Library Page - Prompt:
"Create a component showcase displaying 'Button', 'Card', 'Modal', 'Form', and 'Nav'"
Pro Workflow:
- Press H to hide connection handles
- Press T to hide title bars
- Arrange components in a grid
- Take screenshots for documentation!
6. Landing Page with Image References
Setup: Add Image nodes for all your visuals
[HeroBackground]
[Logo]
[Feature1Icon]
[Feature2Icon]
[TestimonialPhoto]
[CTABackground]
Landing Page Prompt:
"Create a landing page with:
- 'HeroBackground' as hero section background
- 'Logo' in the header
- Feature sections using 'Feature1Icon' and 'Feature2Icon'
- Testimonial section with 'TestimonialPhoto'
- CTA section with 'CTABackground'
Style with 'BrandColors'"
Magic: Images automatically resolve! No copy-pasting paths or base64.
7. A/B Testing Variations
Test different value propositions without rebuilding:
[Original Hero]
↓
┌───┴───┬──────────┬─────────┐
↓ ↓ ↓ ↓
[Test A] [Test B] [Test C] [Test D]
"Save" "Grow" "Scale" "Win"
Each variant prompt:
"Create a hero matching 'Original Hero' but emphasize saving money"
"Create a hero matching 'Original Hero' but emphasize growth"
Compare side-by-side: Press H and T to hide UI, arrange in a grid, screenshot for stakeholders!
8. Progressive Enhancement Workflow
Start simple, add complexity:
V1 - Simple - Prompt:
"Create a simple landing page with hero, 3 features, and contact form"
V2 - Enhanced - Prompt:
"Create a page like 'V1' but add animations and interactive elements"
V3 - Rich - Prompt:
"Create a page like 'V2' but add testimonials from 'TestimonialData' and pricing from 'PricingGrid'"
Each version builds on the last. Keep all versions to show evolution!
2. Parameterized Design
Use a Params node to control design across multiple pages:
[Brand Params]
(primaryColor: #3b82f6)
(fontSize: 16)
(spacing: 24)
↓
┌──┴──┬────────┬─────────┐
↓ ↓ ↓ ↓
[Header] [Hero] [Features] [Footer]
Each node's prompt:
"Create a [component] using colors and spacing from 'Brand Params'"
All components will have consistent styling!
3. Data-Driven Content
Generate HTML from DataGrid data:
[HTTP Request]
↓
[Code Node: Transform]
↓
[DataGrid: Display]
↓
[Web Node: Report]
Web Node prompt:
"Create a sales report table with charts using data from 'DataGrid'"
4. Image-Rich Landing Page
Reference multiple images by name:
[HeroImage] [Logo] [Feature1]
↓ ↓ ↓
└───────────┴─────────────┘
↓
[Landing Page Web Node]
Prompt:
"Create a landing page with 'HeroImage' as background, 'Logo' in the header,
and 'Feature1' in the features section"
All images are automatically resolved to correct paths!
5. AI-Generated Content
Use Agent nodes to generate dynamic content:
[Agent: Generate Hero Copy]
↓
[Agent: Generate Features]
↓
[Web Node: Landing Page]
Web Node prompt:
"Create a landing page using copy from 'Generate Hero Copy' and
feature descriptions from 'Generate Features'"
Technical Details
Reference Extraction
When you reference a node, the system:
- Finds the node: Searches by display name (case-insensitive)
- Extracts data: Gets the appropriate data based on node type
- Formats for AI: Converts to human-readable format
- Includes in context: Adds to the AI prompt
Image Path Resolution
Image nodes are special-cased to provide usable paths:
- Base64 data URLs: Passed through as-is
- External URLs: Converted to
images/filename.pngformat - No URL: Uses sanitized node name as filename
This means when you reference an image named "HeroImage", the AI receives:
Use src="images/heroimage.png" for this image
And the Web node automatically resolves this path to the actual image data when rendering.
Execution Context
References work in both:
-
Interactive mode (Web Designer Wizard in UI)
- Collects connected node references automatically
- Parses quotes in prompt to find additional references
- Includes all in AI context
-
Headless execution (Workflow executor)
- Checks input for
input.value.designReferencesarray - Formats and includes in AI prompt
- Generates HTML with reference data
- Checks input for
Keyboard Shortcuts for Better Design Workflow
Master these shortcuts to supercharge your design process:
| Shortcut | Action | When to Use |
|---|---|---|
| H | Toggle handles | Hide connections for clean screenshots and presentations |
| T | Toggle titles | Hide title bars for minimalist view |
| F | Fullscreen mode | Focus on a single design without distractions |
| Cmd/Ctrl + W | Toggle AI wizard | Quick access to generate/edit content |
| Space | Node menu | Fast node creation |
| Delete | Delete node | Remove selected nodes |
| Cmd/Ctrl + Z | Undo | Revert changes |
| Cmd/Ctrl + Shift + Z | Redo | Restore undone changes |
Pro Workflow Example:
- Create your component library (Button, Card, Nav, etc.)
- Press H to hide all connection handles
- Press T to hide all title bars
- Arrange nodes in a neat grid
- Press F for fullscreen
- Take screenshot → Beautiful component documentation!
Best Practices
1. Name Your Nodes Clearly
Descriptive names make references effortless:
✅ Good: "HeroImage", "BrandParams", "SalesData", "Header-Main" ❌ Bad: "Node 1", "Untitled", "asdf", "test123"
Why it matters: You'll type these names in quotes. Make them memorable and specific!
2. Build Your Design System First
Start with foundation, then build up:
Step 1: Parameters
- Create "BrandColors" (primary, secondary, accent)
- Create "Spacing" (margins, padding values)
- Create "Typography" (font sizes, weights)
Step 2: Atoms
- Create "Button" referencing BrandColors
- Create "Input" referencing BrandColors + Spacing
- Create "Card" referencing all params
Step 3: Molecules
- Create "Form" using Button + Input
- Create "Nav" using Button + BrandColors
Step 4: Pages
- Reference everything!
3. Use Branches for Iteration
Never destroy your work - branch instead:
[Original]
↓
┌──┴──┬──────┬──────┐
↓ ↓ ↓ ↓
[V1] [V2] [V3] [V4]
Each version references "Original" with a twist:
- "Like 'Original' but darker theme"
- "Like 'Original' but minimalist"
- "Like 'Original' but with animations"
Compare all versions: Press H + T, arrange in grid, present to stakeholders!
4. Keep References Focused
Quality over quantity:
✅ Good: 3-5 connected references, quote 2-3 more as needed ❌ Bad: 20+ connected nodes (overwhelms AI context)
Rule of thumb: If a node is used in most prompts, connect it. If it's occasional, quote it.
5. Combine Connection + Quotes Strategically
Connect: Foundational elements (BrandSystem, Header, Footer) Quote: Specific assets or one-off references (specific images, data tables)
Example:
[BrandSystem] ──→ [About Page]
↑
Prompt: "Create about page with 'TeamPhoto' and data from 'CompanyStats'"
BrandSystem is always there. TeamPhoto and CompanyStats only when needed.
6. Create a Component Library
Build once, reuse everywhere:
- Create folder of components (use sticky notes to label sections)
- Name clearly: "Button-Primary", "Card-Feature", "Modal-Confirm"
- Size components small (~300-400px)
- Reference in any page:
"Add 'Button-Primary' for the CTA"
Pro tip: Press H + T, take screenshots, create a visual component catalog!
7. Test Your References
Before generating a big page, verify references have data:
For Images: Click the image node, ensure image loaded For DataGrids: Check that data is visible For Params: Verify values are set For Web nodes: Ensure HTML is generated
Quick test: Look at the reference badge on your Web node - it shows how many refs are connected!
8. Use Version Naming
Clear version names help you track experiments:
Homepage-Original
Homepage-Dark-v1
Homepage-Dark-v2
Homepage-Light-Minimal
Homepage-Light-Rich
Later, you can reference any version:
"Create a contact page matching 'Homepage-Dark-v2' style"
9. Layer Your Prompts
Start broad, get specific:
First generation:
"Create a modern landing page"
Then edit:
"Make it match 'BrandColors'"
Then enhance:
"Add 'HeroImage' as background"
Then polish:
"Add pricing section using data from 'PricingTable'"
Each step builds on the last without starting over!
10. Document Your System
Use Sticky Note nodes to label sections:
📝 [Sticky: "Brand Foundation"] ─→ [BrandColors] [Typography] [Spacing]
📝 [Sticky: "Components"] ─→ [Button] [Card] [Nav] [Form]
📝 [Sticky: "Pages"] ─→ [Home] [About] [Contact]
Makes your workflow self-documenting!
Limitations
Reference Count
While you can reference many nodes, too many can overwhelm the AI context. Recommended:
- Connected: 3-5 nodes
- Quoted: 5-10 additional nodes
- Total: Keep under 15 references
Execution Order
References work best with executed nodes. For workflow execution:
- Execute upstream nodes first
- Then run Web node with references
For interactive use:
- Connected nodes should have data
- Quoted nodes should exist and have data
Name Matching
Quoted names must match exactly (case-insensitive):
- "HeroImage" matches a node named "heroimage" or "HeroImage"
- "Hero Image" will NOT match "HeroImage" (space vs. no space)
Related Documentation
- Web Node - Complete Web node documentation
- Params Node - Using parameters in workflows
- DataGrid Node - Working with tabular data
- Image Generation - Creating images for references
- Template Variables - Dynamic content replacement
Quick Tips & Tricks
🎨 Create Design Variations Fast
Prompt: "Make this design 'darker/lighter/bolder/minimal/playful'"
The AI understands design language!
🔄 Instant Rebranding
Change your BrandSystem Params node, then regenerate all components that reference it. Entire site rebranded in minutes!
📸 Create Presentations
- Build multiple design variations
- Press H + T to hide UI chrome
- Arrange in grid layout
- Press F for fullscreen
- Screenshot for stakeholders!
🧪 Experiment Fearlessly
Web nodes are non-destructive. Create 10 variations, keep the best, delete the rest. No risk!
⚡ Speed Run: Full Website in 10 Minutes
- Create BrandSystem params (2 min)
- Generate Header + Footer referencing BrandSystem (3 min)
- Create 3 pages, each referencing Header, Footer, BrandSystem (5 min)
- Done! Consistent, branded website.
🎯 Match Existing Sites
Have a design you love? Create a Web node with that HTML, then:
"Create a [new page] matching the style of 'ExistingDesign'"
The AI learns the design patterns and applies them!
🔍 Debug References
Not working? Check:
- ✅ Node names match exactly (case-insensitive)
- ✅ Nodes have data (images loaded, params set, etc.)
- ✅ Reference badge shows the count
- ✅ Wizard hint shows which nodes are connected
💡 Smart Image References
Instead of copy-pasting base64 strings, just reference:
"Use 'Logo' in the header"
"Background with 'HeroImage'"
Paths auto-resolve!
Version History
- v1.0 (2025-10-03): Initial release with multi-type node references
- Connect nodes directly for auto-reference
- Quote node names in prompts
- Support for all node types (Web, Params, DataGrid, Image, Code, Agent, Chart, etc.)
- Smart image path resolution
- UI badges and hints
- Keyboard shortcuts (H, T, F) for clean design views
- Support for design systems, atomic components, and multi-page sites