Design Prompts for AI: Rebuild Real Designs With MagpUI

Pick a real design you like, copy its prompt, and your AI agent rebuilds it inside your project. It takes a few minutes, and the result stops looking like every other AI screen. Here is how to do it with MagpUI, the gallery Alek built, and how to write a good design prompt even without the site.

What It Is

MagpUI is a growing gallery of motion pieces, components and full page templates, for websites, apps and internal tools. Every piece has a page with a description, tags (colors, style, category) and a ready-made prompt for Claude Code, Codex, Cursor, v0, Lovable or Bolt.new. The gallery updates every hour: an AI curator browses the web, picks the pieces and writes the prompts, and Alek sets the direction.

Why It Matters

Ask Claude Code or Cursor for "a beautiful landing page". It works, it is clean, and it looks like every other AI landing page.

The reason is simple. When you type "make it modern and premium", the AI has nothing concrete to aim at. It picks the most average answer it knows: the same rounded cards, the same purple gradient, the same fade-in.

Good designers start from a reference: something real they saw and liked. Then they describe it in exact terms. Not "nice spacing", but "a 40px gap". Not "smooth", but "a 2400ms loop".

Keep one idea: your AI copies what you show it, not what you wish for. The hard part, when you start out, is finding the words. MagpUI hands them to you.

How To Do It

You do not need an account. Alek checked in a fresh browser with no login: "Copy prompt" worked straight away.

1. Find a piece. Go to magpui.com, use the filters at the top (Motion, Components, Templates and the rest) or press "Random". Open a card. One example: "Orbiting Rings Form a Sphere" by @okazz_, a sphere of thin colored rings that slowly turns.
2. Read the page before you copy. Ten seconds is enough. The description tells you what makes the piece special. The "How to rebuild it" tab lists the steps and the tools, like Three.js or the Motion library.
3. Install the skill, if there is one. Some pieces suggest a "skill" for Claude Code: a small package of know-how for your agent (about Three.js animation, for example). The page gives you the exact command. Templates with photos tell you to make them with an image generator, because code cannot draw a photo.
4. Copy the prompt. Press "Copy prompt" and the button says "Copied". The arrow next to it also copies the image or clip link. To read the prompt first, open the "Prompt" tab.
5. Paste it into your agent, inside your own project. The agent reads the reference, looks at the frames and builds the piece with what you already have.
6. Compare with the original. Most people skip this. Put both versions side by side. If something is off, do not say "make it better": say what to change, among timing, size, color and spacing.

Look at how the rings prompt opens. A REFERENCE part links the page, the first frame, the clip and the original post. Then it asks the agent to download the first frame and study it before building, because text describes but frames tell the truth. Further down you find details like a full turn in 18000ms.

The format behind every prompt. Even if you never open MagpUI, you can reuse its structure for any screen:

• Reference: links to the original and to a frame or clip to study.
• Build: one or two plain sentences.
• Design system: exact colors, sizes and spacing.
• Motion: what moves, how long, which easing. If a timing is a guess, not a measurement, say so.
• Sections: what is on screen and which states to handle (loading, done).
• Implementation: tools, accessibility, respect for people who turn animations off.
• Adapt to the project: your colors and fonts, never the original's logos or images.
• Success check: a short list the agent tests its own work against.

Ready to copy, fill in your own reference:

If you would rather stay in your editor. MagpUI also has an MCP server, a standard way to plug an outside tool into your agent. Once connected, the agent searches the gallery and pulls prompts on its own. The MCP page says it is free, read only and needs no account. In Claude Code, run this once in your terminal:

Then ask, like the example on the page:

The same page has setup lines for Codex, Cursor and Claude on the web too.

Small Test

Ten minutes. Take one small part of your site, like a button or a card. First ask your agent to "make it more modern" and save the result. Then find a similar piece on MagpUI, copy the prompt and paste it. Put both versions side by side.

It worked if the second one has sizes, timings and colors you can name, and if the agent lists the differences with the original on its own. If it does not, ask: that is where an OK result becomes a good one.

Watch Out For

• Every piece belongs to its author. MagpUI shows who made it and a "View original" button. If an author wants a piece removed, there is a "Write to us" link at the bottom of the page. Use the piece to learn and build your own version, not to clone someone else's product.
• No logos, brands or photos. Each prompt already ends with an "Adapt to the project" part. Do not cut it when you edit.
• Timings are not always measured. The prompt says when a value is suggested. Check by eye.
• Prompts are written by an AI curator, not by hand one by one. Read them before you paste.

This article comes from a piece Alek published on Medium.

Next step: bring the piece into a full page, as in From a Design to a Real Website With AI. To see the job behind it, read What Is a Design Engineer.

In short: Your AI copies what you show it, not what you wish for: start from a real reference, describe it with exact numbers and compare the result with the original.