Moonprint

Lift the design of any website.

Paste a link or an HTML file. Moonprint opens it in a real browser, measures every color, type style and transition, clones the code, and hands your AI a skill it can install with one npx command.

or , or drop one on the field

Scanning needs a free account. Sign up or log in.

halcyon.financedark · 8px grid
Aa
Display
64 / 1.05 · 700 · −0.035em
Body
16 / 1.6 · 400
Scale
1.414, augmented fourth
Primary motion
cubic-bezier(0.23, 1, 0.32, 1)
240ms on transform and opacity, scroll reveal on enter, 0.97 press
moonprint add halcyon-react

From a link to a skill your agent can use

Every imprint keeps three things: the measured design system, a working clone of the page, and skills generated from it for the framework you build in.

  1. Scan

    Playwright loads the page, scrolls it, hovers and presses every control, and records each class, style and animation change along the way.

  2. Read it like a designer

    Colors get roles, sizes become a type scale, transitions become motion tokens with named curves, and an audit flags motion worth improving.

  3. Install the skill

    Pick a framework and your own accent, font or speed. Moonprint writes SKILL.md, tokens, motion.css and component recipes, packaged for npx.

Your imprints

Open one to explore its palette, type, motion and components, or to generate another skill.

Log in to see your imprints.

Connect your AI

Type /moonprint stripe.com in Claude Code. It asks which framework you want, scans the page, works out what kind of page it is, and asks what to build: a copy, a rebrand, a new page in the same style or just the design system. Moonprint is also a plain MCP server for ChatGPT, Cursor and others. Use an API key from your account page as MOONPRINT_TOKEN.

npx https://www.moonprint.dev/cli.tgz install
claude mcp add --transport http moonprint https://www.moonprint.dev/mcp/moonprint \
  --header "Authorization: Bearer $MOONPRINT_TOKEN"

# then, in Claude Code:
> /moonprint https://linear.app