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. Drafted with AI writing assistance and checked against our editorial policy.
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. The library keeps 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: hands-on tutorials on Claude, ChatGPT, Midjourney, and many other AI tools. New tutorials are added regularly.
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 hands-on tutorials on ChatGPT, Claude, Midjourney, and many other AI tools. New tutorials are added regularly.
7-day free trial. Cancel anytime.