Copywriter
A tool we built so a team could test design and copy directions with real people, in every language.
Release notes
We were building design directions for a client, and the copy that went with them, in more than one language. To test them with real people, we built Copywriter. It turned each design into a clickable prototype with its own copy for every language, and the team sent it to testers, editors and commenters. They tapped through it and left their notes on the exact screen, while analytics and heat maps showed what people did.
Added
Clickable, in every language
Each design became a prototype people could tap through, with its own copy for every language.
Notes on the exact screen
Testers, editors and commenters left design and copy notes right on the screen they were about.
What people did
Every tap fed analytics and heat maps, so the team could see which direction worked.
Edit on the screen
Editors clicked any text on the prototype and changed it in place, several people at once.
Architecture
Live editing needs connections that stay open, so instead of going serverless, Copywriter ran on one small AWS server in Frankfurt.
# stack.yml import: Claude Design HTML exports front_end: React and Vite api: Node and Fastify live_editing: Yjs (CRDT) over WebSocket data: PostgreSQL and S3-compatible storage hosting: One small AWS server in Frankfurt export: HTML, JSON, Flutter ARB, a changeset and a Claude Code handoff