Skip to the work
Main siteStart a project
All work

Design Lab

Clients point at pictures instead of trying to describe a website

Client
lukeduff.co.uk
Service
Own product
Where
United Kingdom
Year
2026
Visit the live site

The live site. Drag inside either one. design-lab-lime.vercel.app

Design Lab on desktop

Clients can't describe a website, but they can point at one, so I stopped asking what they want. I send a private link instead. They pick between pairs of pictures, answer a few questions, and land on three designs of their own page. They shape one inside limits I set, where the tool won't let the text become unreadable, then approve it. I get a spec to build from, including their own words on what they never want to see.

What I set out to do

  • Get a real brief out of clients who can't put what they want into words.
  • End the brief on three designs of the client's own page, not a mood board of other people's.
  • Let them shape the design without being able to make it unreadable.
  • Hand me a spec I can build from, in the client's own words.
  • No accounts to set up: the private link is the login.

What it does

  • Picture pairs first, then a few questions
  • Three designs of the client's own page
  • Six groups of controls and nothing else
  • Colours read from a logo that never uploads
  • Contrast held to WCAG AA automatically
  • Desktop, tablet and phone previews
  • Spec export: CSS, Tailwind, Elementor, JSON
How it was built
  • Next.js 16 with the App Router, React 19, TypeScript and Tailwind 4, on Vercel.
  • No database: each client project is a JSON file in Vercel Blob, drawn by a shared library of 13 section types with 2 to 6 layouts each.
  • The preview uses container queries, so the phone view is a real phone layout rather than a shrunk desktop.
  • Each saved version claims its number with a conditional create, so a slow write on the storage service can't be overwritten.
  • A pasted website is read on the server, behind a guard that refuses private and internal addresses.
  • Driven by MYOS, my own operations system, through an admin API. An approved design becomes a build brief for my site builder.
  • Around 700 automated checks, including Playwright runs in Chromium and in WebKit at iPhone sizes.
  • Built solo: first commit 27 August 2026, live two days later.
The Design Lab studio: a demo dental practice's page on the left, and the controls for layout and lettering on the right
The studio. The client shapes their own page, but only inside the choices I set.
The end of the brief: three full designs of the same page, labelled Closest to your answers, A quieter version and A bolder version
Where the brief ends: three designs of the client's own page, each with a line on why it was offered.
The Design Lab admin: a list of demo client projects, each with its brief status, such as v2 approved, brief done nothing sent, and from the lander
My side: every client, and where their brief is up to. Demo data.
The export page for a demo joinery client's approved version, with a preview of the approved design
What I build from: the approved version, ready to export as CSS, Tailwind, Elementor or JSON. Demo data.
See it livedesign-lab-lime.vercel.appStart a project