Case study 01, 2026
ViRef.ai — A reference workspace that turns visual inspiration into briefs AI can follow
My own product, designed and built from zero: save references, document their Design DNA, and export a structured brief for the AI tool you already use.
- Role
- Product design and front-end build
- Status
- Live
Context
ViRef helps designers save visual references, document their Design DNA, blend references, and prepare a structured brief for the AI tool of their choice.
To write: Why you started ViRef — the moment you noticed the gap in your own work (2–3 sentences).
The problem
References are easy to collect and hard to use. A full-page screenshot loses the one card or section that caught your eye, the reason it worked rarely gets written down, and a folder of images is not something an AI model can act on.
Features that each make sense — library, Design DNA, collections, Blend, MCP — can still feel like separate tools if the flow between them is not designed.
Framing
Treat a reference as structured input, not a picture: what it is, why it works, and how it should shape the next design.
That framing set the order of the product — capture first, explain second, and only then prepare something for AI.
Key decisions
Decision 1
Save is the primary action
Capturing has to feel instant. Save is the primary action and Add to Blend is secondary, so the library grows without forcing a decision at capture time.
Decision 2
Useful without an AI key
References, notes, and collections stay useful without style recognition or connecting an AI provider. AI is an export target, not a dependency.
Decision 3
Exports that say what they are
Blend compares directions by foundation and section structure, and the export is a brief in Markdown or JSON — not a promise that a generated design will match.
The solution
Save, note, brief
The core flow: save a reference, write why it works, prepare a brief for AI, review the evidence and metadata, then export Markdown or JSON.
Blend before you generate
Blend places several directions side by side and compares their foundations and section structure before anything is generated. Collections stay one level deep to keep organising light.
Where it stands
- Current release, 11 Oct 2026
- 1.2.0
- App at viref.space, marketing site at about.viref.space
- Live
- Workers, D1 and R2 behind an Astro, TypeScript and React front end
- Cloudflare
Reflection
To write: What building ViRef yourself taught you about product decisions (2–3 sentences).
To write: What you would change or measure next.