Luke Duff
CallMenu

Design Lab

Clients point at pictures instead of trying to describe a website

WhatsApp me

I reply the same working day, in UK hours.

Or call 07935 996850 or book a call

5.0 from 31 Google reviews (checked Nov 2026)
My own product
Client
My own product
Sector
Client onboarding and design discovery
Location
United Kingdom
Year
2026
Service
Own product
Visit the live site (opens in a new tab)

The build, scrolling as you scroll.The build. Drag inside the frame to look around.

design-lab-lime.vercel.app (opens in a new tab)
Design Lab on a computer

About this project

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 I built

  • 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.

Design Lab, up close

Design Lab, a closer look at one section
Design Lab on a phone, up close
Design Lab, a closer look at another section
Design Lab, a closer look further down the page
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.
Next project

A11y Shield

Accessibility compliance as an automated loopSee the project

Want something like this?

Send me a message about what you need, or book a call.

WhatsApp meBook a callhello@lukeduff.co.uk

I reply the same working day, in UK hours.

Or ring 07935 996850. If I can't pick up, leave a message or WhatsApp me.

5.0 from 31 Google reviews (checked Nov 2026)