# Turn Claude Design into a lead-capture page

> Move from a Claude Design concept to a static landing page. Review export options, adapt the HTML and assets, and connect a working enquiry form.

- Canonical: https://pageree.com/guides/claude-design-landing-page/
- Published: 2026-09-15. Updated: 2026-09-15.
- Collection: Guides (https://pageree.com/guides.md)
- Site index for agents: https://pageree.com/llms.txt

**The short answer.** Claude Design can export standalone HTML or hand work to Claude Code. Inspect that output before hosting it: a prototype's controls may not process real submissions. Adapt compatible static output for Pageree, review the page, then verify the published form.

## Start with the right output from Claude Design

Claude Design can help create and iterate on visual work, including web prototypes. Its export options include standalone HTML and other formats, as described in [Anthropic's getting-started guide](https://support.claude.com/en/articles/14604416-get-started-with-claude-design).

For a Pageree landing page, the relevant output is a web document that can be adapted to one HTML file with inline CSS and JavaScript. A presentation export, image, or design preview is not itself a working hosted page with lead delivery.

## Give the design a business brief

Define the audience, offer, primary action, and available evidence before choosing a visual direction. Give Claude Design authorized brand assets and a description of the tone you want. Ask it to leave out unsupported testimonials, metrics, customer logos, and availability claims.

Use a focused first version: opening promise, benefits, product or service explanation, evidence, FAQ, and the primary action. Check the copy separately from the layout so a polished design does not hide a vague offer.

## Inspect the exported page

| Check | Why it matters |
| --- | --- |
| File format | Pageree needs a supported HTML document |
| Assets | Local file paths will not work for public visitors |
| Dependencies | A framework build may need adaptation |
| Form behavior | A visual success message does not deliver a lead |
| Mobile layout | The export must work at narrow widths |
| Interaction | Buttons, menus, and links need real destinations |

Keep a copy of the original export. If the page depends on a larger application, ask the assistant to explain what must change before reducing it to a single landing page.

## Use this handoff prompt

```text
Adapt this Claude Design HTML export for a Pageree landing page.
Preserve the approved visual direction and factual copy.
Inspect dependencies and explain any changes needed for a single HTML
document with inline CSS and JavaScript. Use hosted assets rather than
local file paths. Do not silently remove meaningful interactions.

Replace the demo form with the supported Pageree form contract.
Use the connected tools to inspect the required fields and delivery setup.
Add an accurate title, description, canonical URL for the final address,
and a share image using an accessible absolute URL.
Save a private draft. Show me the preview and any unresolved limitations.
Wait for my approval before publishing.
```

## Review the adaptation, not just the original design

Open the Pageree draft and check the actual output. Compare the hierarchy, typography, spacing, and images with the approved design. Then test keyboard navigation, form labels, error states, and the page at a phone-sized width.

If an interaction was only decorative in the prototype, decide whether to implement it, replace it with a real link, or remove it. A button that looks finished but does nothing is a launch issue.

## Publish and verify the live journey

After approval, publish the page and test the public URL. Submit a lead and confirm the destination receives the expected fields. A preview does not establish that a production CRM or email flow works.

Connect a [custom domain](https://pageree.com/guides/ai-landing-page-custom-domain/) after the page is published and verify HTTPS. Review analytics later with the [analytics guide](https://pageree.com/guides/ai-landing-page-analytics/), using enough relevant traffic to interpret patterns.

If you already have a Claude artifact rather than a Claude Design export, use the separate [artifact publishing guide](https://pageree.com/guides/publish-claude-artifact/). The practical distinction is the output and its dependencies, not simply which Claude screen you started in.

## Related
- [Publish a Claude artifact on your own domain](https://pageree.com/guides/publish-claude-artifact.md): Take a static Claude artifact from a shareable preview to a business landing page. Adapt the HTML, connect a domain, and add a working enquiry form.
- [Make an AI landing page match your brand](https://pageree.com/guides/ai-landing-page-brand.md): Supply approved logos, font choices, color values, and writing examples. Use an original brand-sheet example and inspect consistency and readability.
- [Use a screenshot to guide an original landing page](https://pageree.com/guides/landing-page-from-screenshot.md): Turn an authorized screenshot into useful layout direction for your own page. Keep original copy and assets, decide mobile behavior, and verify the form.

## Build it with your agent

Pageree is an MCP server. Add https://mcp.pageree.com/ to an MCP client that supports Streamable HTTP and OAuth, sign in, and the agent can build, publish and measure the page. Setup for every supported client: https://pageree.com/docs.md. Sign up: https://console.pageree.com/signup.