Building a Rapid A/B Test Generator with Google Stitch SDK

#ai #programming #javascript #dailybuild2026

In the fast-paced world of UI/UX design, the ability to quickly visualize and iterate on ideas is a superpower. Today, I'm excited to share a deep dive into Stitch A/B Tester, a CLI tool I built that turns a single text prompt into a full-blown A/B testing dashboard in seconds.

The Problem: The Prototyping Bottleneck

Usually, creating A/B test variants involves:

Designing a base screen in Figma.
Manually duplicating and tweaking layouts, colors, and assets.
Exporting images or setting up a prototype link.

This process can take hours, if not days. I wanted to see if we could compress this into seconds.

The Solution: Google Stitch SDK

The Google Stitch SDK is a powerful tool for programmatically generating and manipulating UI designs. By leveraging its generate and variants capabilities, we can automate the entire creative workflow.

Technical Architecture

The app is built as a Node.js CLI using:

Google Stitch SDK: For UI generation.
Vercel AI SDK: For autonomous tool orchestration.
TypeScript: For type safety.
Commander.js: To handle CLI arguments.

Core Logic: Autonomous Orchestration

Instead of manually chaining tool calls, we use the Vercel AI SDK to let an LLM handle the orchestration. We provide it with the stitchTools() adapter, and it takes care of the rest.

import { generateText } from "ai";
import { google } from "@ai-sdk/google";
import { stitchTools } from "@google/stitch-sdk/ai";

const { text, toolResults } = await generateText({
  model: google("gemini-1.5-flash"),
  tools: stitchTools(),
  maxSteps: 10,
  prompt: `
    Create a new Stitch project named "AB_Test".
    Generate a base screen for: "A modern crypto wallet dashboard".
    Generate 3 variations exploring different layouts and colors.
  `,
});

By delegating the "how" to the LLM, we can focus on the "what". The model automatically calls create_project and generate_screen_from_text as many times as needed to fulfill the prompt.

Creating the Interactive Dashboard

Once the designs are generated, the CLI fetches the HTML prototype URLs and preview images. It then injects this data into a pre-defined Tailwind CSS template and saves it as dashboard.html.

The result? A side-by-side comparison tool that opens automatically in your browser.

Why an npm Package?

By packaging this as a CLI tool, I've made it portable. You don't need to clone a repo or set up a complex environment. With npx stitch-ab-tester, any developer can start generating UI variants instantly.

Stitch A/B Tester isn't just a tool; it's a demonstration of how Generative UI can augment the design process. It doesn't replace the designer; it gives them a head start, providing a canvas of ideas to refine and build upon.