AI and design systems
Let AI write the email. Let the system build it.
Ask an AI for an email without a system and it invents a layout, guesses your colours and writes HTML that breaks in Outlook. Give it a design system and it can only choose your approved parts. Claude writes the words; your tested components do everything else.
How it plugs in
01 · Your team
Brief
“Spring offer for Harbour House, two nights, code SPRING26.”
02 · Claude
Draft
Reads the system file and Skill, chooses blocks, writes the words. Returns JSON, never HTML.
03 · The system
Render
Tested components turn the draft into email HTML, light and dark, in your brand.
04 · Health Check
Gate
Nineteen checks. Below your threshold, the draft goes back, not out.
05 · Your ESP
Send
Exported with Klaviyo, Braze, SFMC, Dynamics, HubSpot or Mailchimp merge tags.
Every AI draft passes the same automated check as every human one. Nothing reaches your platform unscored.
Who controls what
Claude decides
- Subject line and preheader
- Which blocks, in which order
- Headlines, body copy and button labels
- Alt text for every image
- Personalisation tokens
The system locks
- HTML and rendering code
- Colours, type and spacing
- Dark-mode behaviour
- Accessibility and contrast
- Footer, unsubscribe and legal text
Five ways in
Claude Skill
Marketing teams in Claude
Teaches Claude your voice, journeys and components. Drafts come back ready to open in the Composer.
System file
Any AI tool or developer
Tokens, components, field limits and rules as one JSON file Claude can read.
MCP server
Teams with Claude connected to their tools
Claude reads the live system and hands drafts straight to review, with no copying and pasting. Built per client.
Composer import
Reviewers and approvers
Paste a draft, see it rendered in your brand and scored before export.
Claude Code
Your developers
Extends the component library against the same test suite, so new blocks can’t break old ones.
Next step
From AI-written emails to email on autopilot.
Once Claude works inside your system, it can run whole programmes: planning the calendar, building and checking every send, and learning from results, at the level of automation you choose.
Try it: paste a draft from Claude
In Claude, ask: “Using https://inbox-innovation-site.vercel.app/system.json, write a spring offer email for Harbour House. Return only the draft JSON.” Paste the answer here.
Ask Claude to write an email using the system file, then paste what it returns. Anything outside the schema is dropped, not trusted: unknown blocks, scripts and unsafe links never reach the preview.
The Composer renders it with the brand’s tested components and scores it before you can export it.
Case study
This platform was built with Claude in five days.
The website, email system, Health Check, Composer and brand tool, with 127 automated tests and zero accessibility violations. What the human did, what the AI did, and what made it work.