30 Claude Prompts That Build Pricing Pages
Fill the brackets. Claude returns one HTML pricing page as an Artifact: tiers, a compare table, FAQ, and an annual toggle. Put your real prices in. Not a full billing app and not a homepage.
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.
Tiers
5 promptsThree-Tier Grid
1/30✨ What it does
Claude builds a three-tier pricing page 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 SaaS pricing designer <context> I need one self-contained HTML three-tier pricing 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: [PRODUCT] - Tiers: [TIER NAMES] - Prices I can publish: [PRICES OR VERIFY] - Who each tier is for: [WHO] </inputs> <task> Build a responsive three-tier pricing page with these sections: 1. Hero with one sentence 2. Three equal cards from [TIER NAMES] 3. Feature bullets I named only 4. One recommended tag if I said which 5. CTA per card 6. Fine print [VERIFY] 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 a price is unknown, print [VERIFY], not $49.
Good Better Best
2/30✨ What it does
Claude builds a good-better-best pricing page 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 packaging editor <context> I need one self-contained HTML good-better-best pricing 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: [PRODUCT] - Good: [GOOD] - Better: [BETTER] - Best: [BEST] - Difference I can prove: [DIFF] </inputs> <task> Build a responsive good-better-best pricing page with these sections: 1. Hero 2. Three ladders, Better slightly emphasized 3. Only diffs I named 4. Who should stay on Good 5. 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: Name the one feature that makes Better worth it.
One Paid Plan
3/30✨ What it does
Claude builds a single-plan pricing page 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 designer who likes simple <context> I need one self-contained HTML single-plan pricing 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: [PRODUCT] - Price: [PRICE OR VERIFY] - What is in: [IN] - What is not: [OUT] </inputs> <task> Build a responsive single-plan pricing page with these sections: 1. Hero with one number or [VERIFY] 2. What is in 3. What is not 4. One CTA 5. FAQ of 3 real questions 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 fake second tier to look serious is worse.
Usage Pricing Page
4/30✨ What it does
Claude builds a usage pricing page 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 usage-billing explainer <context> I need one self-contained HTML usage pricing 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: [PRODUCT] - Unit: [UNIT] - Rate I can publish: [RATE OR VERIFY] - Example bill: [EXAMPLE OR VERIFY] </inputs> <task> Build a responsive usage pricing page with these sections: 1. Hero that names the unit 2. Rate table 3. Worked example only if given 4. Cap or [VERIFY] 5. 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 typical bill.
Free And Paid
5/30✨ What it does
Claude builds a free-and-paid pricing page 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 freemium editor <context> I need one self-contained HTML free-and-paid pricing 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: [PRODUCT] - Free includes: [FREE] - Paid includes: [PAID] - Limit that forces upgrade: [LIMIT] </inputs> <task> Build a responsive free-and-paid pricing page with these sections: 1. Two columns 2. The limit in plain words 3. No dark pattern countdown 4. CTA on paid, start on free 5. Fine print 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 limit should be a real one you named.
Compare
5 promptsCompare Table Page
6/30✨ What it does
Claude builds a plan-compare pricing page 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 comparison-table designer <context> I need one self-contained HTML plan-compare pricing 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: [PRODUCT] - Rows I can support: [ROWS] - Tiers: [TIERS] </inputs> <task> Build a responsive plan-compare pricing page with these sections: 1. Hero 2. Sticky-header compare table from [ROWS] only 3. Yes/no or text I gave, never invented limits 4. CTA row 5. Mobile stacks 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: Empty cells stay empty. Do not fill with Unlimited.
Us Versus Spreadsheet
7/30✨ What it does
Claude builds a us-vs-old-way pricing page 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 positioning designer <context> I need one self-contained HTML us-vs-old-way pricing 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: [PRODUCT] - Old way cost: [OLD WAY] - Our price: [PRICE OR VERIFY] </inputs> <task> Build a responsive us-vs-old-way pricing page with these sections: 1. Hero 2. Old way costs they named 3. Our price or [VERIFY] 4. Who should keep the spreadsheet 5. 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 competitor price.
Add-Ons Page
8/30✨ What it does
Claude builds a add-ons pricing page 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 an add-on packager <context> I need one self-contained HTML add-ons pricing 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: [PRODUCT] - Base: [BASE] - Add-ons: [ADDONS] - Prices: [PRICES OR VERIFY] </inputs> <task> Build a responsive add-ons pricing page with these sections: 1. Base card 2. Add-on cards from [ADDONS] only 3. Totals only if I gave numbers 4. 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 an add-on to look complete.
Nonprofit And Education
9/30✨ What it does
Claude builds a nonprofit pricing page 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 honest discount designer <context> I need one self-contained HTML nonprofit pricing 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: [PRODUCT] - Standard: [STANDARD OR VERIFY] - Who qualifies: [WHO] - How to ask: [HOW] </inputs> <task> Build a responsive nonprofit pricing page with these sections: 1. Hero 2. Standard price or [VERIFY] 3. Who qualifies 4. How to ask, no fake 60% off 5. 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: If you have no discount, do not add one.
Price Anchor Page
10/30✨ What it does
Claude builds a anchored pricing page 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 careful CRO designer <context> I need one self-contained HTML anchored pricing 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: [PRODUCT] - High option I actually sell: [HIGH] - Target: [TARGET] - Why high exists: [WHY] </inputs> <task> Build a responsive anchored pricing page with these sections: 1. Hero 2. High option that is real 3. Target emphasized 4. Why high exists in one line 5. No fake strikethrough 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 fake was $999 is a lie. Skip it.
Toggle & Billing
5 promptsAnnual Toggle Page
11/30✨ What it does
Claude builds a annual-toggle pricing page 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 billing-page designer <context> I need one self-contained HTML annual-toggle pricing 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: [PRODUCT] - Monthly: [MONTHLY OR VERIFY] - Annual: [ANNUAL OR VERIFY] - Savings I can state: [SAVINGS OR VERIFY] </inputs> <task> Build a responsive annual-toggle pricing page with these sections: 1. Hero 2. Working monthly/annual toggle in vanilla JS 3. Prices from inputs only 4. Savings line or [VERIFY] 5. 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: The toggle must actually switch the numbers.
Invoice And Card
12/30✨ What it does
Claude builds a invoice-or-card pricing page 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 B2B pricing designer <context> I need one self-contained HTML invoice-or-card pricing 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: [PRODUCT] - Self-serve: [SELF SERVE] - Invoice path: [INVOICE] </inputs> <task> Build a responsive invoice-or-card pricing page with these sections: 1. Two paths 2. Who uses which 3. What you need for invoice 4. CTA each 5. No fake procurement portal 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 Net-30 you do not offer.
Seat Pricing Page
13/30✨ What it does
Claude builds a per-seat pricing page 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 seat-model explainer <context> I need one self-contained HTML per-seat pricing 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: [PRODUCT] - Price per seat: [SEAT OR VERIFY] - What a seat is: [SEAT MEANS] - Minimum: [MIN OR NONE] </inputs> <task> Build a responsive per-seat pricing page with these sections: 1. Hero 2. Seat definition 3. Calculator only if I gave the rate 4. Minimum or none 5. 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 volume break.
Currency Note Page
14/30✨ What it does
Claude builds a multi-currency pricing page 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 an international pricing editor <context> I need one self-contained HTML multi-currency pricing 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: [PRODUCT] - Currency I charge: [CURRENCY] - Other: [OTHER OR NONE] </inputs> <task> Build a responsive multi-currency pricing page with these sections: 1. Hero with the currency you charge 2. Other currencies only if named 3. Tax note [VERIFY] 4. 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 euro price from a USD one.
Soon Price Page
15/30✨ What it does
Claude builds a coming-soon pricing page 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 waitlist-pricing designer <context> I need one self-contained HTML coming-soon pricing 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: [PRODUCT] - What we know: [KNOWN] - What is not set: [NOT SET] - Notify: [EMAIL OR FORM] </inputs> <task> Build a responsive coming-soon pricing page with these sections: 1. Hero: price not set 2. What is known 3. What is not 4. Notify 5. No fake $99 that might change 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 the price is not set, do not put a number.
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.
FAQ & Objections
5 promptsPricing FAQ Page
16/30✨ What it does
Claude builds a pricing FAQ page 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 pricing FAQ writer <context> I need one self-contained HTML pricing FAQ 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: [PRODUCT] - Real questions: [QUESTIONS] - Answers: [ANSWERS] </inputs> <task> Build a responsive pricing FAQ page with these sections: 1. Tiers summary 2. Accordion from [QUESTIONS] 3. Refund only if I stated one 4. 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 30-day refund.
Who Should Not Buy
17/30✨ What it does
Claude builds a not-for-you pricing page 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 an honest closer <context> I need one self-contained HTML not-for-you pricing 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: [PRODUCT] - Who it is for: [FOR] - Who should leave: [NOT FOR] </inputs> <task> Build a responsive not-for-you pricing page with these sections: 1. Hero 2. For 3. Not for 4. Tiers for the rest 5. 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: A not-for list builds more trust than a ninth feature.
Switching Cost Page
18/30✨ What it does
Claude builds a switching pricing page 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 migration-pricing editor <context> I need one self-contained HTML switching pricing 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: [PRODUCT] - From: [OLD TOOL] - What we move: [WHAT MOVES] - What we do not: [WHAT STAYS] </inputs> <task> Build a responsive switching pricing page with these sections: 1. Hero 2. What we move 3. What stays 4. Price or [VERIFY] 5. 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 free concierge migration.
ROI Without Fantasy
19/30✨ What it does
Claude builds a roi pricing page 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 restrained ROI editor <context> I need one self-contained HTML roi pricing 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: [PRODUCT] - Inputs I have: [INPUTS] - Math I allow: [MATH OR NONE] </inputs> <task> Build a responsive roi pricing page with these sections: 1. Hero 2. Math only from [INPUTS] 3. [VERIFY] on any dollar I did not give 4. 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: No 10x ROI unless you typed the math.
Talk To Sales Plus Self Serve
20/30✨ What it does
Claude builds a hybrid pricing page 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 hybrid-motion designer <context> I need one self-contained HTML hybrid pricing 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: [PRODUCT] - Self-serve ceiling: [CEILING] - Sales: [SALES CTA] </inputs> <task> Build a responsive hybrid pricing page with these sections: 1. Self-serve cards 2. Sales band for above [CEILING] 3. What sales needs from them 4. Two CTAs, labeled 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 hide the price of the small plan.
Visual Variants
5 promptsQuiet Pricing Page
21/30✨ What it does
Claude builds a quiet pricing page 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 calm designer <context> I need one self-contained HTML quiet pricing 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: [PRODUCT] - Tiers: [TIERS] - Prices: [PRICES OR VERIFY] </inputs> <task> Build a responsive quiet pricing page with these sections: 1. Lots of space 2. Small type, one accent 3. Three tiers 4. No badges unless I asked 5. 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: If it looks like a carnival, start over.
Dense Compare Page
22/30✨ What it does
Claude builds a dense compare pricing page 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 an enterprise-table designer <context> I need one self-contained HTML dense compare pricing 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: [PRODUCT] - Rows: [ROWS] - Tiers: [TIERS] </inputs> <task> Build a responsive dense compare pricing page with these sections: 1. Short hero 2. Full compare 3. Sticky first column 4. CTA 5. Works on a laptop first 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: This is for buyers who want the grid.
Founder Video Plus Price
23/30✨ What it does
Claude builds a video-and-price page 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 page designer <context> I need one self-contained HTML video-and-price 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: [PRODUCT] - Video note: [VIDEO OR PLACEHOLDER] - Price: [PRICE OR VERIFY] </inputs> <task> Build a responsive video-and-price page with these sections: 1. Video placeholder 2. One plan 3. Three bullets 4. 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 embed a fake Wistia URL.
Mobile-First Pricing
24/30✨ What it does
Claude builds a mobile-first pricing page 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 mobile designer <context> I need one self-contained HTML mobile-first pricing 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: [PRODUCT] - Tiers: [TIERS] - Prices: [PRICES OR VERIFY] </inputs> <task> Build a responsive mobile-first pricing page with these sections: 1. Stacked cards 2. Swipe hint 3. Sticky CTA 4. Compare behind a tap 5. Desktop still works 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: Thumbs first. The grid can wait.
Rebuild My Pricing Page
25/30✨ What it does
Claude builds a rebuilt pricing page for [CURRENT PRICING 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 pricing editor <context> I need one self-contained HTML rebuilt pricing 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: [CURRENT PRICING PASTE] - Prices that stay: [KEEP PRICES] - Lies to cut: [CUT] </inputs> <task> Build a responsive rebuilt pricing page with these sections: 1. Diagnose 2. Rebuild 3. Keep [KEEP PRICES] 4. Cut [CUT] 5. List invented numbers you refused 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 page.
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.
Fixes
5 promptsCut The Fake Discount
26/30✨ What it does
Claude builds a honest pricing page 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 an ethics-minded designer <context> I need one self-contained HTML honest pricing 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: [PRODUCT] - Real price: [PRICE] - Fake slash I used: [FAKE] </inputs> <task> Build a responsive honest pricing page with these sections: 1. Rebuild without the slash 2. Real price only 3. Note what you removed 4. 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: If the slash price was never charged, it goes.
Add A Student Price
27/30✨ What it does
Claude builds a student pricing page 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 student-plan designer <context> I need one self-contained HTML student pricing 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: [PRODUCT] - Standard: [STANDARD OR VERIFY] - Student: [STUDENT OR VERIFY] - Proof: [HOW THEY PROVE] </inputs> <task> Build a responsive student pricing page with these sections: 1. Two columns 2. How they prove it 3. What student does not get 4. 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 .edu magic if you check by hand.
Grandfather Note
28/30✨ What it does
Claude builds a grandfather pricing page 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 changelog-minded designer <context> I need one self-contained HTML grandfather pricing 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: [PRODUCT] - Old price: [OLD OR VERIFY] - New price: [NEW OR VERIFY] - Who is kept: [WHO] </inputs> <task> Build a responsive grandfather pricing page with these sections: 1. Hero for current buyers 2. Who is grandfathered 3. New price for new buyers 4. 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 sunset date.
Price Only In The Footer
29/30✨ What it does
Claude builds a soft-price page 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 landing designer <context> I need one self-contained HTML soft-price 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: [PRODUCT] - Story: [STORY] - Price: [PRICE OR VERIFY] </inputs> <task> Build a responsive soft-price page with these sections: 1. Story first 2. Price in a quiet footer 3. One CTA 4. No 6-tier grid 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: Use when the product needs a story before a number.
Pricing Plus FAQ Artifact
30/30✨ What it does
Claude builds a pricing-plus-faq page 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 complete-page designer <context> I need one self-contained HTML pricing-plus-faq 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: [PRODUCT] - Tiers: [TIERS] - Questions: [QUESTIONS] </inputs> <task> Build a responsive pricing-plus-faq page with these sections: 1. Tiers 2. FAQ 3. CTA 4. [VERIFY] on any number I skipped 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: One file. Buyer can decide without a call.
Free tool
Prompt Optimizer
Turn a rough idea into a structured, professional AI prompt.
Frequently Asked Questions
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.
7-day free trial. Cancel anytime.