Node Reference
Complete reference for all 19 visual nodes in the Design Agent canvas, in workflow order.
Overview
Each node is a specialized helper. Connect them with wires and data flows from outputs to inputs. The nodes below are listed in a typical workflow order—from idea to export.
1. New Input
A little notebook. You type words into it—maybe "I want a login button" or "Make a blue header." It holds your ideas in text form.
| Tool | Description |
|---|---|
| Connects from | Nothing (you type directly) |
| Connects to | Simple Output, Create a Plan, WireFrame, The Architect, and more |
| Outcome | Your words travel to the next node, which uses them to do something smart. |
2. Create a Plan
A friendly teacher. You give it a big idea ("I want to build a shopping app"), and it writes a plan for you—step by step, like a recipe.
| Tool | Description |
|---|---|
| Connects from | New Input |
| Connects to | Generate Steps |
| Outcome | A written plan in markdown. One output handle sends the whole plan. |
3. Generate Steps
A checklist maker. It takes a plan and breaks it into smaller steps. Each step is one thing to build.
| Tool | Description |
|---|---|
| Connects from | Create a Plan |
| Connects to | WireFrame (each step), Generate Image (each step) |
| Outcome | A list of steps. Each step has its own output handle. |
4. Simple Output
Reads your words and picks out the important parts. "I want a blue header, a login button, and a footer" → turns that into a neat list.
| Tool | Description |
|---|---|
| Connects from | New Input |
| Connects to | WireFrame (each item) |
| Outcome | A clean list of ideas. Each item has its own output handle. |
5. WireFrame
A sketch artist. You give it one idea (from Simple Output or Generate Steps), and it draws a simple wireframe—boxes, buttons, lines. No fancy colors yet.
| Tool | Description |
|---|---|
| Connects from | Simple Output, Generate Steps, Architect Styling (for color overrides) |
| Connects to | Enhance Frame, Export Designs, Heatmap, Architect Styling, Color Info |
| Outcome | A simple HTML wireframe you can enhance, export, or style. |
6. Generate Image
A magic art box. You describe what you want in words (or connect from Generate Steps), and it draws a picture for you.
| Tool | Description |
|---|---|
| Connects from | Generate Steps (one step at a time) |
| Connects to | Extract Colors, The Architect, Heatmap |
| Outcome | A new image. You can extract colors, feed to The Architect, or run Heatmap. |
7. Enhance Frame
A polish helper. It takes a plain wireframe and makes it nicer—adds better styling, improves how it looks.
| Tool | Description |
|---|---|
| Connects from | WireFrame (optionally with colors from Create Palette) |
| Connects to | Export Designs, Heatmap |
| Outcome | A prettier version of the wireframe. You can export or run a UX audit. |
8. Upload Image
A photo frame. You pick a picture from your computer—a screenshot, a drawing, or any image you want to use.
| Tool | Description |
|---|---|
| Connects from | Nothing (you upload directly) |
| Connects to | Extract Colors, The Architect, Generate Image, Heatmap |
| Outcome | The picture travels to the next node. Extract Colors finds main colors. The Architect turns it into a design. Heatmap shows saliency and UX insights. |
9. Add Screenshot
A special camera. It takes a picture of a screen (website or app) and shows you a heat map—where people's eyes go first. Hot colors mean "look here a lot!" Cool colors mean "not so much."
| Tool | Description |
|---|---|
| Connects from | Nothing (you capture or paste a screenshot) |
| Connects to | The Architect, Extract Colors, Heatmap |
| Outcome | The screenshot gets analyzed. The Architect can turn it into a design. Extract Colors pulls colors. Heatmap shows saliency and UX insights. |
10. The Architect
The big helper. It looks at a screenshot or picture and says "I can build that!" It turns what it sees into a real, working design—HTML you can see in a browser.
| Tool | Description |
|---|---|
| Connects from | Upload Image, Add Screenshot, Generate Image, Architect Input |
| Connects to | Architect Styling, Components, Architect Input |
| Outcome | The picture becomes a real design. You can style it, pull out components, or chat with Architect Input for more screens. |
11. Architect Input
A chat bubble next to The Architect. You type things like "Add a login screen" or "Make the header bigger." It talks to The Architect and gets new screens or changes built.
| Tool | Description |
|---|---|
| Connects from | The Architect |
| Connects to | Nothing (it receives from Architect) |
| Outcome | New designs appear based on your words. The Architect keeps a history of what you asked for. |
12. Create Palette
A paint box with five slots. You can shake it to get random colors, or lock some and shake again for new ones that match. You can also connect colors from other nodes.
| Tool | Description |
|---|---|
| Connects from | Nothing (you generate or lock colors) |
| Connects to | WireFrame, Architect Styling, Color Info (via the "+" bubble when you drag a color row) |
| Outcome | Your palette travels to other nodes so they can use those colors in designs. |
13. Mini App
A little TV window. You type a website address (URL) and it shows that website inside the card. You can see it, test it, and connect it for analysis.
| Tool | Description |
|---|---|
| Connects from | Nothing (you type the URL) |
| Connects to | Heatmap (for UX audit), Export Designs |
| Outcome | The live mini app can be captured and analyzed or exported. |
14. Architect Styling
A color picker for The Architect's designs. It shows the design and lets you change colors on parts—"make this button blue" or "make that header green." Connect colors from Create Palette or Color Info.
| Tool | Description |
|---|---|
| Connects from | The Architect |
| Connects to | WireFrame (each item can receive a color override from Color Info) |
| Outcome | A styled version of the Architect's design. You can tweak colors on specific elements. |
15. Extract Colors
A color detective. You give it a picture, and it finds the main colors—usually six. Shows them as swatches. Click one for details, or drag one out to create a Color Info card.
| Tool | Description |
|---|---|
| Connects from | Upload Image, Add Screenshot, Generate Image |
| Connects to | WireFrame (each color), Color Info (via the "+" bubble when you drag a color row) |
| Outcome | A palette of colors from the image. Each color has its own output handle. |
16. Color Info
A color fact card. It shows one color and tells you everything—hex, RGB, HSL, and more. Usually created by dragging a color from Extract Colors or Create Palette onto the "+" bubble.
| Tool | Description |
|---|---|
| Connects from | Extract Colors (one color row), Create Palette (one color row) |
| Connects to | WireFrame (to a specific part like "Button" or "Header"), Architect Styling |
| Outcome | That one color gets applied to a specific part of a wireframe or design. |
17. Components
A parts drawer. The Architect builds a design, and Components pulls out the reusable pieces—buttons, cards, headers. You can save them to your design library.
| Tool | Description |
|---|---|
| Connects from | The Architect |
| Connects to | Nothing (it receives from Architect) |
| Outcome | A list of Figma components you can add to your canvas. |
18. Export Designs
A delivery truck. It takes wireframes (plain or enhanced) and sends them to your Figma canvas as real frames.
| Tool | Description |
|---|---|
| Connects from | WireFrame, Enhance Frame, Mini App |
| Connects to | Nothing (it exports to Figma) |
| Outcome | Your wireframes appear on the main canvas as Figma frames. |
19. Heatmap
An attention checker. Connect an image (Add Screenshot, Upload Image, Generate Image) or a wireframe/enhanced frame/mini app. For images: saliency heat map and UX insights. For wireframes: captures a screenshot and runs a UX audit with tips.
| Tool | Description |
|---|---|
| Connects from | Add Screenshot, Upload Image, Generate Image, WireFrame, Enhance Frame, Export Designs, Mini App |
| Connects to | Nothing (it receives and analyzes) |
| Outcome | For images: heat map and saliency insights. For wireframes: creates Add Screenshot, runs UX analysis, shows strengths and recommendations. |