Victoria Design House

Design technologist case study

Design Preview — a GenAI workflow prototype

I designed and built this tool to help people explore spatial and visual directions before a consultation — guided intake, curated GenAI output, and production guardrails. This page documents the prototype as a design technologist would: users, workflow, system, and code.

Try Design PreviewProduct portfolio

Problem

Curated exploration, not generic AI

Clients and collaborators need to see design directions quickly — but open-ended image generators produce inconsistent, off-brand results. The prototype needed to feel conversational, trustworthy, and visually polished.

Curated, not generic

Style references and prompt logic keep GenAI output aligned with real design directions.

Complex workflow, simple surface

Multi-branch intake hides production rules — users see a conversation, not a form.

Shipped end to end

UI, API routes, storage, payments, and deployment — designed and built as one prototype.

Workflow

Five steps from conversation to concept

Click through the pipeline — each step maps to a part of the product I designed and implemented.

Step 1

Guided intake

A state-driven conversation guides users through interior or landscape paths — multi-select landscape changes, scaping approach, optional sketches and photos, and contact capture before any generation runs.

ReactState machineUX writing

Architecture

How the system fits together

A lightweight stack chosen for fast iteration, serverless deployment, and clear separation between intake, generation, and entitlements.

System overview

Browser

Next.js

Intake API

Gemini

Redis

Stripe

Guided intake and generation run through Next.js API routes. Entitlements and rate limits persist in Redis. Additional previews unlock through Stripe checkout verification.

Implementation

Selected code samples

Representative patterns from the prototype — entitlement checks, branching flow, and the landscape dual-output pipeline.

Entitlement check before generation

TypeScript
const access = await checkPreviewAccess(email);

if (!access.allowed) {
  return { previewAllowed: false, priceLabel: "$5" };
}

const previewToken = await issuePreviewToken(email);

Layout-first landscape pipeline

TypeScript
const layout = await generateConcept({
  previewMode: "landscape-plan",
  // → Nano Banana (fast plan)
});

const render = await generateConcept({
  previewMode: "landscape-render",
  layoutImageDataUrl: layout.imageDataUrl,
  // → Nano Banana Pro when layout ref attached
});

Branching conversation flow

TypeScript
if (projectType === "landscape") {
  return step === "landscape-changes"
    ? "landscape-scaping"
    : "dimensions";
}

return step === "room-type" ? "focus" : "mood";

Judgment

Where AI earns its place — and where it doesn't

The most useful creative-tech decision is knowing when generation saves time and when it just looks like it does.

Where AI earns its place

Early spatial exploration — generating a credible concept in seconds instead of hours of modeling. Generation is the cheap part; curated style references and structured prompts are what keep it useful.

Where it deliberately isn't used

The visualization portfolio stays hand-built. Client-facing renders need controllable geometry, accurate materials, and revisions — places where GenAI still costs more time than it saves.

Where the line is enforced

An automated quality audit rejects renders with common AI failures before users see them, and entitlements spend credit before generation — output quality and cost stay bounded, not hoped for.

Background

Same craft, different canvas

AAA games taught me immersion, systems, and iteration. Brand work at LEGO, Walmart, P&G, and NFL Network taught me complex workflows at scale. This prototype applies the same design technologist mindset — spatial thinking, visual storytelling, and tools that help people explore faster — to an interactive product I designed, built, and shipped myself.

Design PreviewSay hello