Paste it into your AI tool.

Chat on claude.ai, or Claude Code on your computer.

1. Open a conversation on claude.ai and paste your prompt into the message box.
2. Ask for a single-page website. The page opens in its own window beside the chat.
3. Check the preview. To change something, type the change in the chat. If an error shows, click "Try fixing with Claude".
4. Find it again later in the Artifacts tab in the Claude sidebar.
5. A new artifact is private to you. Sharing is described in Claude's help article linked below.

• Artifacts are available on Free, Pro, Max, Team and Enterprise plans, and need "Create and edit files" turned on under Settings > Capabilities.
• Getting a website's files out of a new chat artifact is not described on the page we read. For a project with real files, use Claude Code (below).
• Claude Code: install it with the command on its quickstart page, open a terminal in an empty folder, run claude and log in, then paste the prompt. Publishing an artifact from Claude Code needs a Pro, Max, Team or Enterprise plan.

official source: What are artifacts and how do I use them · Claude Code quickstart · Claude Code artifacts

A code editor with an AI agent. Best when you want the real files on your computer.

1. Download Cursor from cursor.com/download, install it, open it and sign in with a Cursor account.
2. Click File > Open Folder and choose an empty folder for your site.
3. Open the Agent panel: press Cmd + I on a Mac, or Ctrl + I on Windows and Linux.
4. Paste your prompt into the Agent input and send it. Use @ to point it at a file or folder in later messages.
5. Agent applies its edits as it works. Review them in the diff view and reject anything you do not want.
6. To run the result, ask Cursor to run it or to build it. You can go back to an earlier state with Restore Checkpoint in the chat timeline.

• A Cursor account is required. The pages we read do not state what the free plan includes.

official source: Install Cursor · Your first project · Agent overview

Describe a site, get a live preview and a lovable.app address.

1. Go to lovable.dev and sign up with email, Google, GitHub or Apple. You can type the prompt on the homepage first; Lovable asks you to sign up and keeps it.
2. In the prompt box, with Build selected in the mode picker, paste your prompt and submit.
3. Wait a few minutes for the first version. You land in the editor: chat on the left, preview on the right.
4. Test the preview, and use the device toggle above it to check Mobile.
5. Ask for one change at a time in the project chat and check the preview after each.
6. To publish, click Publish in the top right, edit the suggested lovable.app address if you like, then click Publish again. Later changes go live with Publish > Publish changes.

• The free plan includes five credits per day, up to 30 per month. Publishing to a lovable.app address is free on every plan.
• Code can be synced to GitHub, GitLab or Bitbucket with Git sync. A plain file download is not described on the pages we read.

official source: Getting started · Lovable docs

Vercel's builder. Publishes to a vercel.app address.

1. Go to v0.app and sign in.
2. Start a new chat or create a project.
3. Paste your prompt into the prompt bar and send it.
4. Review the app in the preview. The toolbar has Code (read the code) and Design (visual edits).
5. Ask for changes in the chat. You can queue up to 10 prompts while v0 is still generating.
6. To publish, select Publish in the chat header, confirm the Vercel project name if asked, choose visibility and a domain, then select Publish. Later changes go live with Publish Changes.

• The Free plan lists a daily limit of 7 messages, plus a one-time $5 credit for new sign-ups.
• To get the code out, the project menu has Settings > GitHub > Create a GitHub repository. A plain file download is not described on the pages we read.

official source: v0 quickstart · Deployments · Pricing

Paste, build, publish from the browser.

1. Open bolt.new and paste your prompt into the chatbox.
2. Click Build now, then sign in or sign up with Google, GitHub or email.
3. Complete the short survey and wait for the first build. Apps without a database usually build faster.
4. Try the app in the Preview window.
5. Type follow-up prompts in the chatbox and press Enter. To target one element, click the Select icon, click the element, then type the change.
6. To undo, click the project title, then Version history, pick an earlier version and click Restore version.
7. To publish, click Publish in the top right, click the second Publish button, wait about a minute, then click the link in the chat.

• Free accounts offer 1 million tokens a month with a 300K daily limit; no credit card is required to sign up.
• Bolt's documentation site did not load for us, so this guide uses its help center. Exporting project files is not described on the pages we read.

official source: Bolt quickstart

A site builder. Our "Framer / Webflow" prompt tab is written for it.

1. Open your Framer project and go to Project Settings > Custom Code.
2. Click Add Script (or the + icon if code already exists) and give it a clear name.
3. Paste your code, choose where it runs and on which pages, then choose "Once" or "Run on every page visit".
4. For a reusable block, open the assets panel, select Code and click Create Code File. It must export one React component, written for React 18.
5. Click the split-preview button at the top right to see the component refresh as you save.
6. Click Publish at the top right. Your site gets a framer.app address; a custom domain is set up from Framer's domain guide.

• Framer's pages we read do not state a script size limit, which plan custom code needs, or whether raw HTML files can be imported. Check those on Framer's help pages before you build.
• Staging needs the Pro plan or higher.

official source: How to add custom code · Publishing your Framer website · Code components

A site builder. Our "Framer / Webflow" prompt tab is written for it.

1. Open your site in the Webflow Designer.
2. For code on one page, open that page's settings and scroll to the Custom Code section. You can place scripts in the head or just before the closing body tag.
3. Paste your code and save.
4. Changes only go live after you publish the site.

• Webflow's help center would not load for us, so this guide only covers what its developer documentation states. We could not confirm the Code Embed element steps, a site-wide custom code path in the Designer, or which plan custom code needs. Check those on Webflow's help pages.
• Webflow's developer documentation states a 10,000-character limit per inline script registered through its API; that limit is not stated for the Designer.

official source: Working with custom code (Webflow developers) · Webflow University: custom code course