Web Design Studio

The fastest way to think, design, and test on any platform.

Circuitry isn't just a workflow tool — it's a complete web design studio powered by AI. Build design systems, create magic widgets, compose entire websites, and iterate faster than any traditional design tool. Full iPad support with handwriting, drawing, and the most powerful mobile design experience available.

What Makes It Special

🎨 Design Systems & Atomic Components

Build once, reference everywhere. Create a design system with Params nodes (colors, spacing, typography), then build components (buttons, cards, forms) that reference it. Compose complete pages from your components. Change your brand colors once, regenerate everything = instant rebrand.

Workflow:

[BrandSystem Params] → [Button] [Card] [Nav] → [Homepage] [About] [Contact]

All pages share the same design language. See Design References for complete guide.

⚡ Magic Widgets

Create interactive components that communicate with workflows. Calculators, forms, controls, dashboards — all with a simple data output API:

window.circuitry.setOutput({ result: calculation })

Widgets can send data to downstream nodes, making them perfect for interactive dashboards and data collection.

🖼️ Multi-Model Image Generation

Generate images with multiple AI models:

• DALL-E 2 & 3 (OpenAI)
• Nano Banana (Google's fast model)
• Stable Diffusion (Hugging Face, Stability AI)
• Local models via API endpoints

Reference images by name — paths auto-resolve! See Image Generation Models.

✏️ Drawing & Handwriting

Full drawing layer with handwriting support:

• Pen, marker, highlighter tools
• Pressure-sensitive strokes (Apple Pencil)
• Whiteboard for visual collaboration
• Export drawings as images

Perfect for wireframing, annotations, and visual thinking.

📱 iPad Optimized

Nothing this powerful exists on iPad. Full gesture support, Apple Pencil integration, optimized UI, and complete feature parity with desktop. Design anywhere, anytime.

Core Features

Reference ANY Node

Web nodes can reference other nodes (Web, Params, DataGrid, Image, Code, etc.):

Two methods:

1. Connect nodes → Auto-included as references
2. Quote names in prompts → AI finds and uses them

Examples:

"Create a hero using 'HeroImage' with colors from 'BrandParams'"
"Make a page matching 'Homepage' style with 'TeamPhoto'"
"Build a table from 'SalesData' styled with 'DesignSystem'"

See Design References for full guide.

Keyboard Shortcuts for Design

Master these for professional workflow:

Pro tip: Press H + T, arrange components in grid, press F for fullscreen = perfect component documentation!

Edit Modes

Web nodes have two powerful modes:

CREATE Mode: Generate new HTML from scratch

"Create a pricing table with 3 tiers"
"Build a calculator with basic operations"

EDIT Mode: Intelligent modifications to existing HTML

• DOM manipulation (CSS, text, attributes)
• Or full HTML replacement when needed
• Preserves JavaScript on live sites

See Web Node for details.

Creative Workflows

1. 10-Minute Website Speed Run

1. Create BrandSystem params (colors, spacing) — 2 min
2. Generate Header + Footer referencing BrandSystem — 3 min
3. Create 3 pages, each referencing Header, Footer, BrandSystem — 5 min
4. Done! Consistent, branded website.

2. Design Iteration Without Risk

Never destroy your work — branch and iterate:

[Original Design]
    ↓
 ┌──┴──┬──────┬──────┐
 ↓     ↓      ↓      ↓
[Dark] [Light] [Bold] [Minimal]

Each references "Original Design" with variations:

• "Like 'Original Design' but with dark theme"
• "Like 'Original Design' but minimalist"

Press H + T to hide UI, compare side-by-side!

3. Component Library à la Storybook

[BrandSystem]
    ↓
 ┌──┴──┬────┬─────┬──────┐
 ↓     ↓    ↓     ↓      ↓
[Button] [Card] [Modal] [Form] [Nav]

Build components once. Reference anywhere:

"Add 'Button-Primary' for the CTA"
"Use 'Card-Feature' for features section"

4. Data-Driven Pages

Generate HTML from spreadsheets:

[HTTP Request] → [Code Transform] → [DataGrid] → [Product Catalog]

Prompt: "Create product cards from 'DataGrid' data"

AI reads data, generates:

• Product cards with real names, prices
• Proper image paths
• Interactive elements
• Responsive grid

Update data, regenerate = instant new catalog!

5. Multi-Page Sites with Consistent Design

Step 1: Create beautiful homepage

Step 2: Create other pages referencing it:

"Create about page matching 'Homepage' design"
"Create contact form consistent with 'Homepage' style"

AI learns typography, colors, spacing, layouts from your homepage!

Image Workflow

Add Images to Workflow

1. Generate with AI: Use Image node with DALL-E, Nano Banana, etc.
2. Upload: Drag & drop into Image node
3. From URL: Fetch external images

Reference in Web Nodes

"Create hero section with 'HeroImage' as background"
"Add 'Logo' in the header"
"Feature section with 'ProductPhoto'"

Images auto-resolve to correct paths! No copy-pasting base64.

Drawing & Whiteboarding

Access Drawing Layer

Click pencil icon or use Drawing Panel

Tools Available

• Pen: Precise lines
• Marker: Medium thickness
• Highlighter: Transparent overlay
• Eraser: Remove strokes

Gestures (iPad)

• Single tap: Select tool
• Two-finger tap: Undo
• Three-finger tap: Redo
• Pinch: Zoom canvas
• Two-finger pan: Move viewport

Use Cases

• Wireframe layouts
• Annotate designs
• Sketch ideas
• Visual collaboration
• Mind mapping

Best Practices

1. Build Design System First

Start with foundation:

1. Params for colors, spacing, typography
2. Components referencing params
3. Pages referencing components

Result: Consistent, maintainable designs

2. Name Nodes Descriptively

✅ Good: "HeroImage", "BrandColors", "Button-Primary" ❌ Bad: "Node 1", "Untitled", "asdf"

You'll type these in quotes — make them memorable!

3. Use Branches for Experiments

Create variations without destroying originals:

[Original] → [V1-Dark] [V2-Minimal] [V3-Bold]

Keep what works, delete the rest.

4. Layer Your Prompts

Start broad, refine:

1. "Create modern landing page"
2. "Make it match 'BrandColors'"
3. "Add 'HeroImage' as background"
4. "Add pricing from 'PricingData'"

Each step builds on the last!

5. Use Keyboard Shortcuts

• H = Hide handles before screenshots
• T = Hide titles for clean view
• F = Fullscreen for presentations
• Cmd/Ctrl + W = Quick AI wizard access

iPad Tips

Optimize for Touch

• Nodes size automatically
• Gesture support built-in
• Apple Pencil for drawing
• Sidebar collapsible for space

Best Practices

1. Use fullscreen mode (F) for maximum space
2. Hide UI chrome (H + T) for focus
3. Draw wireframes before generating
4. Use sticky notes for annotations

Performance

• Test mode reduces DOM by 70%
• Lazy loading for components
• Optimized rendering
• Smooth 60fps animations

Advanced Techniques

Progressive Enhancement

Build complexity iteratively:

V1: Simple page

"Create simple landing page"

V2: Add features

"Like 'V1' but add animations"

V3: Rich content

"Like 'V2' but add testimonials from 'TestimonialData'"

A/B Testing

Test value propositions:

[Hero Original]
    ↓
 ┌──┴──┬─────┬──────┐
 ↓     ↓     ↓      ↓
[Save] [Grow] [Scale] [Win]

Each emphasizes different benefit. Compare with H + T!

Match Existing Sites

Love a design? Load it in Web node, then:

"Create contact page matching 'ExistingDesign' style"

AI learns design patterns and applies them!

Quick Tips

🎨 Instant Rebranding

Change BrandSystem params, regenerate all components. Done in minutes!

📸 Create Presentations

H + T to hide UI, arrange in grid, F for fullscreen, screenshot!

🧪 Experiment Fearlessly

Web nodes are non-destructive. Create 10 variations, keep the best!

🔍 Debug References

Check:

• ✅ Node names match (case-insensitive)
• ✅ Nodes have data
• ✅ Reference badge shows count
• ✅ Wizard hint shows connections

Related Documentation

• Design References - Complete guide to referencing nodes
• Web Node - Web node documentation
• Image Generation - Image node and AI models
• Keyboard Shortcuts - Full shortcuts list
• Widget Data Output - Interactive widget API
• DataGrid Node - Spreadsheet data for HTML

What's Possible

With Circuitry's Web Design Studio, you can:

✅ Build complete websites with design systems ✅ Create reusable component libraries ✅ Generate magic widgets with data output ✅ Design on iPad with full power ✅ Draw and annotate with Apple Pencil ✅ Generate images with multiple AI models ✅ Iterate on designs without fear ✅ Export as standalone HTML ✅ Test and present with clean UI modes

The fastest way to go from idea to design. Try it!