Pricing section design prompt for Codex
Design a pricing section with your plans, a highlighted recommended tier, a monthly/annual toggle and a one-line answer to the top objection.
Design the pricing section with [Free, Pro at $12/month, Studio at $29/month]. Highlight [Pro] as the recommended plan. List at most five features per plan, starting with what differs between plans. Add a monthly/annual toggle that shows the annual saving, and one line under the cards answering the most common objection: [Can I cancel anytime?].
- Works with
- Codex, ChatGPT
- From the set
- Landing pages
About this prompt
Codex designs the pricing block of the page: one card per plan with at most five features each, the recommended plan visually highlighted, a monthly/annual toggle that shows how much the annual plan saves, and a single line under the cards that answers the question buyers ask most.
Put your real plan names and prices in the first bracket and the plan you want most people to choose in the second. Use a real objection for the last one: “Can I cancel anytime?” is common for subscriptions, but a B2B tool might need “Is there a contract?” or “Do you charge per seat?”. Asking for the differences first in each plan’s list keeps Codex from repeating “Unlimited invoices” on every card, which makes the plans hard to tell apart.
Check the toggle’s maths before moving on: if annual billing works out to two months free, the saving Codex prints should match. Plausible prices also expose layout problems early, such as a three-digit price that wraps or a plan name too long for its card.
More prompts from this set
- Mobile landing page check prompt for CodexHave Codex make a 390px version of your landing page with the call to action above the fold, 44px tap targets and a list of what it cut.
- Prompt to make an AI-made landing page look less genericA review prompt that has Codex find what makes a page look AI-generated, from centered layouts to vague copy, and fix the five worst issues.
- Landing page HTML to production code prompt for CodexRebuild the approved HTML landing page in your real stack, such as Next.js and Tailwind, with your own components and the copy left as it is.
- Landing page brief prompt for CodexA brief prompt that gives Codex your product, audience, goal and proof, then asks for the page’s sections in order before any design starts.
- Hero section design prompt with three directions for CodexAsk Codex for three hero sections at 1440×900, editorial, dark and soft, with identical copy, so you compare visual style and nothing else.
- Full landing page design prompt for CodexExtend the hero direction you picked into a complete landing page, with eight named sections in a fixed order so Codex doesn’t add filler.