Skip to content
AETHER
中EN
01Home02Experience03Projects04About05Awards
Back to case files
AI engineeringCompleted

Design source → frontend: an MCP toolchain for reading Modao prototypes

Turn a design share link into a structured spec so the agent implements against it instead of guessing pixels

Role
Toolchain design and implementation (solo)
Scale
One command: link → spec
Period
Oct 2026 — Present
Node.jsPlaywrightMCPTypeScriptMarkdown spec generation

What I did

  • Reads position, font size, colour, radius and image URLs from the real DOM of the Modao share page instead of OCR
  • Emits an implementable spec.md: palette, type scale, radius ladder, sections, text inventory, assets and constraints
  • Packaged as an MCP server so Claude Code / Codex / Cursor / Trae can invoke it themselves
  • Closed verification loop: re-extract and pixel-compare after implementation so drift is measurable

The problem

“Look at the design and rebuild it” fails in three ways: numbers are guesses, assets are unreachable, and the page structure is gone. The first pass looks fine; by the third revision it no longer matches.

Modao’s share page is rich-text rendered — the design lives as real DOM nodes, so positions, font sizes, colours and image URLs are all readable. The right move is to convert the design into a structured spec first and let the model write code against it.

What I built

A one-command extractor: share link in, this out:

manifest.json        canvas list (canvasId / title / size / widget count)
spec.md              ★ the spec an AI reads: palette, type scale, radius ladder, sections, constraints
images/<canvas>.png  3x screenshot per page
widgets/<canvas>.json widget tree: type/x/y/w/h/fontSize/fontWeight/color/radius/img
assets/              referenced bitmaps and inline SVG icons
design-tokens.json   token frequency counts

A spec generator: aggregates the widget tree into a spec both humans and models can read — the most frequent font sizes, colours and radii become tokens, and widgets sharing a horizontal band become a section.

An MCP server: wraps both steps as tools so an agent can decide “pull the spec for this page”.

Pitfalls

  • The outer widget carries 12px placeholder styles; the real font lives in the inner .rich-text node — read the wrong layer and every token is wrong
  • Some icons are inline data:image/svg+xml, not files, and must be extracted separately
  • Only “inspect” mode (view_mode=inspect) exposes the widget tree; “present” mode is a canvas only

Outcome

The first rebuild of the home page was written straight from the spec, and later revisions edit tokens in the spec while the page follows. The toolchain has since been reused on other projects.