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";

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