Back to projects

Case 01 · AI Product System

Design MCP

MUSE builds email HTML in about a minute.

DESIGN MCP PRODUCT EXPLORATION · 2026

Design tools for
marketing teams.

Start with a certified template.
Review layout changes in the conversation.

Design Center
Design MCP entry hub
QA Review
Quality checks and fixes within the conversation
Generate & refine
Generate slides using approved modules in conversation
Approved templates
Approved PPT template library with original Chinese slide previews
PPT Studio prototype · template selection, generation and QA review.

I lead product and UX for tools that help CNGS marketers produce seller communications. MUSE is live for email. The broader Design MCP platform is in validation.

Role
Product & UX lead
Period
2024–Present
Surface
Internal web platform
Scale
Org-wide · CNGS
Status
Mixed · MUSE live, platform in validation
130certified PPT layout modules
4product workflows on one platform
3 daysmanual exhibition deck placement today

Routine production filled the design queue

A small central design team handled recurring production for Amazon Global Selling China. Even approved campaign copy needed layout and coding work before it could be sent.

I looked at which production decisions could be specified in templates and which still needed a person to review them.

Sharing the design rules across products

The platform design uses a Model Context Protocol server to expose template and rendering tools to compatible AI clients.

The planned shared services cover PPT Studio, MUSE email, Adaptive Creative and the Image Library. Brand rules and QA checks are maintained centrally.

I separated the integration approach from the instructions that tell an agent how to use it:

APIProduct integration

An API can provide the shared rendering service. Each product still needs a way to expose those operations to its AI client.

SkillAgent instructions

A skill describes the workflow and when to call a tool. Its instructions need versioning as the workflow changes.

MCPShared callable tools

MCP gives compatible clients a common way to call the design tools. The server manages template versions and rendering checks.

I own product definition and UX, including the template system and validation rules. I work with engineering and business teams on how those rules are applied.

Deciding when human review is needed

The platform specifies review points for content accuracy, image approval and final delivery. Layout checks can flag a problem and return it to the appropriate owner.

I define those checks with the template rules. The pilot tests them against actual conference materials.

System architecture

The proposed platform shares design rules across four production workflows.

Design MCPUnified entry · design execution only · content stays upstream
Phase 1

PPT Studio

Approved content → editable PPTX
  • Receive approved content
  • Choose template / KV
  • M×T match · 3 drafts · layout
  • Preview → adjust → .pptx
Phase 2

Resize & Adaptive

Posters · banners · social · extensions
  • Upload reference / KV
  • Pick scene + ratio
  • AI resize / visual extension
  • Preview → download
Phase 1

Flash / HTML

Approved content · multi-device
  • Import approved content
  • Choose template / channel
  • AI component layout
  • Multi-device preview → export
Phase 1

Image Assets

Stock candidates, feeding PPT
  • Own library + Adobe Stock (TBD)
  • AI tagging / ranking
  • 3 stacked candidates per slot
  • Source / rights visible
Design System MCP · shared constraint layerrev.10 token source · Visual Fingerprint · M01–M13 × T01–T18 mapping · layout/BG variants · two-layer collision QA

Frontend layer

Template PickerContent IntakePreview CanvasEditor PanelImage SelectorExport Hub

AI service & backend layer

Design orchestrationPPTX render engineImage candidate serviceHTML layout serviceImage retrieval connectorBrand rule injection
Future goal · 2027+ Creative Assets Hub · one asset center for outputs, templates and rules, reused across products
Product 1

PPT Studio

Approved content → certified template → editable PPTX. Pilot, real-material validation.

Three types of conference deck

Approved Chinese sessions need template application. Global English keynotes need format conversion and image sourcing, with translation handled by the content owner.

Exhibition content arrives in a spreadsheet. Placing it into a 100-page deck currently takes one person about three days.

PPT Studio uses an approved template and 130 certified layout modules. When copy exceeds a layout’s limits, it offers another layout or returns the copy to its owner for editing.

Validation includes structural collision checks and visual review at 200% zoom. The module is being tested with real materials.

PPT Studio · product user journey

User actionAI / tool actionHuman quality control / choice ⏸Automated quality control
  1. Step 1 · Content side

    Prepare materials

    CommSphere · Pitch Deck Gen · Maven

    Collect semi-finished decksDaily decks · Accelerate EN versions · outline copy · any of the three content tools
    State the requirementBreakout first / Main Session limited · page count · output ratio
  2. Step 2 · Content side

    Structure the content

    CommSphere · Pitch Deck Gen · Maven

    Split into content modulesM01–M13 · content POC trimmed (P0=9 / P1=4)
    Seller-facing copyContent tools prepare the copy. Design MCP also accepts standard content modules directly.
    QC① Content accuracy ⏸Owner confirms · versioned
  3. Step 3 · Design side

    Module matching

    Design MCP

    Content → design moduleMany-to-many matrix · auto-recommended
    2 treatments per contentMinimal statement vs detail (short vs long copy)
    User picks one of two ⏸Two layout treatments to compare
    Complex diagrams: skeleton onlyMessage house etc. · AI skeleton → human polish · non-P0
  4. Step 4 · Design side

    Design generation

    Design MCP

    Brand template + layout render
    Asset crawl → TBD placeholders
    QC② Automated visual QAType size · character count · overflow · brand compliance
    QC③ Image approval ⏸A person approves image purchases
  5. Step 5 · Design side

    Multi-version export

    Design MCP

    Big screen → 16:9 live version
    EN ↔ CN · one-click template swapROA Hub capability exists · interface TBC
    Post-conversion visual recheck
  6. Step 6

    Final review & delivery

    QC④ Human final review ⏸Content owner and designer approve delivery
    Agency shifts to local fixesThe pilot measures changes in agency workload
    Deliver to SCUsage tracking · feedback loop

Four review gates and a choice between two layout treatments.

Main path · PPT Studio · pilot Oct 2026

A seven-step walkthrough of the PPT prototype

User · click / decideAI · design workGate · governance
1Choose template
2To conversation
3Content gate
4Pick module
5Render → QA
6Two decisions
Editable PPTX
1
User

Open Design Center, click Choose template

Choose the certified Dark 2026 template at the top of the hub. The other entries show planned workflows.

The template library opens with Dark 2026 ready to inspect.

Design Center hub
Click
library opens · Dark 2026 ready
2
User

Preview the modules, click Continue to conversation

One certified visual system in the pilot: 130 editable modules, 19 layout types. The previews show what Dark 2026 contains before you commit.

A workspace conversation opens with the template locked in.

Template library
Click
workspace opens · template locked in
3
UserGate

Drop in your content file · the gate reads it first

draft-content.docx has no approval record, so it is held with a plain answer. Nothing renders from an unapproved draft.

Upload approved-content.docx and say what you need · the flow continues from the approved file only.

Chat · zoomContent gate in chat
Held
Upload
approved file only · draft stays held
4
AIUser

Pick a module in the chat

Design MCP reads the 12 approved sections and recommends three fits for the opening. Click Open Pillars · T07 to confirm.

The editable deck starts building · 8 of 14 slides and counting.

Chat · zoomModule recommendations
Click
module confirmed · deck building 8/14
5
AIUser

Watch the render, then click Send to QA

The Design Files panel shows each slide’s render status. QA becomes available when all slides finish rendering.

Click Send to QA to run the checks in the same thread.

Design files · zoomRender progress
Then click
14/14 rendered · QA runs in-thread
6
GateUser

Answer the two decisions on slide 7

QA flags slide 7 in the 14-slide deck. Click Apply fix for the logo safe area. For copy over the limit, choose Switch layout or return it to the content owner.

The specified type minimum stays in place while the layout or copy is revised.

QA · zoomQA flags on slide 7
Click
Or this
2 fixes cleared · ready for human review
Outcome · step 7

Open in PowerPoint → editable PPTX

Open the exported file in PowerPoint to edit its objects. Speaker notes and the template’s brand settings are retained.

Product 2

MUSE

Marketing User Interface & Style Engine generates email layouts and HTML from approved campaign copy.

An email took 6–8 hours to build

The channel team serves 800K sellers with roughly 600 emails a year. Each email took a designer or agency 6–8 hours to lay out and code.

A specialist then completed about 80 setup steps in Pardot before sending.

With MUSE, a marketer uploads approved copy in Word and gets email HTML in 30–60 seconds. A person reviews the creative before ECHO handles the Pardot setup in two clicks.

The rules behind the generated HTML

MUSE applies 94 coding rules and 40 brand guidelines. These cover client compatibility, layout and input checks across its module library.

MUSE + ECHO · EMAIL PRODUCTION JOURNEY

User actionTool actionHuman review / choiceAutomated check
  1. Step 1

    Prepare content

    Approved Word documentThe marketer provides approved campaign copy.
  2. Step 2

    Generate with MUSE

    Production HTML + QA report68 design modules · 3 templates · 94 coding rules · 40 brand guidelines.
  3. Step 3

    Approve creative

    Human approvalReview the creative before deployment.
  4. Step 4

    Deploy with ECHO

    Set up in PardotRPA operator · ~80 steps → 2 clicks.
  5. Step 5

    Send

    Email delivered12.5 h manual → ~20 min.

Validation issue → return HTML or dynamic-field fixes to MUSE.

94 coding rules · on 68 modules / 3 templates

36Client compatibility · international & Chinese mail clients
16Responsive & performance
18Content generation rules
24Quality control & input validation

40 brand guidelines

13Colours & logo
9Typography
10Spacing & layout
8CTA hierarchy

Results in use

MUSE has been used for seller campaigns since May 2026. It was announced to CNGS Marketing in August.

6–8 h → ~1 minCreative + HTML, per email
4 days → 1.5 daysContent-to-send lead time
~7,300 hEstimated annual hours saved, MUSE + ECHO
¥200K → ¥0Annual agency fee, recurring
98 sends · 0 failuresReported sends since May 2026
Self-serve HTMLMarketers generate layouts from approved copy

Marketers can prepare HTML through MUSE. Creative approval remains a human step before deployment.

The input and delivered emails

The Word input and generated email below show how MUSE applies its module library to campaign copy.

Open the campaign examples to inspect the complete HTML output, including the legal footer.

01 · APPROVED INPUT
02 · PRODUCTION HTML
SYSTEM EVIDENCE · COMPLETE CAMPAIGN EMAILS · ORIGINAL CHINESE CONTENT

MUSE 2 · Hyper-personalization

MUSE 2 generates one email per seller from AI-written content. Live since September 2026, it runs every business day for MAVEN, the seller-launch personalization program.

The content now came from an agent

MUSE 1 received Word documents with headings and formatting. In MUSE 2, the content agent writes each seller’s email into a plain-text spreadsheet cell.

I needed a way for the content agent to specify email modules in that cell. The same format had to work across thousands of rows.

Seven tags identify the email modules

I defined seven tags: title, preview, salutation, body, sub-heading, list and button. Two inline markers specify emphasis.

I packaged these rules as a skill for the content agent. It writes seller-specific copy with tags that map to MUSE’s design modules.

A deterministic parser renders each row with the same layout rules. No model runs at send time.

LIVE · HYPER INTERFACE2,189HTML outputs · one workbook batch
BUILT-IN QUALITY CONTROL

Inspect the selected
email’s QC result.

The green status opens the checks behind the selected email’s QC result.

Hyper tool showing a batch of 2189 HTML outputs and the selected email’s passed QC panel
01 · Batch navigator
Original batch navigator showing 1 of 2189 HTML outputs
Viewing output 1 of 2,189
Original green QC status button in the live Hyper interface
03 · Green QC statusPassed for the selected email
02 · QC panel, enlarged
Original QC panel: passed; text 69 groups, numbers 19, percentages 4, URLs 2; dates, email, amounts and dynamic placeholders each 0
69 text groups19 number groups4 percentage groups2 URL groups

Also checks dates, email addresses, amounts and dynamic placeholders.

LIVE HYPER INTERFACE · 2,189 HTML outputs in one batch. Green QC shows the selected email has passed its checks.
SOURCE WORKBOOK

One content cell → one email.

Original generated source workbook with the content column highlighted

Workbook overview · column G highlighted

contentColumn G · detail
Content column in the source workbook, with tagged title, preview, salutation and body text in Chinese
The source file carries each email’s tagged structure in the content column. Original Chinese copy is preserved.
Seven-tag content contract, typeset from the August 2026 specification
CONTENT CONTRACT · TYPESET FROM THE AUGUST 2026 SPECIFICATION

Quality control

We built an independent QC step into the live pipeline. It checks that every rendered email faithfully preserves its source content before it can be sent.

HYPER · QUALITY CONTROL JOURNEY

User actionTool actionHuman review / choiceAutomated check
  1. Step 1

    Source content

    Provide the sourceOne tagged content cell per email.
  2. Step 2

    Generate HTML

    Assemble the emailUse the shared template and source content.
  3. Step 3

    Check fidelity

    Compare against sourceComplete · accurate · correctly structured.
  4. Step 4

    Resolve the result

    Pass → ready to sendGreen QC status appears in the interface.
    Fail → retry and recheckUp to 3 retries.
    Still failing → human reviewReview the reason and decide the next action.

QC checks fidelity. The content owner remains responsible for source accuracy and compliance.

Results in use

MUSE 2 supplies the HTML generation step for MAVEN’s daily emails. It renders each seller’s content and checks the output against the source.

+55% capacity+22 sends a month on the 40 quota, zero added designer hours
Exception reviewQC flags failed checks for retry and human review
Shared rendering rulesEvery row uses the same parser and layout rules
Program result · MAVEN pilot, first month
3.2×click rate vs lifecycle baseline (11.4% vs 3.6%) across 2,558 prospects reached
Program-wide figure for the personalization program across WeChat, WeCom and email, reported to WWGS SLT. Not attributable to the rendering pipeline alone.

Next, I plan to extend the content format to support tables, images and per-seller links.

What's next

Phase 1 · live
Standard ad-hoc + dynamic-content email. One upload generates multiple seller-segment versions automatically.
Phase 2 · live Sep 2026
Hyper-personalization. One individually generated email per seller, one batch every business day.
Next
Extend the content contract to tables, images and per-seller links.
Later
Move generation from the shared machine to a server that marketing POCs can access.