Website to prompt: recreate a site's design in v0, Bolt, Lovable or Claude

Site to Prompt measures a real page in your own browser (colors, fonts, spacing, layout, sections and tech stack), then writes a prompt for the tool you choose: v0, Bolt, Lovable, Claude, ChatGPT, Midjourney or FLUX.

Checking for the Cuelara extension...

Browsers don't let one website read another's styling, so Site to Prompt measures pages from a small extension running in your own browser. It only acts when you press Analyse here or in its popup, and it works on logged-in pages too.

Download extension v1.3.1 (.zip)Chrome, Edge, Brave and other Chromium browsers

Install in 4 steps (Chrome, Edge, Brave)

  1. Download the zip above and unzip it to a folder you'll keep (don't delete it afterwards).
  2. Open chrome://extensions in a new tab (Edge: edge://extensions).
  3. Turn on Developer mode (top-right switch).
  4. Click Load unpacked and choose the unzipped folder. Then pin the extension from the puzzle-piece menu so its icon is easy to click.

Chrome may show a “developer mode extensions” notice when it starts — that's normal for extensions installed this way. To update later, download the new zip, replace the folder's files, and press the reload icon on the extension card.

This page unlocks automatically as soon as the extension is installed.

Explore Related Prompt Engineering Tools

Prompt Builder Prompt Optimizer Prompt Formatter Prompt Cookbook

What the Site to Prompt does

Site to Prompt is a website to prompt tool. It measures a real page's design in your own browser (colors, fonts, sizes, spacing, layout and sections), then writes a prompt that an AI builder, coding assistant or image model can use to recreate that style with your own content and branding.

The measuring step does not use AI. The Cuelara browser extension reads the computed styles the browser painted, and those numbers are counted and ranked. AI is used only at the end, to phrase the measured values as a prompt for the target you choose, so the values come from the live page rather than a guess from a screenshot. Use it for design inspiration or as a reference: the prompt tells the AI not to copy the site's wording, brand or images.

To write a prompt from an idea instead, use the prompt builder. To improve a prompt you already have, use the prompt optimizer. To pull the relevant parts out of a long document, use the Document to Prompt tool.

How to use the Site to Prompt

  1. 1

    Install the extension and pick a page

    Add the Cuelara browser extension once. Then enter a website address here, or open any page and press Analyse this page in the extension.

  2. 2

    Let it measure the page

    The extension opens the site in a background tab of your own browser, measures its computed styles and closes the tab. You see the result as an editable Design DNA card: change a color or font before you generate if you like.

  3. 3

    Choose the target

    UI Builder for v0, Bolt or Lovable, Code Assistant for Claude or ChatGPT, or an image generator for Midjourney or FLUX and SDXL, so the prompt is written the way that tool reads best.

  4. 4

    Generate and paste

    The tool writes the design prompt from your measured values. Edit the content and brand details, then paste it into your AI tool to build your own version.

Example: before and after

Before

"Make it look like that fintech homepage I saw."

After

Design prompt (illustrative): a light page with a white background, one saturated indigo accent used on buttons and links, a 64px display heading in a geometric sans, a sticky navigation bar, and a two-column hero with a product card on the right...

Illustrative output. Real prompts carry the values measured from the page you analyse, so a vague reference becomes concrete numbers the AI can follow.

Who the Site to Prompt is for

  • Designers and founders

    Capture a design direction as a prompt.

  • Developers using v0, Bolt or Lovable

    Start from a precise design description.

  • Agencies

    Document a client's existing site quickly.

  • Image-model users

    Get a style description for Midjourney or FLUX.

Site to Prompt FAQ

What is a website to prompt tool?

A website to prompt tool looks at an existing web page and writes a prompt that describes its design, so an AI can build something in a similar style. Site to Prompt measures the page's real styles first, then writes the prompt for the AI tool you pick.

What does it measure?

Colors, fonts, text sizes, spacing, corner radii, shadows, layout structure, main sections and the detected tech stack (frameworks and theme mechanism). It does this by reading the computed style of each visible element, with no AI involved. AI only writes the final prompt.

Does it copy a website's code?

No. It describes the design in words and measurements. It does not copy the site's code, text or images, and the prompt asks the AI to use placeholder content of the same length and role instead of the original wording and brand.

Can I use it with Lovable, v0, Bolt or Claude Code?

Yes for the UI Builder target, which is written for v0, Bolt and Lovable. The Code Assistant target is written for Claude and ChatGPT and gives you a Markdown brief with CSS variables and guidance. You can paste that brief into other coding assistants such as Claude Code, but it is not tuned for them. Image generators get a single descriptive prompt for Midjourney or FLUX and SDXL.

Do I need the browser extension, and can it analyse pages behind a login?

Yes, you need the extension, because websites cannot read each other's styling and browsers block it. The extension runs in your own browser, so it can also measure pages you are logged in to. It only acts when you press Analyse.

What does the extension send to Cuelara?

Only style measurements: colors, font names and sizes, spacing, radii, shadows, the detected tech stack, and the page title and a few heading texts used to describe the layout. It reads the site's linked stylesheets to find design tokens, but only the extracted token names are sent, never the CSS. It does not read form fields or cookies.

Is it legal to recreate a site's design?

Taking inspiration from a design is common practice, but you should not copy another company's branding, text or images. Use the prompt as a starting point for your own design.

Is Site to Prompt free?

Yes. You can use it free within a daily limit on analyses and on generated prompts. The limits are higher when you sign in and higher again on the paid plans.

Related tools

Prompts to try it on

Browse the Prompt Cookbook
React Prompt Recipes

AI Prompt to Turn a Design Screenshot into a React Component

This is a React prompt for converting a design screenshot or mockup into working React component code — built for frontend developers who ge…

ROLE: You are a frontend developer converting a design image into a React component.

CONTEXT: I'm attaching a design screenshot/mockup. Tech stack: [REACT VERSION, STYLING APPROACH e.g. Tailwind/CSS Modules/styled-components, COMPONENT LIBRARY IF ANY]

TASK:
1. First, describe what you see in the image: overall layout, spacing, typography (font sizes/weights), colors, and any visible interactive states
2. Flag anything you're uncertain about (illegible text, ambiguous spacing, colors that are hard to read precisely) instead of guessing silently
3. Then write the React component matching this description, split into: component structure (JSX), styling, and any props needed to make it reusable

CONSTRAINTS:
- Match the layout and spacing as closely as possible to what's visible in the image
- Use [STYLING APPROACH] only, no inline styles unless the project convention requires it
- Make the component accept props for any content that would realistically vary (text, images, links)
- [ANY ADDITIONAL CONSTRAINT, e.g. must be accessible, must support dark mode]

OUTPUT FORMAT:
1. A short description of the design (layout, spacing, typography, colors, flagged uncertainties)
2. The complete component code in a fenced code block
3. A one-line note on anything that will need visual verification once rendered

Make this prompt yours

System

AI System Prompt for a Socratic Tutor That Guides Instead of Answers

This is a system prompt for turning ChatGPT, Claude, or Gemini into a Socratic tutor — an assistant that helps a student work toward an answ…

ROLE: You are a Socratic tutor for [SUBJECT/SKILL] at a [SKILL LEVEL, e.g. beginner/intermediate/advanced] level. Your goal is to help the student reach the answer through their own reasoning, not to give it to them directly.

CONTEXT: The student is working on the following problem: [PROBLEM OR TOPIC]

RULES OF ENGAGEMENT:
1. Do not state the final answer or complete solution unless the student explicitly asks you to (using a phrase like "just tell me" or "give me the answer")
2. Respond to the student's attempts with a guiding question, a small hint, or a request to explain their current reasoning
3. If the student is on the right track, confirm it briefly and ask them to continue
4. If the student is stuck after [NUMBER] guiding questions in a row, offer a slightly larger hint that narrows the problem without solving it
5. Periodically check understanding with a short question before moving forward
6. If the student explicitly asks for the full answer, provide it clearly along with a brief explanation of the reasoning

CONSTRAINTS:
- Keep each response short — one or two guiding questions or hints at a time, not a wall of text
- Match your language and hint difficulty to the stated skill level
- [ANY ADDITIONAL CONSTRAINT, e.g. stay within a specific curriculum or textbook's terminology]

OUTPUT FORMAT: A conversational reply consisting of a brief acknowledgment of the student's last attempt, followed by one guiding question or hint. Do not include the final answer unless explicitly requested.

Make this prompt yours

React Prompt Recipes

AI Prompt to Build an Accessible React Modal Component

This prompt generates an accessible React modal component , built for frontend developers who need a dialog that actually works with keyboar…

ROLE: You are a senior frontend engineer writing accessible React components.

TASK:
Build a reusable Modal component in React with [TYPESCRIPT / JAVASCRIPT].

FUNCTIONAL REQUIREMENTS:
- Opens and closes based on an `isOpen` prop and `onClose` callback
- Renders via [REACT PORTAL / INLINE] into [TARGET DOM NODE OR DESCRIPTION]
- Closes on Escape key press
- Closes on clicking the overlay background (but not when clicking inside the modal content)

ACCESSIBILITY REQUIREMENTS:
- Traps keyboard focus inside the modal while it is open
- Returns focus to the element that triggered the modal when it closes
- Uses `role="dialog"`, `aria-modal="true"`, and `aria-labelledby` pointing to the modal title
- Prevents background content from being read by screen readers while the modal is open

STYLING:
- [UNSTYLED WITH CLASS NAMES / USE TAILWIND / MATCH THIS DESIGN SYSTEM: DESCRIBE]

OUTPUT FORMAT:
Provide the complete component code in a single file, followed by a short usage example showing how to open the modal from a parent component.

Make this prompt yours

Further reading: RAG vs Fine-Tuning: A Developer Guide