Prompt for AI builders
Paste it into Lovable, v0, Bolt, Replit, Claude Code or Cursor. It says what to build and exactly how it should look, down to the hex values and pixel sizes.
Free tool · no signup
Design prompt generator.
Paste any website. Get its look as a UI prompt for Lovable, v0, Bolt, Claude Code or Cursor, plus a Claude skill, a Cursor rule and a Tailwind theme.
Try
site
Colors tap to copy
Type and shape
In this style
Ship the page you pictured.
Your agent builds new screens with these exact colors, type and corners, so nothing looks generic.
Learn more
FastEvery value measured.
YoursNew layout and copy.
Six formats, one URL.
DESIGN.md
A short design direction your coding agent reads before it touches any UI: principles, colors with their jobs, type, corners, spacing and what to avoid.
Claude Code skill
The same direction as an Agent Skill. Claude Code loads it on its own whenever it builds or restyles UI, in this project or in all of them.
Cursor rule
A .mdc project rule, so every Cursor chat and agent run keeps the look without you pasting anything again.
Tailwind v4 theme
An @theme block with colors, fonts, type sizes, radii and content width, ready for classes like bg-canvas and text-display.
CSS variables
Plain custom properties for any stack, with the dark or light mode too when the site ships one.
Vibe code it in your tool.
Claude Code
Open the Claude skill tab, copy it, and save it in
.claude/skills/. Then ask: “Build the pricing page using the design skill.”Cursor
Save the Cursor rule in
.cursor/rules/. Every chat follows it. Or keep DESIGN.md in the repo and mention it with@DESIGN.md.Lovable, v0, Bolt, Replit
Paste the prompt as your first message. For a longer project, add DESIGN.md to the project's knowledge or instructions so every reply keeps the style.
Codex, Windsurf, Copilot
Save DESIGN.md in the repo root and add one line to
AGENTS.md: “Follow DESIGN.md for all UI.”
Why exact values? Left alone, AI builders fall back on the same look: default fonts, purple gradients, glassy cards. A prompt with real hex codes, sizes and radii gives your agent nothing to guess, and the result looks designed rather than generated.
Free tool or Siteprint?
| Feature | This free tool | Siteprint |
|---|---|---|
| Reads | The CSS files a site ships | The page as Safari renders it |
| Color roles | Guessed from CSS | Measured on screen |
| Layout of each section | No | Grids, columns and order |
| Buttons, cards, inputs | No | Measured components |
| Screenshot for your agent | No | Yes |
| JavaScript-styled and logged-in pages | Often thin | Yes |
| Mix two sites into one | No | Yes, with Pro |
| Your agent reads scans over MCP | No | Yes, with Pro (how) |
See what a full scan looks like: the Linear DESIGN.md and the page an agent built from it, or more examples.
Popular designs.
Questions?
Is the design prompt generator free?
Yes. There is no signup and no account. Paste a URL and copy what you need.
What does it read from the website?
The page's HTML and the CSS files it links, the same files any browser downloads. It works out the canvas, text, accent and border colors, the fonts, type sizes, corner radii and spacing from selectors, CSS variable names and how often each value is used. It does not run the page's JavaScript or take screenshots.
How do I use DESIGN.md with Claude Code, Cursor or Codex?
Save it as DESIGN.md in your project root and tell your agent to follow it for all UI. For Claude Code you can also install it as a skill in .claude/skills/<name>/SKILL.md, and for Cursor as a project rule in .cursor/rules/<name>.mdc. This tool gives you all three.
Does it work with Lovable, v0, Bolt and Replit?
Yes. Paste the prompt as your first message, with the first line changed to what you are building. For longer projects, paste the DESIGN.md into the project's knowledge or instructions so every message keeps the style.
Is it okay to use another website's design?
The output is a design direction: colors, type sizes, corners and spacing, not the site's content, code, images or logo. Build something original with it, and do not use another company's name, logo or copy.
Why are some results thin or wrong?
Some sites style themselves with JavaScript, ship almost no CSS files, or block automated visitors. A CSS file also cannot say which color sits where on screen, so roles are educated guesses. Siteprint, the Safari extension, measures the page as it renders and is exact.
Do you keep the sites I look up?
No list of lookups is kept. The fetched CSS is cached for a day so repeat lookups are fast, and the design is worked out in your browser. Details are in the privacy policy.