How Do I Build and Ship a Claude Artifact as a Client Deliverable?

Claude Artifacts went from "cool demo of a calculator in a chat" to "you can actually ship a working internal tool to a client in 30 minutes." If you're a consultant who keeps hearing "we wish we had a little form/dashboard for this," Artifacts is your "say yes and deliver it tomorrow" button. Here's the end-to-end flow — idea to hand-off — so your next proposal includes "plus a working tool" at no extra cost.

Why this matters

Most consultant deliverables are documents. A strategy PDF, a recommendations slide, a spreadsheet with scenarios. The client nods, files it, and the momentum dies.

An Artifact is a working thing. A proposal-scoring calculator in the client's brand. An internal "did we quote this right" ROI tool. A quick reference lookup for their sales team. When you hand over a working tool instead of a document, the perception of value goes up and the delivery cycle goes down — Artifacts generate in minutes, not weeks.

The catch is that Artifacts live in Claude. They're great for client-hosted internal use or embedded in your own delivery docs, but they're not a replacement for a real web app. Pick your battles.

Before you start

You need:

• Claude.ai account — any tier; Artifacts are available on Free and up, with usage limits on Free.
• A concrete tool idea. "An ROI calculator for our new service tier" is a great shape. "A CRM" is not.
• 15-30 minutes if you're new; 5-10 minutes once you've done a couple.

Step 1: Describe the tool specifically

The quality of your Artifact is almost entirely the quality of your prompt. Vague gets you a toy; specific gets you something shippable.

Bad prompt:

"Build an ROI calculator for our consulting service."

Good prompt:

"Build a single-page React app that's an ROI calculator for our Advisory service. Inputs: current monthly marketing spend ($), current monthly qualified leads (#), target qualified leads (#). Output: recommended advisory tier (Starter $3k, Growth $6k, Scale $12k) based on input ranges defined below, a projected lead-count after 90 days using a 40% lift assumption, and a one-sentence justification. Style: clean, serif headline font, primary color #1E40AF, neutral background. Show all three results in a summary card. No external API calls; all logic in-component."

Specific inputs, specific outputs, specific rules, specific style. Claude produces a working app from that in one go.

Step 2: Generate the Artifact

Paste the prompt. Claude writes the Artifact inline. The preview appears in a right-side panel. Check:

• It runs. If Claude's code threw an error, the panel shows it. Paste the error back: "this errors with [message], fix it."
• Inputs accept real data. Try entering real client numbers. Note any validation gaps.
• Outputs are correct. Try edge cases — zero inputs, huge inputs.

Iterate until the core works. Each iteration is cheap — say "change X to Y" and Claude revises the whole Artifact.

Step 3: Polish for hand-off

Once the logic is right, polish:

• Copy review. Is every label clear? Is the instructional copy welcoming?
• Branding. Does it match the client's colors, fonts, and voice? Ask Claude to adjust.
• Error handling. If a user types text where a number goes, does it break or show a helpful message?
• Print/export. For tools that produce a result, can users easily copy or save it? Often a "Copy results" button is the single highest-ROI addition.

I generally do three polish rounds. After that, it's a tool not a prototype.

Step 4: Decide on hosting

This is the decision that turns an Artifact into a deliverable. Options:

• Share the Claude chat link. Fastest. Client opens your chat, sees the Artifact, uses it. Downside: the client needs to be comfortable clicking a Claude link, and chat updates can drift the Artifact.
• Export the code and host it yourself. Claude can dump the Artifact's source (React or HTML). Drop it on Vercel, Netlify, or Cloudflare Pages. Takes 10 minutes, gives you a stable URL at your domain.
• Embed in client's existing site. If client has a Webflow/WordPress/Framer site, the Artifact's HTML + JS usually drops in cleanly. Best handoff for non-technical clients.

For most consulting clients, hosting yourself is the professional move. You can deliver a URL in your own branded namespace, and you control updates.

Step 5: Hand it off with context

Deliver the Artifact with a one-page loom or memo:

• What it is. "An ROI calculator for our Advisory service."
• Who uses it. "Sales uses it on discovery calls to show prospects tier fit."
• How to update. "If tier pricing changes, email me and I'll update the calculator within 24 hours."

That last line is important. You're positioning yourself as the ongoing owner. Artifacts are low-maintenance deliverables — two updates a quarter, five minutes each — and that ownership is a recurring touchpoint with the client.

Step 6: Template it for reuse

After you've shipped three or four Artifacts, you'll notice patterns: input forms, scoring cards, comparison tables, etc. Save your prompts as reusable templates.

I keep a claude-artifact-templates.md file with 8-10 prompt shells I adapt for new clients. Each is 200-400 words and produces a working Artifact on the first generation because the shape is already proven.

This is where the economics shift: a single Artifact takes 30 minutes. A new Artifact from a template takes 10. At that speed, you can add an Artifact to every proposal as a signature deliverable.

Verify it worked

1. The Artifact runs end-to-end without errors. Open the client-facing URL, enter sample inputs, confirm outputs. No console errors.

2. It matches the brand. Put it side by side with the client's website. Colors, fonts, tone should feel of-a-piece. If it looks like a generic tool, iterate.

3. Your client can use it without you. Send it to a non-technical person. Ask them to try it and describe what it does. If they're confused, the copy or UX needs work.

Where this breaks

• Ambitious scope. "Build us a CRM" fails. Artifacts shine at focused, single-screen tools. If the brief needs auth, multiple screens, or persistent server state, it's a real app, not an Artifact. Don't force it.
• Dynamic data sources. Artifacts can't call your API without CORS and auth issues. For tools that need live data, either pre-compute the data into a JSON blob inside the Artifact or accept that this use case needs a real backend.
• Mobile-only clients. Artifacts render on mobile but weren't designed for it first. If the client's primary use case is a salesperson on their phone at a customer site, test on mobile heavily or build a responsive version explicitly.
• Copying sensitive data into Artifacts. Anything you type into Claude to generate the Artifact flows through Claude's infrastructure. Don't paste real client databases or PII. Use synthetic sample data for generation.
• Version drift. Clients lose the Claude chat link. You update the logic and forget to notify them. Host Artifacts at stable URLs under your control and version them (v1, v2 in the URL) so you always know what the client is actually using.

What to try next

• How Do I Build My First Claude Project That Actually Knows My Business? — put Artifacts under a Project with your brand voice loaded and generation gets faster and more on-brand.
• How Do I Use Claude's New Memory Feature Without Leaking Client Data? — critical when you're generating Artifacts for multiple clients in the same account.
• How Do I Package a Team SOP as a Claude Skill Anyone Can Run? — next rung up: if Artifacts are tools for clients, Skills are tools for your team. Both replace docs with runnable things.