Design Studio
A browser workspace that runs a brand engagement from the first discovery question to the handover files, and only exports what a person approved.
Deliverables, from brand story to website copy
Discovery questions across 8 phases
Screens, from overview to handoff
Servers. Nothing leaves the browser
Why it exists
Brand projects produce dozens of drafts, and unapproved text has a way of ending up in the final guidelines. Tools that write copy with a language model also give a different answer every time, so nobody can reproduce what the client was shown.
What's in it
Five screens that follow how a studio works: an overview of the engagement, a guided discovery workshop, the studio with eighteen deliverables, a published brand hub, and a handoff screen that exports Brand.md and Design.md. It all runs in the browser, and the same source also builds into one self-contained HTML file.
What makes it work
The whole app is arranged around one idea: a person signs off every word before it leaves.
- 01
Approve and Refresh
Refresh generates another round from the same brief, and earlier rounds stay in a rail so you can go back to the better one. Approve freezes a round. Refreshing something already approved sends it back to draft on purpose.
- 02
Only approved work is exported
Nothing reaches Brand.md or Design.md until someone approves it. Anything still in draft is listed by name at the bottom of each file, so the reader can see how much was signed off.
- 03
Same brief, same output
There is no model call. Each round is a pure function of the brief and a seed, so a project file opens exactly the same on someone else's machine.
- 04
A human tone check
Every string the studio writes is checked against a blocklist of machine tells and consultancy filler. A test runs three briefs through all eighteen deliverables for ten rounds each and fails on a single flagged phrase.
- 05
Colour with the maths done
Each swatch ships HEX, RGB and CMYK plus measured WCAG 2.1 contrast against both white and ink, reported for each background.
- 06
A private ballot
In the personality workshop everyone picks five traits and one favourite in private. Nothing shows until someone presses Reveal, so the loudest person in the room cannot steer the result.
A closer look
Scroll to move through the screens.
Try it right here
Your project is saved in your own browser only. Nothing is sent anywhere.
Decisions worth keeping
Try it with a brief. On the overview screen, press "Load worked example" to fill in a sample client, then open the studio and generate a few rounds.
Deterministic generation
Drafts come from curated corpora arranged around the client's own answers, which keeps them specific and reproducible.
Approval gates the export
The handover files are the product, so the approval step sits directly in front of them.
State stays in the browser
No account, no API keys and no backend. The project lives in local storage.
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- esbuild
