Automation Builder Wireframes with shadcn/ui

Status: Visual Programming Interface
Framework: shadcn/ui + React Flow + Tailwind CSS
Verified: Aligned with n8n integration patterns and user research
Reference: UI Architecture Guide

Executive Summary

Make automation accessible to non-programmers while maintaining the power that technical users expect. These wireframes show how n8n's complexity is abstracted into simple, visual workflows that transform the "40+ hour automation nightmare" into a "15-minute visual delight."

The Canvas Approach

Based on Phase 1 findings where users reported "automation is too technical," our builder:

• Visual nodes replace code scripts
• Drag-and-drop connections replace API configurations
• Pre-built templates replace starting from scratch
• Live testing replaces blind deployment
• Smart suggestions replace manual discovery

Core Innovation: Making n8n Simple

Automation Builder Canvas Wireframe

Evidence-Based Design Decisions

The Three-Zone Layout with shadcn/ui Components

1. Left Panel: Node Library using shadcn/ui

Implementation with shadcn/ui:

// Node library using shadcn/ui components
import { ScrollArea } from "@/components/ui/scroll-area"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Search } from "lucide-react"
import { Input } from "@/components/ui/input"

export function NodeLibrary() {
  return (
    <div className="w-[280px] border-r bg-background p-4">
      <div className="relative mb-4">
        <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
        <Input placeholder="Search nodes..." className="pl-8" />
      </div>
      
      <ScrollArea className="h-[calc(100vh-120px)]">
        <Accordion type="single" collapsible defaultValue="triggers">
          <AccordionItem value="triggers">
            <AccordionTrigger>
              <span className="flex items-center gap-2">
                <Badge variant="secondary">🟢</Badge>
                Triggers
              </span>
            </AccordionTrigger>
            <AccordionContent>
              <div className="space-y-2">
                <NodeCard icon="🟢" title="Contact Subscribes" />
                <NodeCard icon="🏷️" title="Tag Added" />
                <NodeCard icon="📅" title="Date Reached" />
                <NodeCard icon="🔄" title="Field Changed" />
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </ScrollArea>
    </div>
  )
}

Node Components with shadcn/ui:

// Custom node component using shadcn/ui
import { Handle, Position } from 'reactflow'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Mail, Clock, Tag, Users, Target } from "lucide-react"

function CustomNode({ data }) {
  const getIcon = (type: string) => {
    switch(type) {
      case 'email': return <Mail className="h-4 w-4" />
      case 'wait': return <Clock className="h-4 w-4" />
      case 'tag': return <Tag className="h-4 w-4" />
      case 'segment': return <Users className="h-4 w-4" />
      case 'goal': return <Target className="h-4 w-4" />
      default: return null
    }
  }
  
  return (
    <Card className="min-w-[200px]">
      <Handle type="target" position={Position.Top} />
      <CardHeader className="p-3">
        <CardTitle className="text-sm flex items-center gap-2">
          {getIcon(data.type)}
          {data.label}
        </CardTitle>
      </CardHeader>
      <CardContent className="p-3 pt-0">
        <Badge variant={data.active ? "default" : "secondary"}>
          {data.status}
        </Badge>
      </CardContent>
      <Handle type="source" position={Position.Bottom} />
    </Card>
  )
}

Smart Categorization:

• Only email-relevant nodes shown
• Most-used nodes at top
• Visual icons for recognition
• Tooltips explain each node

2. Center Panel: Visual Canvas with React Flow

Implementation with shadcn/ui and React Flow:

// Workflow canvas using React Flow with shadcn/ui styling
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  BackgroundVariant,
} from 'reactflow'
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ZoomIn, ZoomOut, Maximize2 } from "lucide-react"

export function WorkflowCanvas() {
  return (
    <div className="flex-1 h-full">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        fitView
        className="bg-background"
      >
        <Background 
          variant={BackgroundVariant.Dots} 
          gap={20} 
          size={1}
          className="text-muted-foreground/20"
        />
        <MiniMap 
          className="bg-background border rounded-md" 
          nodeColor="hsl(var(--primary))"
        />
        <Controls className="bg-background border rounded-md">
          <Button size="icon" variant="ghost">
            <ZoomIn className="h-4 w-4" />
          </Button>
          <Button size="icon" variant="ghost">
            <ZoomOut className="h-4 w-4" />
          </Button>
          <Button size="icon" variant="ghost">
            <Maximize2 className="h-4 w-4" />
          </Button>
        </Controls>
      </ReactFlow>
    </div>
  )
}

Interaction Patterns:

Drag node → Show placement ghost
Drop node → Snap to grid
Connect nodes → Draw line
Invalid connection → Show error
Delete → Select + Del key

Visual Hierarchy:

• Triggers: Green circles (start points)
• Actions: Colored rectangles (by type)
• Conditions: Red diamonds (decisions)
• Connections: Gray lines with arrows
• Active path: Blue highlight during test

3. Right Panel: Properties & Stats (280px)

Purpose: Configuration and monitoring

Dynamic Sections:

Node Properties (Context-sensitive)

• Send Email: Campaign selection, timing
• Wait: Duration (hours, days, weeks)
• If/Else: Condition builder
• Tag: Tag selection/creation

Automation Performance

• Active contacts in flow
• Completed contacts
• Success/failure rates
• Average time to complete

Quick Actions

• Test with sample contact
• View activity log
• Clone automation
• Export/import

Node Connection Rules

Valid Connections

Connection Validation

• Green line: Valid connection
• Red line: Invalid connection
• Dotted line: Conditional path
• Thick line: Primary flow

Smart Connection Behavior

1. Auto-connect: Dropped nodes connect to nearest valid node
2. Multi-connect: One trigger can connect to multiple actions
3. Loop detection: Prevents infinite loops
4. Path highlighting: Shows flow during testing

Mobile Automation Builder

Responsive Canvas Adaptations

For mobile users (primarily viewing, not building):

View Mode (375px)

┌─────────────────┐
│ Automation Name │
├─────────────────┤
│                 │
│  Flow Preview   │
│  (Read-only)    │
│                 │
├─────────────────┤
│ [✓] Active      │
│ 247 contacts    │
└─────────────────┘

Key Mobile Features

• Read-only canvas - View but not edit
• Performance stats - Key metrics visible
• Activation toggle - Start/stop automation
• Desktop prompt - "Edit on desktop" message

Pre-Built Automation Templates

Based on Phase 2 persona research:

For Sarah Chen (Small Business Owner)

1. Welcome Series - 3 emails over 7 days
2. Abandoned Browse - 2 follow-ups
3. Birthday Campaign - Annual automated
4. Re-engagement - Win back inactive

For Marcus Rodriguez (SaaS Marketing)

1. Trial Nurture - 14-day onboarding
2. Feature Adoption - Usage-based triggers
3. Upgrade Campaign - Plan limitations
4. Churn Prevention - Activity monitoring

For Jessica Park (E-commerce)

1. Abandoned Cart - 3-stage recovery
2. Post-Purchase - Review requests
3. Win-Back - Lapsed customers
4. VIP Program - Loyalty rewards

Node Specifications

Trigger Node: Contact Subscribes

     ╭────────────╮
     │     ▶️     │
     │  TRIGGER   │
     │  Contact   │
     │ Subscribes │
     ╰────────────╯
          │
          ▼

Properties:
- List: [Dropdown of lists]
- Source: Any/Specific
- Tags: Optional filter

Action Node: Send Email

┌─────────────────┐
│   ✉️ Send Email  │
├─────────────────┤
│ Welcome Email   │
└─────────────────┘

Properties:
- Campaign: [Select existing]
- Delay: Immediately/Schedule
- From: Name & email
- Track: Opens/Clicks

Condition Node: If/Else

       ◆
    ╱     ╲
  YES     NO
  ╱         ╲

Properties:
- Check: Email opened/clicked
- Timeframe: Within X days
- Action: Tag/Field/Activity

Performance Considerations

Based on Phase 8 (Technology Choices)

n8n Integration Points

1. Workflow Storage: JSON format in PostgreSQL
2. Execution Engine: n8n workers handle processing
3. Event System: Webhooks trigger workflows
4. State Management: Redis for active flows

Optimization Strategies

// Simplified workflow JSON
{
  "nodes": [
    {
      "id": "trigger_1",
      "type": "contactSubscribe",
      "parameters": { "list": "newsletter" }
    },
    {
      "id": "wait_1",
      "type": "wait",
      "parameters": { "amount": 1, "unit": "days" }
    },
    {
      "id": "email_1",
      "type": "sendEmail",
      "parameters": { "campaign": "welcome_email" }
    }
  ],
  "connections": [
    { "from": "trigger_1", "to": "wait_1" },
    { "from": "wait_1", "to": "email_1" }
  ]
}

Visual Design Language

Node Colors (Semantic)

• Triggers: Green (#4caf50) - Starting energy
• Emails: Blue (#2196f3) - Communication
• Waits: Orange (#ff9800) - Pause/timing
• Tags: Purple (#9c27b0) - Organization
• Conditions: Red (#f44336) - Decisions

Canvas Styling

• Background: Light gray with grid
• Nodes: Rounded rectangles with shadows
• Connections: Bezier curves for smooth flow
• Selection: Blue outline with handles
• Hover: Subtle scale increase

Typography in Nodes

• Node type: 12px caps (SEND EMAIL)
• Node name: 14px regular (Welcome Email)
• Icons: 20px centered

Validation Against Success Metrics

Phase 1-2 Requirements

• No coding: 100% visual interface
• Quick setup: Templates under 5 minutes
• Understandable: Clear node labels
• Mobile viewable: Responsive design

Phase 3-4 Technical

• n8n compatible: JSON workflow format
• Performant: Canvas handles 50+ nodes
• Reliable: Auto-save prevents loss
• Testable: Built-in test mode

Phase 5-7 Business

• Template upsell: Premium automations
• Usage visible: Stats encourage upgrade
• Shareable: Export/import workflows
• Measurable: Performance metrics

🔮 Progressive Enhancement Plan

Starting with MVP, add capabilities over time:

MVP (Launch)

• 10 essential nodes
• 5 pre-built templates
• Basic conditions
• Email-only actions

Phase 2 (3 months)

• 20 nodes total
• Custom templates
• Advanced conditions
• SMS integration

Phase 3 (6 months)

• Full n8n node access
• Code node (advanced users)
• Webhook triggers
• API actions

Each phase maintains simplicity while adding power for growing businesses.

Implementation Notes

Component Architecture

AutomationBuilder/
├── NodeLibrary/
│   ├── NodeCategory
│   ├── NodeItem
│   └── NodeSearch
├── Canvas/
│   ├── WorkflowCanvas
│   ├── NodeComponent
│   ├── ConnectionLine
│   └── GridBackground
├── PropertiesPanel/
│   ├── NodeProperties
│   ├── AutomationStats
│   └── QuickActions
└── TemplateGallery/
    ├── TemplateCard
    └── TemplatePreview

State Management

• Current workflow JSON
• Selected node ID
• Canvas zoom/pan state
• Validation errors
• Execution status

n8n Webhook Integration

// Simplified execution trigger
async function executeWorkflow(workflowId, triggerData) {
  const response = await fetch(`${N8N_URL}/webhook/${workflowId}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(triggerData)
  });
  return response.json();
}

Automation builder wireframes designed to make the power of n8n accessible to every small business owner, not just developers.