Visual Design Agent: AI-Generated UI Previews Before Implementation

SaaS Factory v1.0.149 introduces the Interactive Visual Design Agent — a new pipeline stage that renders AI-generated UI mockups from the technical spec before any implementation code is written or a PR is opened.

Overview

Previously, the SaaS Factory pipeline moved directly from the design.ts agent (which produces a structured technical spec) into the implementation agent and PR pipeline. There was no visual checkpoint — users only saw the result once code was already written.

The Visual Design Agent inserts a preview stage between spec generation and code generation, so you can see exactly what is going to be built and course-correct before any engineering effort is committed.

How It Works

1. Spec Generation (Existing)

The design.ts agent analyses the feature requirements and produces a structured technical spec describing components, layouts, data flows, and styling decisions.

2. Visual Preview Generation (New)

The Visual Design Agent reads the structured spec and renders an interactive visual mockup. This preview is surfaced in the platform UI as a design artifact attached to the feature.

3. Review & Approval

You can inspect the mockup, request adjustments, or approve it as-is. Any changes are reflected back into the spec before the next step runs.

4. Implementation (Existing)

Once the preview is approved (manually or automatically), the implementation agent proceeds as normal — generating code, opening a PR, and running CI.

Pipeline Diagram

Feature Spec
     ↓
 design.ts Agent
     │  produces: structured technical spec
     ↓
 Visual Design Agent          ← NEW
     │  produces: interactive UI mockup
     ↓
  [Preview & Approval]
     ↓
 Implementation Agent
     │  produces: code + PR
     ↓
   CI / Release

Autonomous vs. Interactive Pipelines

Pipeline Mode	Behaviour
Interactive (default)	Preview is surfaced and waits for explicit approval before implementation proceeds.
Fully Autonomous / Headless	Preview step is auto-approved; pipeline runs end-to-end without human intervention.

Existing fully-autonomous configurations are unaffected — the preview step is a checkpoint, not a hard gate.

Key Properties

Spec-accurate — Previews are generated from the structured design.ts spec output, not from freeform prompts. The mockup faithfully represents what the implementation agent will build.
Editable — Design adjustments made at the preview stage are propagated back into the spec before code generation begins, eliminating rework caused by late-stage design changes.
Non-blocking for automation — Headless pipelines auto-approve the preview and continue without interruption.
Attached to features — Each preview is stored as a design artifact on the feature record, providing a visual audit trail alongside the technical spec and PR.

Competitive Context

Platforms such as v0 by Vercel, Bolt.new, Lovable, and Replit have offered real-time visual previews as a core part of their build experience. The Visual Design Agent brings SaaS Factory to parity on this dimension while preserving its fully-autonomous, end-to-end pipeline architecture.