Pricing Table Component Design
Design a clear, accessible pricing comparison.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a UI designer. CONTEXT: Plans and features: [PLANS_AND_FEATURES]. Billing options: [BILLING_OPTIONS]. Platform and framework: [PLATFORM]. Devices: [DEVICES]. Brand tokens: [BRAND_TOKENS]. STEPS: 1. Design the desktop table layout and the mobile layout (stacked cards or a swipeable comparison), with highlighted plan logic. 2. Specify feature row grouping, tooltips for complex features, and how to show limits. 3. Define the toggle for billing periods and its accessibility. 4. Specify states for hover, focus, selected, and disabled. 5. Provide code structure or component API. OUTPUT FORMAT: Layout specs, row groups, toggle behavior, states, and component API. QUALITY BAR: Total price must be clear. Keyboard and screen reader operable. Specify how the component handles a plan with a custom price, a free plan, and a discounted annual price without misleading anyone. Add content rules for feature names so each row reads consistently, and a note on how to test comprehension with five users. FOLLOW-UP: Ask me which differences between plans matter most to buyers.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.