Skip to content
artifact.guru

For designers

Prototype it, send the client a link, and present it live.

Build a clickable prototype with your agent and send the client one link. Walk them through it in the meeting, and every round of changes lands at the same address.

Who it’s for: Product and UX designers, freelance and in studios

artifact.guru/ines-kowal/overhang-appEmailFull screen
Overhang booking app. Every screen is clickable, right through to checkout.A sample. The company and its numbers are made up.
  1. Switch Home to Northgate to see a busier gym.
  2. Book a session, then cancel it in Bookings.
  3. Turn on Show hotspots to see everything that’s tappable.

Prototype with your agent

Describe the flow and the agent builds a working page, where the screens link up and what you choose on one carries to the next. The prototype above is Overhang, a booking app for a climbing gym, and the gear you rent changes the price at checkout.

Build only what the client should react to. Use real copy and prices, and include edge cases like a full session or an empty list. Leave the backend out.

You havePublish it as
A clickable prototype from Claude, ChatGPT, Codex or Gemini CLIOne .html file
A component from v0 or your codebaseA .jsx or .tsx file; it’s compiled when opened
An export from Lovable, Bolt or a build toolThe folder, or a .zip with index.html
Flows and screensAn .excalidraw sketch, PNG or SVG

Send the client one link

  1. Publish it

    “Publish this prototype to artifact.guru.” It starts Private, visible only to your workspace.

  2. Invite the client

    Share it by Email with the people who should see it. They sign in with that address and can open it in any browser, phones included.

  3. See who has looked

    Before the meeting, open Views to see who has opened it and who hasn’t. If they all used phones, start the review on mobile.

Present it in the meeting

Open the same link on the shared screen and click through the flow while the client follows on their own laptop. If they ask for something you can change on the spot, ask the agent, then have them reload. The same link already shows the new version.

When the client has to choose between options, build the presentation as a page too. The Saltmarsh deck below sets out two brand directions and has a slide for the decision. More in presenting designs live in a client meeting.

artifact.guru/ostra/saltmarsh-round-2EmailFull screen
Saltmarsh brand review. The deck Ostra Studio presented to the client.A sample. The company and its numbers are made up.

Round two, at the same link

After the meeting, give the agent the feedback in one message: “make the time slots bigger, put Intro classes first, and show the price before checkout”. It changes just those things, and everyone with the link gets the new version.

Every round stays in the Versions list with a note of what changed. If a change didn’t land, roll back; you can roll forward again later. Put the prototype, the spec and the flow sketch in one project so the next person finds all three.

Limits

  • Prototypes run in a sandbox in the browser. Anything that depends on your real backend, logins or secret keys needs a proper deploy.
  • There are no comment threads on the page. Collect feedback where you already talk to the client.
  • Pages can’t keep data between visits on their own, so design the prototype to start from a sensible state each time.

Prompt

Make your own

Have these ready, then paste the prompt into your agent:

  • The flow, screen by screen
  • Real copy and prices
  • Brand colors and type
  • The edge cases to show
Prompt
Build a clickable, high-fidelity prototype of this flow as one self-contained
HTML page. Show it in a phone frame on wide screens and full screen on phones.

Screens must link, and state must carry across them: what I choose on one
screen shows on the next. Include the edge cases I list. Use smooth, quick
transitions and respect reduced motion. No backend and no real payments.

Publish it privately to artifact.guru and give me the link.

Common questions

Does the client need an account?

With an Email invite, they sign in with the address you invited. For a quick look without an account, use a secret code instead, though Views then shows counts rather than names.

Can I show it without the artifact.guru bar?

Yes. Switch off Show controls in the Share panel and the link opens the prototype full screen.

Does the client see the change right away when I update it?

The next time they open or reload the link. Pages already open don’t refresh by themselves.

Read next

From Claude, ChatGPT and other agentsWho can open a shared Claude artifactClaude’s sharing options by plan, who needs a Claude account, and how to send an artifact to a client who doesn’t have one.7 min readClient work and documentsHow to share an HTML file as a working web pageWhy an attached HTML file doesn’t show the page, what the file needs, and how to publish it as a link people can open on any phone.6 min readClient work and documentsHow to update a page you’ve shared without sending a new linkWhat readers see when you change a page you’ve shared, and how to make a focused edit. It also covers who changed what, rolling back, and replacing PDFs and decks.6 min read

More use cases

ProposalClient proposalsPublish a proposal as a page made for one client. The price and timeline change as they pick a package, and they approve it in the same place. On an Email link, you see when they opened it.See how EstimateEstimatesTurn a spreadsheet estimate into a page where the client switches parts of the scope on and off, and the price range and timeline change with them. When they ask “what if we skip Android?”, the page already has the answer.See how Website draftWebsite draftsPublish the draft site with its real content and send one link. The client reads the copy where it will live and taps through it on their phone. Each revision shows up at the same address.See how

Try it with your own file

Copy the prompt above, add your file and publish.

Start freeConnect your agent