Pull the design. Push the code.
One MCP connection. Your designs flow straight into Claude Code or Cursor as structured output — components, tokens, layout. No screenshots. No guessing. You keep shipping.
How it works for you
Four steps. Connect to ship.
Connect Moonchild MCP
Add the Moonchild MCP to Claude Code or Cursor. One connection gives your coding agent direct access to your team’s designs.
Pull in the design
Your coding agent reads the component hierarchy, tokens, and layout from Moonchild. No screenshots. No Figma files. Structured output your tools already understand.
Build from the spec
The design IS the spec. Claude Code or Cursor builds directly from the structured output. Every component, every token, every spacing value — already defined.
Re-pull when designs change
Designer updates a screen in Moonchild? Pull the latest. The loop is minutes, not days. No more stale Figma links.
Before Moonchild
- ×
Designer hands you a Figma file. You rebuild it from scratch.
- ×
Padding is wrong. Back to Figma. Back to code. Repeat.
- ×
Handoff is a screenshot and a prayer.
- ×
“Can you make this 2px taller?” — three hours later.
- ×
Design system exists in Figma. Your code has its own version.
After Moonchild
- ✓
Pull the design via MCP. Components, tokens, layout — structured.
- ✓
Every pixel matches because it’s the same source of truth.
- ✓
Claude Code reads the spec and builds it. No interpreting.
- ✓
Design changes? Re-pull. Minutes, not days.
- ✓
Open the PR. Not another Slack thread.
Already using Claude Code?
Moonchild was built for your workflow. Here’s how it fits.
MCP = Zero drift
No more back-and-forth on padding and components. MCP eliminates the translation layer. The design IS the spec.
Claude Code & Cursor ready
Moonchild’s output is structured for the tools you already use. They read the component hierarchy and build it. No PNGs. No guessing.
Your DS stays the source of truth
Designers update the system once. Every pull uses the latest tokens. What’s designed is what you build.