Paste a Figma link. Claude fetches the screen, detects the audience, pulls copy from every layer in parallel, runs it against DH writing rules, and returns a structured table — every element reviewed, every violation cited, suggested copy ready to apply. The whole review lands in under 30 seconds.
Here's what I built and why.
The Problem
Copy review was manual, inconsistent, and impossible to scale
No shared standard across the team
Delivery Hero has two distinct product surfaces with completely different audiences: the Partner Portal used by restaurant owners and managers, and a suite of Backoffice tools used by internal agents, KAMs, and sales reps. The writing rules for these two audiences are fundamentally different — one needs warmth and clarity, the other needs speed and precision.
But in practice, copy review was informal. Designers caught what they caught. UX writers were a bottleneck. Nothing stopped the wrong tone, wrong terminology, or a title-cased button from shipping.
Two audiences with completely different needs
The same copy that's right for one surface is wrong for the other. Partner Portal users need zero jargon, warmth, and clear next steps. Backoffice agents use SLA, KPI, and QC daily — hand-holding copy would feel condescending and slow them down.
| Partner Portal | Backoffice | |
|---|---|---|
| Who they are | Restaurant owners & managers | Internal DH agents — Sales Reps, KAMs, QC agents |
| How they work | Managing their own business, often on mobile | Processing cases, meeting SLAs, working at volume |
| What they need from copy | Warm, clear, reassuring | Fast, precise, no hand-holding |
| Jargon tolerance | None — no acronyms or internal terms | High — SLA, KPI, QC are daily language |
| Error tone | Supportive, no blame | Direct, outcome-focused, no softening |
The gap the system had to close
Before a screen ships, someone needs to verify: sentence case everywhere? Active voice? No banned jargon? Correct terminology for this audience? CTAs that describe what happens next? Error messages that direct instead of apologise? That's dozens of rules per screen, applied consistently, across every designer, every sprint. A checklist gets ignored. What was needed was something that would do the check automatically — and be reliable enough to trust.
How It's Built
Three skills. One entry point. Zero guesswork.
The system is made of three Claude Code skills. You only ever invoke one — the rest happens automatically.
ux-copy-review
The only skill you ever call. Reads your input, detects the audience, loads the right ruleset, and runs the full review. The split between surfaces happens invisibly — from your side, one command always does the right thing.
ux-writing-vendor
All writing guidelines for Partner Portal surfaces. Loaded automatically when a Partner Portal surface is detected. Contains voice, tone, terminology, punctuation, and navigation rules for restaurant-facing copy.
ux-writing-backoffice
All writing guidelines for internal DH tools. Loaded automatically for Backoffice surfaces. Contains tier-aware tone rules, error message patterns, and approved backoffice terminology.
The rules are human-written — not generated by AI
Before any of this was built, we commissioned an external freelance UX copywriter to write the guidelines from scratch. They studied both product surfaces — Partner Portal and Backoffice — and documented the voice, tone, terminology rules, and approved language patterns that reflect how Delivery Hero actually operates internally. The jargon, the exceptions, the things that matter to our teams: all captured in a written document by a human expert.
Those guidelines became the foundation of the two skill files. Claude doesn't invent the rules — it applies rules that a specialist already defined. That distinction matters: the AI is a reliable executor of human judgment, not a substitute for it.
Why two separate rule files instead of one
When Claude is given one large ruleset covering both audiences, it has to constantly judge which rules apply — and it can blend them incorrectly. It might apply the vendor tone (warm, upbeat) to a compliance warning that should be direct and urgent. It might flag correct backoffice terminology as wrong because the vendor rules say to avoid internal terms.
By splitting the skills, each file contains only the rules relevant to that audience. When ux-writing-vendor loads, every rule in that file applies — no ambiguity, no conflict. As guidelines evolve, each skill updates independently without risking the other.
How Claude decides which rules to load
Partner Portal detected with full certainty → vendor skill loads, review starts. Backoffice detected with full certainty → backoffice skill loads, review starts. Audience unclear at all → Claude stops and asks. It never guesses, never silently defaults. A wrong assumption about audience produces bad suggestions. One extra question is always better than a misfire.
Skill files · vendor-design-hub
.claude/skills/ ├── ux-copy-review/SKILL.md ← the only one you call ├── ux-writing-vendor/SKILL.md ← Partner Portal rules └── ux-writing-backoffice/SKILL.md ← Backoffice rules
Setup — syncing the skills
The skills live in the vendor-design-hub project. Before using the system for the first time — or after any update is published — navigate to that directory and run /sync inside Claude. This pulls the latest skill files to your local machine. Re-sync whenever a review isn't behaving as expected.
How To Use It
Six ways to trigger a review — pick what you have
Paste a Figma link. Claude fetches the design, detects the audience, extracts all visible copy from every section in parallel, and returns the review table. You don't need to point it to specific sections — it reads every layer automatically.
Drop a screenshot when you don't have a Figma link or the design is in another tool. Claude reads the image, extracts visible text, asks about the audience if it's not obvious, and runs the full review.
Paste copy directly from a doc, spreadsheet, or your head. Claude asks up to three questions (audience, element type, screen context), then runs the review. Answer all three in your first message to skip back-and-forth.
Run the full review but flag what you're worried about: "Review this screen — I'm mainly concerned about the error messages." Claude runs the full review and prioritises your concern at the top of the output.
Submit two options. Claude reviews both against DH writing rules, recommends one with a clear reason, and notes any issues with either version.
No copy yet? Specify the element type, screen, and audience. Claude drafts following all DH rules, shows the tone applied and why, and lets you iterate: "Make it shorter," "More direct," "Too formal."
Reading the output
Every review returns a structured table. Fix — a specific DH rule is broken, must be corrected before the design ships. Improve — technically acceptable but could be stronger, a recommendation not a blocker. Good — passes all rules. After the table: a Notes section for cross-element observations, and a one-line Priority summary: "3 critical | 2 improvements | 6 passing."
Acting on findings
Start with all Fix items — these are blocking. Review Improve items with your team using judgment based on context. Use suggested copy as a starting point, not a final answer. To dig into a specific row: "Explain why #3 is a Fix." To get alternatives: "Give me 3 options for the CTA in row 4."
Applying suggestions back to Figma
If you started from a Figma URL, one command writes the approved copy back into the design file. This never happens automatically — Claude only returns the review table until you give an explicit instruction. Before applying, read every row carefully: suggestions are rule-correct, but you need to verify they're right for your specific context, character limits, and localization constraints. Apply the rows you're confident in first, then re-run the review on the updated screen to confirm everything passes.
Quick reference — what to say
Review the copy on this: [Figma URL]Review the copy [attach image]Review this copy: [paste text]Review this, I'm mainly worried about the error messages: [URL]Which is better: [option A] or [option B]?Write copy for [element] on [screen] for [audience]Make it shorter / More direct / Too formalGive me 3 options for the CTA in row 4Explain why #3 is a FixOutcomes
From a checklist no one read to a review that runs itself
Any designer on the Vendor Design team can now paste a Figma link into Claude and get a full, structured copy review in seconds — no UX writer needed in the loop for routine checks. The system doesn't replace the writer's judgment; it protects the time they need to apply it.
What it catches, consistently
Title case where sentence case is required. Passive voice. Banned jargon or internal terms. Wrong terminology for the detected surface. Incorrect punctuation — en dash vs hyphen, parentheses, percentage formatting. CTAs that don't describe the next action. Error messages that apologise instead of directing. Placeholder or dummy content — spotted and listed separately, never reviewed as real copy. Inconsistent terminology across elements on the same screen. Previously, these were caught inconsistently — or not at all.
Real copy, measurably better
Who uses it
Hard constraints built in
Claude will not ask more than three questions before starting a review. It will not skip any element — everything appears in the table, even passing items. It will not guess the audience when the context is unclear. It will not present uncertain suggestions as definitive. It will not blend review and write modes — the review completes first before any new copy is drafted. These aren't restrictions — they're what makes the output trustworthy enough to actually act on.
Reflection
The writer's judgment, at system speed
The most challenging part wasn't the technical architecture — it was the ruleset. Before the system could work, the writing rules had to be explicit enough for Claude to reason about unambiguously. That meant working with a content writer to document not just what the right answer is, but why, and what the wrong version looks like in practice.
That process surfaced a lot of informal knowledge that had lived only in people's heads. The system didn't just automate the review — it codified the standard. Now those rules exist outside any one person, in a form that's versionable, updatable, and consistent regardless of who runs the review.
Next: expanding coverage to additional product surfaces, and making the Figma write-back feature available to designers who start from screenshots rather than Figma links — so the full workflow is accessible regardless of input method.
A good AI tool doesn't replace the judgment. It protects the time you need to actually use it.