Clone a Website With Claude Code - Design MCP

How do I connect MiroMiro to Claude Code?

Sign in once. No API key to copy, nothing to install, and 300 free credits a month.

1Connectabout two minutes

Add MiroMiro to Claude Code

terminal

claude mcp add --transport http miromiro https://miromiro.app/mcp

Or paste this into Claude Code and let it do the setup

Add the MiroMiro MCP server for me. Run: claude mcp add --transport http miromiro https://miromiro.app/mcp Then tell me to type /mcp so I can sign in, and list the MiroMiro tools once I have.

1 Run the command
2 Check it connected
3 Sign in once
4 Ask in plain language

2Ask MiroMiro connected

Then just ask Claude Code

1

Run the command

In your terminal, before starting a session. It registers MiroMiro as a remote MCP server.

2

Check it connected

Run claude mcp list. MiroMiro should be in the list.

3

Sign in once

Start a session, type /mcp, pick miromiro and finish the sign-in in your browser. A free account includes 300 credits a month, no card.

4

Ask in plain language

Name a website and what you want from it. Claude Code calls the right tool on its own and works with what comes back.

What it does

Ask Claude Code for a website. It comes back with the real thing.

Three things people ask for most. Pick one to watch it happen.

Prompts

What can I ask Claude Code for?

Four requests to start from. Copy one, swap in the site you care about.

Rebuild

Match a reference

“Make the hero in src/components/Hero.tsx match the one on linear.app. Keep my copy.”

extract_code25 credits

Tokens

Check for design drift

“Extract the design tokens of our live site and list where tailwind.config.ts differs.”

extract_design_tokens10 credits

Brand

Theme from a URL

“Read acme.com’s brand and write it into our theme file as CSS variables.”

extract_brand15 credits

Assets

Bring the assets over

“Find the Lottie animation on their landing page and add it to public/animations.”

extract_lottie3 credits

Why connect it

Without it, Claude Code guesses

A screenshot holds pixels, not values. Same request, two results.

From a screenshot

Brand color: #3b82f6
Font: a serif, roughly
Heading: 48px

With MiroMiro connected

Brand color: #5e6ad2
Font: Inter Variable
Heading: 56px

Included

Nine tools Claude Code can call

You never name them. Claude Code picks the right one from what you ask.

What is the MiroMiro MCP server?

MCP is the standard way to give an AI agent new tools. MiroMiro’s server gives Claude Code nine of them, each one reading a live website and returning its real values: the code of a section, the brand, the design tokens, the files.

It is one URL. Claude Code discovers the tools when it connects, and there is nothing to keep up to date on your side.

More about the MCP server

Name: MiroMiro
URL: https://miromiro.app/mcp
Type: Remote MCP server (Streamable HTTP)
Sign-in: OAuth, found automatically. API keys also work.
Tools: Nine, discovered on connect

extract_code25 credits

A section as code, or an Elementor / Shopify file

extract_brand15 credits

Color roles, palette, fonts and logo

extract_design_tokens10 credits

Every color, size, spacing and shadow

extract_fonts5 credits

Font families and their files

extract_lottie3 credits

Lottie animation files

extract_assets1 credit

Every image on the page

extract_svgs1 credit

SVG icons as paste-ready code

extract_videos1 credit

Videos the page declares

extract_audio1 credit

Audio files the page declares

Options

Which way should I connect Claude Code?

The sign-in suits almost everyone. The others are there when you need a key.

WayHowAPI keyBest for

Sign-in Recommended

Run the claude mcp add command, then type /mcp in a session to sign in through the browser.

No key

Your own machine

API key

Add --header "Authorization: Bearer mm_live_YOUR_KEY" to the same command.

Key needed

Build machines and shared team setups

Local npm package

Run miromiro-mcp as a local process, with the key in an environment variable.

Key needed

Setups that only allow local MCP servers

REST API

Call the same nine tools as GET endpoints from your own code.

Key needed

Scripts, backends and CI, with no agent involved

Compared

Is Claude Code the same as Claude?

No. Both come from Anthropic and both use the same MiroMiro server and account, but a connector added in Claude does not appear in Claude Code. Each is set up once.

Claude Code

Claude

What it is

A coding agent in your terminal

A chat app, on the web and desktop

How MiroMiro connects

One claude mcp add command

A connector, added in one click

What you get back

Files written into your project

An answer in the chat, with a live preview

Best for

Building UI that matches a reference

Brand boards, previews, one-off sections

Good to know

What it reads, and where it stops

Public URLs

Any public page

Whatever a visitor without an account can open. No pages behind a login, no localhost.

8 named sections

Sections by name

Hero, header, footer, pricing, features, testimonials, FAQ or CTA. Every result lists the page’s other sections.

No extra cost

JavaScript sites

Read as HTML and CSS first. When a page needs its scripts, it is re-read in a real browser automatically.

Both themes

Light and dark

A site with a dark variant returns its light version by default. Ask for the dark one and you get that.

0 credits

Repeats are free

Results are kept for 24 hours. Asking again for the same page in that time spends nothing.

0 credits

Failures are free

A site that blocks the request or times out costs no credits. You pay for results only.

FAQ

Questions about MiroMiro in Claude Code

Can Claude Code clone a website?

Not well on its own: from a screenshot or the page text it estimates the colors, fonts and spacing. With MiroMiro connected, Claude Code reads the live page’s real CSS and rebuilds one section at a time as code, with the true values. It is a section you own and restyle, not a pixel copy of a whole site, and behavior such as menus and carousels is not carried over.

Is there a design MCP server for Claude Code?

Yes. MiroMiro is a design MCP server that works in Claude Code. Figma’s MCP reads Figma files; this one reads any live website and returns its code, design tokens, brand colors, fonts and assets.

Can I use an API key instead of signing in?

Yes. Add an Authorization: Bearer header with your key to the same command if you prefer a key over the sign-in, for example on a build machine.

Does it write the files into my project?

Claude Code does. MiroMiro returns the component, tokens and asset URLs; Claude Code adapts them to your stack and writes the files.

Claude Code does not show the MiroMiro tools. What should I check?

Run claude mcp list. If MiroMiro is listed but not signed in, type /mcp inside a session and finish the sign-in there. If the sign-in window never opened, remove MiroMiro and add it again, then start a new conversation: most clients only load their tools when one begins.

Does it work on sites built with JavaScript?

Yes. MiroMiro reads the page’s HTML and CSS first, which is enough for most sites. When a page only draws itself in the browser, MiroMiro re-reads it in a real browser that runs the page’s scripts, automatically and at no extra cost. Your agent can also ask for the browser up front for 5 extra credits, on any plan.

Which formats can it return?

A section comes back as Tailwind, HTML and CSS, React, Vue, an Elementor template or a Shopify section. Design tokens come back as JSON, CSS variables, a Tailwind config or a W3C design tokens file.

What does it cost?

Connecting is free, and a free account includes 300 credits every month with no card. Each tool call spends credits: 1 for images or SVG icons, 15 for a brand kit, 25 for a section as code. Repeat calls within 24 hours and failed calls are free.

What happens when I run out of credits?

Claude Code tells you the monthly credits are used up and the calls stop until they reset, or until you add credits or a plan on the pricing page. Nothing is charged on a free account, ever.

Can it read pages behind a login?

No. It reads public pages the way a visitor without an account would see them. Pages that need a sign-in, and addresses on your own machine such as localhost, are out of reach.