Claude Design: Build an AI Quote-Calculator Prototype Before Coding Your Website

A freelance website often needs more than an attractive homepage. Visitors may need to choose a service, compare packages or understand how an estimate changes when they add another page.

Claude Design can help you explore that interaction before committing to a finished website. Anthropic documents interactive prototypes and revision through conversation, canvas editing and comments. The exercise below is based on that documentation, not a hands-on product test. Claude Design guide.

Give the AI rules before asking for a design

Use a fictional pricing model that you can check yourself:

• Base website package: ₹12,000.
• Each additional page: ₹1,500.
• Optional copywriting add-on: ₹3,000.
• Additional-page count: whole numbers from 0 to 10, inclusive.
• Result: an estimate, not a binding quotation.

These are demonstration figures, not suggested market rates. Replace them with approved business pricing before commercial use. Do not ask the model to invent discounts, tax treatment or delivery promises.

The calculation is 12000 + (1500 × additional pages) + optional 3000. AI helps create the prototype; this exercise does not require a model call each time a visitor changes a number.

Ask for a small, self-contained prototype

Anthropic's documentation describes requesting a design in a conversation or choosing a Design template from the Artifacts tab. Artifacts open beside the conversation. Check account capabilities and organizational settings before relying on a feature or sharing option. Artifacts documentation.

Try this suggested prompt; it is not a tested product demonstration:

Create an interactive website quote-calculator prototype for a fictional
freelance studio. Use a ₹12,000 base package, ₹1,500 per additional page
and an optional ₹3,000 copywriting add-on. Allow whole numbers from zero
to ten additional pages. Reject blank, negative, decimal and above-ten
page counts with a clear message; do not silently round them.
Show an itemised estimate that updates when valid selections change.
Label all prices as demonstration values and the result as non-binding.
Include Reset, restoring zero additional pages, copywriting off and ₹12,000.
Do not collect personal information, send requests, process payments,
call an AI model at runtime or connect external services.
Keep the layout readable on a narrow screen.

The prompt requests constraints; it does not prove the generated code obeys them. Review the result before running or sharing it, especially if it adds a library, network request or input you did not ask for.

Check the arithmetic before the appearance

Prepare expected totals independently:

These are expected results calculated from the fictional formula, not observed Claude outputs. Try each case in the generated prototype. Try blank input, a negative number, a decimal and a number above ten. Check that the message is understandable and the calculator does not present an invalid selection as an accepted estimate.

After Reset, check the inputs and total: zero additional pages, copywriting off, ₹12,000. If a case fails, record the input, expected result and actual result when asking for a correction. A polished layout can still contain faulty logic.

Revise one behaviour at a time

Ask for a specific change: “Keep the pricing rules unchanged, but explain the extra-page charge beneath the selector.” Then repeat the arithmetic and invalid-input checks. A visual revision should not change the calculation without your agreement.

Anthropic supports conversation-based refinement, canvas editing and targeted comments. Its guide also notes that comments can sometimes fail to reach Claude; paste the feedback into the conversation if needed. Refinement guidance.

Choose the review method before sharing

Artifacts start private. Anthropic's current sharing guide says recipients need a Claude account for shared artifacts; the exception is a legacy artifact published from a chat. It also distinguishes plan-dependent link sharing, email invitations and organizational restrictions. Do not assume that a newly created Design artifact offers the legacy public-publishing path. Artifact-sharing guidance.

Use the actual Share settings to check the intended recipient and access level. Do not enable external sharing or connect client data just to get a review link working.

Settle the interaction before production: which choices matter, how estimates are explained and where readers get confused. Hosting, keyboard access, validation, security and any real enquiry or payment flow still need separate decisions. For a broader readiness checklist, see building a website without coding.

Questions before building the real calculator

Primary documentation checked on 2 November 2026. Proposed exercise only; no hands-on test, successful generated prototype, client result or production deployment is claimed.