MCP for design morphing

What to give the agent

Two sources, in any mix of the forms the tool accepts: a link to a live page, a screenshot, a short video or a file. A video is worth the trouble when motion is part of what you want carried over, because a still cannot show timing. A link is the easiest when the design is public.

Say what each source is in a few words. The agent sees pixels or markup. It does not know that the first is your current product and the second is a direction you admire unless you tell it.

Give each side a role

The clearest instruction splits a design into layers and assigns each layer to a side. Layout and content structure from one. Surface, colour and light from the other. Type from whichever has the stronger voice. Motion from the one whose motion you supplied as video.

A second useful instruction is a ratio in words: "mostly A, with B's surfaces" reads differently from "an even cross". Name the one thing from each side that must survive, such as A's five-fader layout or B's paper-white ground with a single blue accent.

Judge it as one design

A finished morph should read as if one person designed it. Check for the seams: two corner radii, two shadow styles, two families of easing, an accent colour from each parent. Ask the agent to list the final values for type, colour, radius and timing in one table. If any row has two answers, the morph is not finished.

Then check it does the first design's job. A crossed budgeting screen still has to show a budget.

What a morph request should contain

• Two sources: links, screenshots, videos or files, each labelled A and B.
• What each is: your product, a template, a reference you like.
• Roles by layer: layout, surface and colour, type, motion.
• A ratio in words: mostly A, mostly B or even.
• One must-keep from each side.
• The output: the stack, the sizes to check, and a table of final values.

A prompt to start from

Use the uberdesigner server's morph tool to cross two designs into one, and follow the tool's method.

A: [link, screenshot, video or file]. This is [what it is, e.g. my current budgeting screen].
B: [link, screenshot, video or file]. This is [what it is, e.g. a widget set whose look I want].

Roles:
- Layout and content structure: from A. Every piece of information A shows must still be there.
- Surfaces, colour and light: from B.
- Type: from [A or B].
- Motion: from [A or B]; durations between 0.2s and 0.6s, one easing family.
The balance is [mostly A with B's surfaces / an even cross / mostly B].

Must survive from A: [one thing, e.g. the five-category layout with a fixed total]. Must survive from B: [one thing, e.g. the white ground with a single accent, #hex].

Before building, give me a table of the final values: typefaces and sizes, palette in hex, corner radius, shadow, timings. One answer per row. Wait for my OK.

Then build it as Vite + React + TypeScript with plain CSS. Run it, check 390px and 1280px wide and the reduced-motion version, and tell me where A and B conflicted and which side you kept.

Needs an agent with the uberdesigner MCP server connected and signed in, and the two sources reachable: public links, or files and screenshots the agent can read.

Keep reading

• What to ask a connected agentFive habits for requests to an agent with a design MCP: browse first, compare options, name the template, say what is yours, and tell it to keep the design.
• What is a design MCPA plain definition of a design MCP server, what it replaces in a design-to-code workflow, and the things it does not do.

• Claude Code
• Cursor and editors
• Codex and terminal agents
• Chat apps
• Whole websites
• UI components