> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useshareable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design a page with Claude Design, share it with Shareable

> Make a polished page in Claude Design, export the HTML, and put it behind a real share link with access control and analytics.

[Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) (an
Anthropic Labs tool) lets you describe a page in plain language — a launch
announcement, a one-pager, a portfolio, a landing page — and it generates **real,
standalone HTML/CSS/JS** you can open in any browser. That self-contained HTML is
exactly what Shareable hosts, so the two fit together neatly: **design in Claude,
share with Shareable.**

## Why add Shareable?

Claude Design can share a page as an **internal org URL** or a public artifact link,
but those have no access control, no expiry, no password, and no view analytics.
Shareable wraps the same HTML in a real share link you control:

<CardGroup cols={2}>
  <Card title="Decide who sees it" icon="lock" href="/guides/sharing-and-access">
    Anyone with the link, specific people, a password, or business-email-only.
  </Card>

  <Card title="See who viewed it" icon="eye" href="/cookbook/who-viewed">
    View counts, devices, locations — and names, when you share by email.
  </Card>

  <Card title="Get told when it's opened" icon="bell" href="/guides/notifications">
    Optional email the moment someone views the page.
  </Card>

  <Card title="Update it anytime" icon="clock-rotate-left" href="/guides/version-history">
    Re-publish a new version on the same link; roll back if needed.
  </Card>
</CardGroup>

## Do it in 4 steps

<Steps>
  <Step title="Make the page in Claude Design">
    Open Claude Design (available in research preview on Claude Pro, Max, Team, and
    Enterprise) and describe what you want — *"a launch page for our new feature with
    a hero, three benefits, and a sign-up button."* You can also **sketch a layout**
    or upload a photo of a whiteboard and let it build from that. Iterate
    conversationally until it looks right.
  </Step>

  <Step title="Export standalone HTML">
    When you're happy with it, **export → HTML** to get a single self-contained
    `.html` file. (Claude Design also exports to Canva, PDF, and PPTX, and can share
    an internal org URL — but for a public, controllable link, you want the **HTML
    file**.)

    <Tip>
      Want a working form, booking widget, or buy button on it? Ask Claude Design to
      add the embed while you're there, or follow
      [Add an integration in 3 steps](/cookbook/overview) after you publish — the
      embed travels with the HTML.
    </Tip>
  </Step>

  <Step title="Bring the HTML into Shareable">
    Two ways, depending on how you work:

    * **By hand:** open Shareable, **paste the HTML** (or drop the exported `.html`
      file), and publish.
    * **From an agent:** if you publish from Claude Code or another agent, hand it the
      exported HTML and ask it to publish through the
      [Shareable MCP server](/mcp-server) — Claude creates the page and returns the
      link.
  </Step>

  <Step title="Set access and send the link">
    Pick who can see it in the **Share** dialog — link, specific people, password, or
    anyone with a verified email — optionally flip on **Email me when viewed**, and
    share the link. You can re-export an updated design from Claude later and
    re-publish it on the same link.
  </Step>
</Steps>

## The short version

| Step | Where         | What                                                                                                    |
| ---- | ------------- | ------------------------------------------------------------------------------------------------------- |
| 1    | Claude Design | Describe (or sketch) the page; iterate                                                                  |
| 2    | Claude Design | **Export → HTML** (standalone file)                                                                     |
| 3    | Shareable     | Paste/drop the HTML, or publish via the [MCP](/mcp-server)                                              |
| 4    | Shareable     | Set [access](/guides/sharing-and-access), turn on [notifications](/guides/notifications), send the link |

<Note>
  Claude Design exports real HTML — no special handling needed. If a design ever
  relies on a live API call at runtime, that part won't run on a static host; keep the
  page self-contained (which is what Claude Design's HTML export produces).
</Note>