See It Before It's Built: Introducing AI-Generated UI Previews

Release: v1.0.149 · Visual Design Agent

Today we're shipping the Interactive Visual Design Agent — a new step in the SaaS Factory pipeline that generates a visual UI mockup from your feature spec before a single line of implementation code is written.

The Problem We Solved

SaaS Factory has always been strong on autonomous, end-to-end delivery: a feature idea goes in, a production PR comes out. But one part of the experience was missing: seeing what you're about to get before the implementation agent runs.

Platforms like v0 (Vercel), Bolt.new, Lovable, and Replit built a lot of user confidence by letting people preview and tweak generated UIs in real time. Users feel in control. They catch misunderstandings early. They ship with higher confidence. SaaS Factory skipped that step entirely — the design.ts agent produced a solid technical spec, but it was invisible to users.

That changes today.

What's New

The Visual Design Agent is a new pipeline stage that sits between spec generation and implementation. Here's the full flow:

Feature Spec  →  design.ts Agent  →  Visual Design Agent  →  [Preview]  →  Implementation  →  PR

When a feature reaches the Visual Design Agent, it:

1. Reads the structured technical spec produced by design.ts
2. Renders an interactive visual mockup in the platform UI
3. Waits for approval (or auto-approves in headless mode)
4. Passes the confirmed spec to the implementation agent

Why Previews Matter

A rendered mockup does something a spec document can't: it makes design decisions legible at a glance. You can spot a layout that doesn't match your mental model, a component hierarchy that's harder to navigate than expected, or a styling choice that clashes with the rest of the product — all before any code is written.

Catching these things at the spec stage is dramatically cheaper than catching them in a PR review or, worse, after a release.

Spec-Accurate, Not Speculative

One deliberate design decision: previews are generated from the structured design.ts spec, not from a separate freeform prompt. This means what you see in the mockup is what the implementation agent will actually build. There's no hidden translation step between the visual and the code — the spec is the single source of truth for both.

Fully Compatible with Autonomous Pipelines

If you're running SaaS Factory in fully-autonomous mode with no human in the loop, nothing changes. The preview step is auto-approved and the pipeline continues end-to-end as before. The Visual Design Agent is additive — it creates a checkpoint for teams that want one, without imposing it on teams that don't.

Available Now

The Visual Design Agent is live as of v1.0.149. Interactive previews will appear in the platform UI for new features progressing through the pipeline.