Skip to content
Alzubair Alojali
العربيةWhatsApp
ALL WORK · 03
Product tool

SpecFlow

Client
Personal product
Status
Private · client system
Platform
Web
Stack
Next.js
SpecFlow · The pitch: a conversation that ends with a working app
The pitch: a conversation that ends with a working app

The brief

For people who can't speak design: a conversation that ends with a working app.

Coding agents can build almost anything, if you can describe what it should look and feel like. Most people can’t put taste into words.

What I built

A design-brief generator for the coding-agent era: a short interview, what are we building, what should it feel like, which motions, what’s the one action a visitor should take, answered by choosing from real options instead of describing them. SpecFlow turns that into a design.md and a code.md that Claude Code, Cursor or v0 can build from directly.

Feel, chosen from real options

Named palettes replace design vocabulary. You pick what looks right instead of describing it.

SpecFlow · Choosing the feel: named palettes, no design vocabulary required
Choosing the feel: named palettes, no design vocabulary required

Motion you can preview, not imagine

Entrance, scroll, hover and text effects play live before you commit: a motion vocabulary with previews instead of adjectives.

SpecFlow · The motion library: entrance, scroll, hover and text effects, previewed live
The motion library: entrance, scroll, hover and text effects, previewed live

Two files a coding agent can execute

The interview ends in design.md and code.md: a design-system spec plus an implementation brief that Claude Code, Cursor or v0 can build from directly.

SpecFlow · The output: design.md and code.md, ready to hand to a coding agent
The output: design.md and code.md, ready to hand to a coding agent

An interview, not a questionnaire

What are we building, what should it feel like, what's the one action a visitor should take: short questions, concrete choices, a working brief at the end.

SpecFlow · The interview that produces the brief
The interview that produces the brief

The hard part

Turning taste into a machine-readable spec: a curated palette library; a motion vocabulary: entrance, scroll, hover, page transitions, micro-interactions, text effects, with live previews; and an exporter that emits a design-system spec plus an implementation brief as two separate markdown files.

Next.js

The result

Taste becomes a machine-readable spec: two markdown files a coding agent can execute without guessing.

Outcome

Taste becomes a machine-readable spec.

Outcome

Two markdown files a coding agent can execute without guessing.

Outcome

Real options replace design vocabulary.

Have something like this in mind?

Usually replies within a day.
PREVIOUS PROJECT · Aura · 11/15
NEXT PROJECT · Waqti · 13/15

Take your time back: set limits per app, or one shared budget across a whole group of them.

READ THE CASE STUDY