get in touch

Designed and built an app that helps you get through your saved list

Off the Shelf home screen on a green grid: an orange scalloped card asking “How much time do you have?” with “Until 13:30 · 23 mins” and two buttons, From your shelf and Suggest Me, beside a yellow alarm clock whose green arc marks the time left

Live at off-the-shelf-kappa.vercel.app ↗ · Screens from the live app

Role
Product designer and builder
Built with
Figma, Claude, React, Vite and Vercel
Time to live
Three days, four sessions
Scope
Product thinking, visual direction, interaction design, build
Status
Live

Off the Shelf is a read-it-later app that starts with one question, how much time do you have, and hands you the saved piece that fits. It was also my test of a new way to work: I set the direction and made every product decision, and built it with Claude as my build partner, one focused session at a time. It went from visual direction to a live, working app in three days, and inside the product, AI has one small, careful job.

Areas of focus

This project is as much about how it was made as what was made: one designer, a clear direction and AI doing the heavy lifting on code.

  • Direction before codeI designed the look and the key decisions in Figma first, so AI had something clear to build toward.
  • Directing AIEach session had one goal in plain language and ended with a live page, so progress was always real.
  • Designing in the browserChanges took a sentence instead of a round of handoffs, so I could iterate on feel, not just function.
  • AI with a clear jobInside the app, Claude only estimates reading time when a page won’t say, and the app labels it as an estimate.

One question to start

How much time do you have? The answer shapes everything that follows.

The scalloped start card: How much time do you have, Until 13:30 · 23 mins, with From your shelf and Suggest Me

Made for the phone

The same calm, one-tap start on a small screen.

Off the Shelf on a phone

A shelf, not a list

What fits your time stands on a shelf, and the closest fit comes forward.

Two books on the wooden shelf: the closest fit turned to show its cover, beside a thin spine

Live in three days

From visual direction to a working app, built with AI.

How I started

Earlier in the year

A rough prototype proved the idea.

This time the goal was a real product: motion, a warmer feel, and a link I could hand to someone.

Direction first, in Figma

The first illustrated alarm clock
The illustrated desk scene behind the app
The illustrated open book
RedCoralGreenYellow
AaAveria Serif Libre · book titles

Working with AI

Who did what

Me

  • Set the visual direction in Figma
  • Made every product decision
  • Gave each session one clear goal
  • Reviewed every release, live
  • Kept a build log of what shipped and why

Claude

  • Wrote the code with me, a session at a time
  • Turned plain-language changes into code
  • Helped ship each session as a live page

The pipeline

FigmadirectionClaudecodeReact + Vitethe appVercellive

From the git log

60hours from first commit
to a live app
  1. Session 1: the clock
  2. Welcome page: Figma design, real illustration
  3. The shelf and the book
  4. Save to shelf
  5. Auto add for pop up
  6. Favicon update Live
“Hand-written SVG for the clock, so every part of it can be changed in a sentence.”Build log, session 1

Evolving in the open

First live version

The first look: a red alarm clockThe first shelf: a single book that opened

Visual identity updated

The new look: a yellow alarm clockThe new shelf: book spines sized by how long they take

AI in the product

One small job

01The app reads the page

When you save a link, the app reads the page itself for the title, source and length.

02Claude estimates, only if needed

Only if the page won’t say how long it is does Claude estimate it.

03Marked as an estimate

When Claude has made the guess, the app marks that number as an estimate.

≈ estimate

Saving a link

What shipped

The clock

How much time do you have? Until 18:05•0 mins Drag the clock hand to change the time. THE SAME WINDOW ON TWO DIALS One-hour sweep Twelve-hour dial You say when you need to stop. The clock works out how long that is.

The shelf

Desktop

Home: How much time do you have? Until 13:30 · 23 mins, beside the yellow alarm clock The shelf: 2 things fit your time, with Design tokens need more than semantics pulled out and turned to show its cover beside a thin spine Suggested by Anushma: five spines, with Inside Christian Dior’s Private Archive pulled out as the closest fit Save to shelf form, filled in from a pasted link The shelf when nothing fits, saying by how much The empty shelf: Nothing here yet, with a dashed space on the shelf that says Add to this shelf
The clock Opens with about 25 minutes already set, so most visits are a single tap.

Mobile

Off the Shelf on a phone: the yellow clock above the scalloped card The shelf on a phone: the closest fit pulled out and turned to face you, with its title and Open it underneath

Outcome

Proof that one designer, with a clear direction and AI as a build partner, can take an idea to a real, polished product in days, without losing the craft.

  • Live in three days, from visual direction to a working app

  • No accounts, with everything saved on your own device

  • Six build sessions, each one ending in a live release

  • A link that reads itself, so saving takes a paste, not a form

Next A way to fill a longer window with a few things back to back, a place to note what you took away, and picks that refresh straight from my Substack.

Try Off the Shelf

Check out my next project

All projects
The redesigned Metadata Repository on a laptop and a phone, on a wooden desk

Redesigned a clinical metadata platform across 20+ modules

A 14-month redesign of the clinical metadata platform a global pharma team uses every day.

  • Enterprise
  • Pharma
  • Design System
  • UX Research
  • B2B