Documentation

Visual Nodes Overview

Introduction to the Design Agent canvas—a node-based workflow for creating designs from text, images, and wireframes.

What Are Visual Nodes?

Imagine you have a big table with little cards on it. Each card is like a helper that does one job. You can connect them with stretchy wires. When you connect the right helpers together, they pass things along and create something new—like a picture, a list, or a whole design.

The Design Agent canvas is a node-based workflow. Each node is a specialized tool: some take your text ideas, some turn images into designs, some extract colors, and some export to Figma. Connect them in the right order and you can go from "I want a login button" to a polished wireframe in minutes.

How It Works

Nodes have input and output handles (blue circles for outputs, gray for inputs). Drag from an output to an input to create a connection. Data flows along the wires—text, images, wireframes, colors—and each node transforms or uses that data in a specific way.

  • Start with New Input or Upload Image to bring in your ideas
  • Use Create a Plan and Generate Steps to break big ideas into steps
  • Connect to WireFrame, Generate Image, or The Architect to produce designs
  • Use Extract Colors, Create Palette, and Color Info to style your work
  • Export to Figma or run Heatmap for UX insights
Pro Tip
Use the Agent Prompt to describe what you want in plain words—e.g. "I need a new input and a wireframe"—and it will add the right nodes and connect them for you.