Drape

An AI product studio.
Product photos in, photoshoots out.

Built with
Next.jsRazorpaySupabaseNano BananaVercel
2026 · Product Designer & Founder

My role

My roleDesign engineer

3 months ago, I'd never built anything outside Figma.

3 monthsTo learn & build
Private alphaUsers: 3 (test users)
TeamMe & AI agents
CASE STUDY

01 / 03

Problem

A product shoot costs a small Indian seller ₹5,000–₹20,000.

Small sellers on Instagram, Meesho and Shopify need around fifty product photos per drop. Many are women-led boutiques. Most can't afford a photographer for each one.

Product

A seller uploads garment photos, casts a model, generates, refines and shares, all in a chat-style “shoot” session. The key differentiator: consistency the seller controls. Garments stay true across the whole shoot; pin a shot and its model and scene carry into the next pose, or recast with a new model any time.

Under it sits a full business: a gen-AI engine with multiple models to pick from, credit-based pricing with Razorpay payments, Hindi and English localisation, an admin dashboard that runs the business, and a mobile-first Next.js web app (PWA).

From shop photo to finished photoshoot

This is the real product, recorded as it runs in private alpha. A seller's suit photo goes in, a finished shoot comes out. Two recordings:

01 · The first shot, from scratch
Upload0:00
0:00 / 0:55

Upload the garment, pick a model, add a scene reference, tap Generate. Footage lightly sped up; the on-screen timer shows the true wait, about thirty seconds from tap to finished shot.

02 · Continued from the pin
Pin a shot0:00
0:00 / 0:32

The second shot is where Drape earns it. Generative AI forgets everything between shots; the pin is the fix. Same model, same suit, same doorway, new pose. One tap, no re-explaining. A shoot stays a shoot.

Open the live apparrow

02 / 03

Design

A design system run as a pipeline, enforced on every commit.

Colours, type and spacing are decided once, in Figma. One command rewrites the app's code to match. A gate on every commit blocks anything hand-typed, so the app can never drift from the design.

Figma
Agent sync-tokens
tokens.tstyped object
A commitany change to the app
#FF5733blocked — no raw hex ✕
Agent check-tokenson every commit
mainevery token resolves

full palette change · under 15 minutes · by runbook

The system

The whole brand is three colours. A near-black and an off-white build the stage; a single high-energy yellow is the only voice on it.

In a product where the seller's photography must be the hero, the interface has one job: stay quiet until something matters.

Colour

The voice#F7E222
The stage#17191A
The light#FCFCFC

67 colour tokens · resolved from these three

Typography

Aa

Figtree — sans and headings

64 · 48 · 40 · 32 · 24 · 20 — headings · lh 1.2

18 · 16 · 14 · 12 — body · lh 1.4 · footnote 10

Dancing Script, for brand moments

Geist Mono — numbers and data

Radius

full

9 radii · 2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · full — at true size

Motion

--ease-drape · cubic-bezier(0, 0, 0.2, 1)

280ms · every UI state transition

106 tokens67 colour · 18 type · 9 radius · 5 stroke · 5 gap · 2 motion

every one checked on every commit ↑

03 / 03

I don't write code. I designed the system that produces it.

I read code and run commands; I don't write code. The product shipped because the collaboration itself is designed, with two users: me and the AI. Every feature starts as a written plan. Eight automatic checks run on everything the AI builds. The files that touch money stay locked unless the plan names them. And nothing ships before I read it; that review stop caught real bugs three times.

How a feature gets built.

I plan thoroughlyevery decision up front
01
AI builds itwrites all the code
Money code stays lockedAI can only touch it if the plan says so
02
Checks run8 automatic tests
03
Manual testI try it myself
04
rejected ✕ — fix it first
Pushonly if everything passes
05
Code reviewread before it ships
06
Live

Systems

Four production systems run Drape today. Each one exists because the product needed it, and each was designed before it was built.

01 / AI Engine

Every photo passes through one doorway.

Under Drape's studio sits one engine, and every generation passes through its single doorway: the meter. It checks the seller's credits and only then calls the AI. Vendors plug in on the other side: Gemini powers it today, and GPT Image, Seedance, or any AI model would each be one new line of code.

Image generationtry-on · models · edits
Video generationimage to videoSOON
−1 creditcredit refunded
One doorwaymeter
Geminivia Vertex AI · keyless
Next vendorone line to add
02 / Credit Ledger

Every credit is accounted for.

Credits are granted only by Razorpay's signed message, never by the browser claiming success. A repeat message is recognised and ignored. Each grant, spend, and refund lands as a row in an append-only ledger, and the balance is recomputed from the rows every time it's needed.

Razorpayconfirms a payment
Signature checkgenuine · counted once
DUPLICATE · IGNORED
SIGNED · RAZORPAY
CREDIT LEDGER
NEW ROWS ONLY · NEVER EDITED
BALANCE · COUNTED FROM THE ROWS
0
Seller generatesspends credits
03 / Admin Dashboard

The control room

Drape's own dashboard, the tabs that run the business. A live activity tracker and Prompts, the workspace where prompt changes are drafted, A/B tested on the same seed, and published with a switch.

161 generations13 users12 active
generations · daily volume · last 30 days
04 / Memory

Decisions are logged constantly.

Every decision that changed a default is one dated line in a log, 487 entries so far, including the reversals. The system remembers why.

decisions.md483 ENTRIES
2025-06-02
one dated line per changed default · reversals included