Claude Prompt Library

30 Claude Prompts That Build Checkout Pages

30 copy-paste prompts

Fill the brackets. Claude returns one HTML checkout as an Artifact: cart, address, payment fields, review. Dummy pay only. Not a live Stripe integration and not a full store.

In short: This page contains 30 copy-paste ready prompts, organized into 6 categories with a description and pro tip for each. The first 5 prompts are free instantly, no signup needed. Hand-curated and tested by the AI Academy team.

By Louis Corneloup · Founder, Techpresso

Last updated September 8, 2026·Hand-curated & tested by the AI Academy team

Cart

5 prompts

Cart Then Pay

1/30

✨ What it does

Claude builds a cart-to-pay checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a checkout designer <context> I need one self-contained HTML cart-to-pay checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Line items I sell: [ITEMS] - Shipping I offer: [SHIPPING OR VERIFY] </inputs> <task> Build a responsive cart-to-pay checkout with these sections: 1. Line items from [ITEMS] 2. Totals with [VERIFY] on tax 3. Shipping choices I named 4. Continue to pay 5. Empty-cart state Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a SKU.

Mini Cart Drawer

2/30

✨ What it does

Claude builds a mini-cart plus checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a cart-drawer designer <context> I need one self-contained HTML mini-cart plus checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] - CTA: [CTA] </inputs> <task> Build a responsive mini-cart plus checkout with these sections: 1. Product page stub 2. Working drawer in JS 3. Qty plus minus 4. Checkout button Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: The drawer must open and close.

Subscription Cart

3/30

✨ What it does

Claude builds a subscription checkout for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a subs checkout designer <context> I need one self-contained HTML subscription checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Plan: [PLAN] - Renew: [RENEW OR VERIFY] </inputs> <task> Build a responsive subscription checkout with these sections: 1. Plan summary 2. Renew line or [VERIFY] 3. Cancel note only if I wrote one 4. Pay CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a 7-day trial.

Digital Goods Cart

4/30

✨ What it does

Claude builds a digital checkout for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a digital-goods designer <context> I need one self-contained HTML digital checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Files: [FILES] - Delivery: [DELIVERY] </inputs> <task> Build a responsive digital checkout with these sections: 1. What they get 2. No shipping block 3. Email field 4. Pay 5. Delivery note Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Skip the address if nothing ships.

Gift Cart

5/30

✨ What it does

Claude builds a gift checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a gift-flow designer <context> I need one self-contained HTML gift checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Item: [ITEM] - Gift note: [NOTE OR NONE] </inputs> <task> Build a responsive gift checkout with these sections: 1. Item 2. Optional note field 3. Recipient email if I said so 4. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent wrapping prices.

Address & Tax

5 prompts

Address Form Page

6/30

✨ What it does

Claude builds a address checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a form designer <context> I need one self-contained HTML address checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Countries I ship: [COUNTRIES] - Required fields: [FIELDS] </inputs> <task> Build a responsive address checkout with these sections: 1. Address fields from [FIELDS] 2. Country select from [COUNTRIES] only 3. Validate empty in JS 4. Continue Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not add a country you do not ship.

Guest Or Account

7/30

✨ What it does

Claude builds a guest-or-account checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an auth-checkout designer <context> I need one self-contained HTML guest-or-account checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Guest: [GUEST OK] - Account perks I have: [PERKS OR NONE] </inputs> <task> Build a responsive guest-or-account checkout with these sections: 1. Two paths 2. Guest if I said yes 3. Perks only if named 4. Continue Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not force an account if guest is allowed.

Tax Note Page

8/30

✨ What it does

Claude builds a tax-note checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a careful tax-note designer <context> I need one self-contained HTML tax-note checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Tax I can state: [TAX OR VERIFY] </inputs> <task> Build a responsive tax-note checkout with these sections: 1. Cart 2. Tax line or [VERIFY] 3. Pay 4. No fake VAT ID unless I asked Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: If you do not know tax, say we calculate it later.

Ship Speed Page

9/30

✨ What it does

Claude builds a shipping-speed checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a shipping-options designer <context> I need one self-contained HTML shipping-speed checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Speeds: [SPEEDS] - Prices: [PRICES OR VERIFY] </inputs> <task> Build a responsive shipping-speed checkout with these sections: 1. Speed radios from [SPEEDS] 2. Prices or [VERIFY] 3. Dates only if I gave them 4. Continue Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent tomorrow delivery.

Pickup Page

10/30

✨ What it does

Claude builds a pickup checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a pickup designer <context> I need one self-contained HTML pickup checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Places: [PLACES] - Hours: [HOURS OR VERIFY] </inputs> <task> Build a responsive pickup checkout with these sections: 1. Pickup places from [PLACES] 2. Hours or [VERIFY] 3. No carrier block 4. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Only list places you named.

Pay

5 prompts

Dummy Card Form

11/30

✨ What it does

Claude builds a dummy-card checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a payment-form designer <context> I need one self-contained HTML dummy-card checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Fields: [CARD FIELDS] - Note: [NOT LIVE] </inputs> <task> Build a responsive dummy-card checkout with these sections: 1. Card fields that do not submit to a processor 2. Banner: dummy only 3. Review 4. Place order stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Write dummy only on the page. No live charge.

Invoice Checkout

12/30

✨ What it does

Claude builds a invoice checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a B2B checkout designer <context> I need one self-contained HTML invoice checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Who can invoice: [WHO] - Fields: [PO FIELDS] </inputs> <task> Build a responsive invoice checkout with these sections: 1. PO fields 2. Who qualifies 3. Place order stub 4. No card block Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent Net-30.

Wallet Buttons Stub

13/30

✨ What it does

Claude builds a wallet-stub checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a wallets designer <context> I need one self-contained HTML wallet-stub checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Wallets I might add: [WALLETS] </inputs> <task> Build a responsive wallet-stub checkout with these sections: 1. Labeled stubs for [WALLETS] 2. Note not wired 3. Card dummy 4. Review Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Buttons must say not wired.

Order Review Page

14/30

✨ What it does

Claude builds a order-review checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a review-step designer <context> I need one self-contained HTML order-review checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] - Address sample: [ADDRESS] </inputs> <task> Build a responsive order-review checkout with these sections: 1. Items 2. Address 3. Pay method stub 4. Edit links that scroll 5. Place order stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Make edit jump to the right block.

Failed Pay State

15/30

✨ What it does

Claude builds a failed-pay checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an error-state designer <context> I need one self-contained HTML failed-pay checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Error I show: [ERROR COPY] </inputs> <task> Build a responsive failed-pay checkout with these sections: 1. Cart still there 2. Error from [ERROR COPY] 3. Retry 4. No lost cart Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Keep the cart. Do not reset the form.

These prompts give you the what. Tutorials give you the why.

Learn when to use extended thinking, how to build Claude Projects, and workflows that compound. 300+ tutorials and growing.

Try AI Academy Free

Trust

5 prompts

Trust Strip Checkout

16/30

✨ What it does

Claude builds a trusted checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a trust-strip designer <context> I need one self-contained HTML trusted checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Trust I can claim: [TRUST] - Off-limits: [OFF] </inputs> <task> Build a responsive trusted checkout with these sections: 1. Checkout 2. Trust strip only from [TRUST] 3. No fake Norton badge 4. Pay stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No invented badge.

Returns Note

17/30

✨ What it does

Claude builds a returns-on-checkout page for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a returns editor <context> I need one self-contained HTML returns-on-checkout page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Return rule: [RULE OR VERIFY] </inputs> <task> Build a responsive returns-on-checkout page with these sections: 1. Checkout 2. Return rule or [VERIFY] 3. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent 30 days.

Secure Note Honest

18/30

✨ What it does

Claude builds a honest-secure checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a security-copy editor <context> I need one self-contained HTML honest-secure checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - What is true: [TRUE] </inputs> <task> Build a responsive honest-secure checkout with these sections: 1. Checkout 2. Security sentence from [TRUE] only 3. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: If you are on dummy pay, do not say bank-grade.

Support On Checkout

19/30

✨ What it does

Claude builds a support checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a support-minded designer <context> I need one self-contained HTML support checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - How to get help: [HELP] </inputs> <task> Build a responsive support checkout with these sections: 1. Checkout 2. Help from [HELP] 3. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: A dead chat widget is worse than an email.

Summary Sticky

20/30

✨ What it does

Claude builds a sticky-summary checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a sticky-summary designer <context> I need one self-contained HTML sticky-summary checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] </inputs> <task> Build a responsive sticky-summary checkout with these sections: 1. Form 2. Sticky order summary 3. Totals [VERIFY] 4. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Summary must stay readable on mobile.

Variants

5 prompts

One-Page Checkout

21/30

✨ What it does

Claude builds a one-page checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a one-page designer <context> I need one self-contained HTML one-page checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] - Fields: [FIELDS] </inputs> <task> Build a responsive one-page checkout with these sections: 1. All steps on one page 2. Jump links 3. Dummy pay 4. Review Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No wizard if I asked for one page.

Three-Step Wizard

22/30

✨ What it does

Claude builds a three-step checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a wizard designer <context> I need one self-contained HTML three-step checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] </inputs> <task> Build a responsive three-step checkout with these sections: 1. Stepper: cart, details, pay 2. Working next/back in JS 3. Dummy pay 4. State kept in JS Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Back must not wipe the form.

Mobile Checkout

23/30

✨ What it does

Claude builds a mobile checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a mobile checkout designer <context> I need one self-contained HTML mobile checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] </inputs> <task> Build a responsive mobile checkout with these sections: 1. Large fields 2. Sticky pay 3. Dummy pay 4. Thumb reach Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Desktop can be simple. Phone must work.

B2B Checkout

24/30

✨ What it does

Claude builds a B2B checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a B2B form designer <context> I need one self-contained HTML B2B checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Company fields: [FIELDS] - Items: [ITEMS] </inputs> <task> Build a responsive B2B checkout with these sections: 1. Company fields 2. VAT [VERIFY] 3. Invoice or dummy card 4. Review Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not require a consumer phone.

Rebuild Checkout

25/30

✨ What it does

Claude builds a rebuilt checkout for [CURRENT PASTE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a ruthless checkout editor <context> I need one self-contained HTML rebuilt checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [CURRENT PASTE] - Keep: [KEEP] - Cut: [CUT] </inputs> <task> Build a responsive rebuilt checkout with these sections: 1. Diagnose 2. Rebuild 3. Keep [KEEP] 4. Cut [CUT] 5. Dummy pay only Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Paste the current checkout.

Most people use 10% of Claude. Tutorials unlock the rest.

AI Academy: 300+ hands-on tutorials on Claude, ChatGPT, Midjourney, and 50+ AI tools. New tutorials added every week.

Start Your Free Trial

Fixes

5 prompts

Empty Cart Honest

26/30

✨ What it does

Claude builds a empty-cart page for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an empty-state designer <context> I need one self-contained HTML empty-cart page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Continue URL label: [CONTINUE] </inputs> <task> Build a responsive empty-cart page with these sections: 1. Empty state 2. Continue shopping 3. No fake recommended SKUs unless I listed them Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent products.

Qty Limits

27/30

✨ What it does

Claude builds a qty-limit checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a limits designer <context> I need one self-contained HTML qty-limit checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Max: [MAX OR VERIFY] - Items: [ITEMS] </inputs> <task> Build a responsive qty-limit checkout with these sections: 1. Cart 2. Max qty or [VERIFY] 3. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a max of 10.

Coupon Field Honest

28/30

✨ What it does

Claude builds a coupon checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a coupon-field designer <context> I need one self-contained HTML coupon checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Codes I have: [CODES OR NONE] </inputs> <task> Build a responsive coupon checkout with these sections: 1. Cart 2. Coupon box 3. Accept only [CODES] in JS or say not wired 4. Pay Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: If you have no codes, say the box is a stub.

Order Confirm Stub

29/30

✨ What it does

Claude builds a order-confirm page for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a confirm-page designer <context> I need one self-contained HTML order-confirm page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Next step: [NEXT] </inputs> <task> Build a responsive order-confirm page with these sections: 1. Thank you 2. Order number placeholder 3. [NEXT] 4. No fake tracking Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a carrier.

A11y Checkout

30/30

✨ What it does

Claude builds a accessible checkout for [STORE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an accessibility-minded designer <context> I need one self-contained HTML accessible checkout I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [STORE] - Items: [ITEMS] </inputs> <task> Build a responsive accessible checkout with these sections: 1. Labeled fields 2. Errors next to inputs 3. Keyboard dummy pay 4. Contrast Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Every field needs a visible label.

Free tool

Prompt Optimizer

Turn a rough idea into a structured, professional AI prompt.

Try it free →

Frequently Asked Questions

No. Every prompt tells Claude to mark missing facts as [VERIFY] instead of inventing customers, prices, or dates on the checkout page. You still review the Artifact before you publish.

Use Claude with Artifacts (claude.ai or the desktop app). Paste a prompt, fill the brackets, and open the HTML Artifact in the chat. Download the file when it looks right.

Yes, it is one self-contained file with inline CSS. Swap photo placeholders and [VERIFY] lines, then host it. It is a working first page, not a production design system.

The prompts are free to copy. Generating Artifacts needs a Claude plan that can create them. The free tier has limits. Paid plans run more generously.

The hub covers a whole site. This page is only the checkout page: thirty prompts, one job, so the Artifact stays on that page instead of turning into a generic homepage.

Prompts are the starting line. Tutorials are the finish.

A growing library of 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ AI tools. New tutorials added every week.

Start 7-Day Free Trial Explore AI for Entrepreneurs

7-day free trial. Cancel anytime.

Browse All Claude Prompt Collections Browse All Prompt Collections

Popular prompt collections

AI Photo Editing Prompts ChatGPT Jailbreak Prompt Best ChatGPT Prompts Funny Hinge Prompts ChatGPT Caricature Prompts