Own product · Built with a team of AI agents · 2026
Logging a quiz night in under a minute
A pub quiz app I started for my own group. I drafted the spec with AI, Claude Code agents built it, and I made the design calls along the way.
By Sabina Nordell, Senior UX/UI Designer
- Role
- Design direction and product ownership
- Tools
- Claude Code, SvelteKit, Svelte 5, Tailwind CSS, Zabi Components, Supabase, Vercel, Playwright
Who it’s for
I started Quizrundan for my own pub quiz group in Stockholm, and other groups use it too. A group of friends, usually three to eight, logs each quiz night, rates the pub, and works through a round of pubs. The moment that matters is at the table, right after the results are read out.
The spec had four personas, and I added a fifth: Maja, who finds the app in a social post and has no group yet. They aren’t research. The agents use them to check a flow.
The goal and the limits
One goal came first: logging a night at the table takes under 60 seconds. It does.
Groups never see each other. Only the pub list is shared.
Free tiers only, which ruled out Sign in with Apple.
No photos from pubs or Google. Only one of the 19 pubs had an openly licensed photo, so each gets a drawing.
How I worked with the agents
The agents write the code, so my design work happens in the calls: my answers to their questions, and what I approve, reject, or pick from their reviews.
One call that changed a build: the first build put the Overall rating last. QA flagged it, I moved Overall to the top, and it was rebuilt the same day.
Sabina
The spec
Drafted with AI, owned by Sabina. Dated 4 October.
- Product
- Brand
- Flows
- Backend
Every agent reads the same files
Claude Code agents
The team
They write the code
- Product: three roles, all added
- Design: two from the start, two added
- Engineering: four from the start
- Six roles at the start
- Eleven by 19 October
An agent
Hits a gap
The spec is silent or unclear
An agent
Writes a question
At most 8 lines, with options and a proposed default
Example question, made up for this page
Should saving a night play a sound? Default: no sound
- ANo sound, the default
- BA short sound when the night is saved
Built: A
An agent
Builds the default
And carries on. The pull request lists it under Decisions.
Sabina
Answers
In the questions file, when she can
Sabina’s answer
The same as the default?
- The same: it stays as built
- Different: a new task for the agents
Sabina
Makes the calls
She approves, rejects, or picks from the agents’ UX, UI, brand, and visual reviews. Only she merges to main.
Logging a night in three steps
The night: the pub, with tonight’s quizzes first, the date, who came, and the team name. A planned quiz fills most of it in.
Ratings: one score for the whole team, Overall first, the score the ranking counts. Every category can be skipped.
Result: placement, number of teams, and points. Anything left out can wait as a draft.
Saving ends on a screen that reacts to the result and suggests three untried pubs, so the next one is picked at the table.
Goal: under 60 seconds, at the table
Step 1 of 3
Kvällen
The night
- PubNeeded
- DateNeeded. Starts as today
- Who was there?Starts with you ticked
- Team name tonightStarts as the group’s
- Theme
Step 2 of 3
Betyg
Ratings
One score for the whole team.
- OverallCounts in the ranking
- The group’s other categories
- Notes about the night (optional)
Step 3 of 3
Resultat
Result
Fill in what you know.
- Placement, Number of teams
- Our points, Max points
- Winner’s points
Can’t remember it all? That’s fine, the rest can wait.
It ends with Save as draft or Save the night
Three design decisions
One rating per night, agreed at the table. A rating from each person would turn a quick decision into a survey.
No league between groups. Stats ranks the group’s own pubs by its own ratings.
A group picks its own round. The spec gave every group the same 19 quizzes, so a group that finished had nothing left to aim for. Since 13 October a group can pick its own pubs, and since 16 October a theme, the original 19 among them.
Giving it a brand
I named it Quizrundan, “the quiz round”, with a nod to doing the rounds of every pub. The spec set the voice: the funniest friend in your quiz team, quick, warm, and a bit cheeky. The base is ultramarine, and from a studio’s site I picked flat colour blocks and two type voices. Sunshine yellow on that blue read too much like the Swedish flag, so blossom pink became the accent.
After the first release the app felt grey to me and short on personality, with no clear main action. I picked one per screen, booking the next quiz first. I tried DynaPuff for headlines and Inter for text, and kept both. DynaPuff is playful like a pub quiz, gives the app personality, and suits the drawings.
Later that day it still felt dated to me, and I asked why. A review found the brand on about eight of 60 screens. I approved a new direction, with the round as a board of 19 stamps on Home. Visited pubs get a check, and every pub keeps its full colour.
In dark mode the blue head on Home was too bright, so I asked for every block one step darker.
Colour
Ultramarine#0026EA
The brand colour. Brand blocks, and the one main action on a light screen.
Navy#183A89
Text and lines on light screens, and the label on a pink button.
Blossom pink#EB8FFE
The accent. The one main action on blue and at night, and every filled star.
Tint#CDDEFF
A card you can open. At night, what’s selected.
Sunshine#FDD715
Only for things that are yellow, like a pub portrait’s ground. Never a button.
Light
- Page: paper, #F8FAFF
- Text: navy
- Main action: ultramarine, with a white label
Navy night
- Page: navy, #0A1E4A
- Text: pale blue, #EFF5FF
- Main action: blossom pink, with a navy label
- Blocks: ultramarine a step darker, #0018A7
Type
DET HAR GÅTT EN MÅNAD.
DynaPuff
Display lines, section heads, and big numbers
Ett betyg för hela laget.
Inter
Body text, labels, and buttons
Shown here in Avenir Next, this site’s sans
Shapes
Stamp
A pub on the round: a square tile with small corners, and a navy check once the team has been.
Star
A rating. A filled star is pink with an outline, so it shows on any ground. An empty one is the outline alone.
Squared shapes
Every drawing follows one rule: rectangles, circles, straight tapers, and arcs, on one baseline, with corners at 1 or 3 times the line.
Redrawing the drawings
The drawings follow the style of Okra Livia, who is in my quiz group and made the references. An illustrator agent draws them in SVG, some from sketches I made with AI. I wasn’t happy with the first set, and the rounder second set was worse: the first set’s squared shapes suit the app and SVG better. I approved a sample of six on 19 October. The same day the illustrator agent redrew the mascot, portraits, avatars, group marks, empty states, and app icon from simple shapes. They ship with the next release.
Version 1
Rectangles, circles, and ellipses, butted together
Later judged the better one, for its squared shapes
Version 2
Every main shape gets a belly, a taper, or a sag
17 October: judged worse than version 1
Version 3, squared
Only rectangles, circles, straight lines, and arcs, with one family of corners
Sample of six approved, 19 October
When I changed course
The spec planned four releases. By 11 October the second had 134 tasks and a 1,050-line questions file. I asked for a set way of working. The answer was a roadmap of briefs, three product roles to shape them, and releases named by date.
Where it is now
Quizrundan is live.
The first release came on 6 October, the day after the first commit. The latest, on 16 October, added a pub map.
Feedback from quiz groups shaped the pub list and the map, but most changes came from using it myself at quiz nights.
It also pushed my own library. By 16 October the app had filed 155 entries for Zabi Components: missing pieces, bugs, and requests.

The pub list

The map
What I’d do differently
I’d plan by briefs from the first day, not by four releases. A brief is small enough to say yes to before it’s built. A release that big stopped telling me what was in flight.
About the author
I’m Sabina Nordell, a Senior UX/UI Designer in Stockholm. Want to talk about this work? Get in touch.