Bolt UI design: a pricing page people understand

Bolt gets a working app on screen in minutes. Where it needs help is the decisions that make a screen easy to use, and pricing pages show it best: three identical cards, a gradient border on the middle one, and no clear answer to the only question the visitor has. Which plan is for me?

Example task used in this guide: redesign a pricing page built in Bolt so people can compare the plans and pick one.

Decide what the page must do

Before asking for a new design, write down the one job of the page in a sentence. For pricing: help someone pick a plan and pay for it, without having to ask. Everything on the page should serve that. Decoration that doesn't help them choose is noise, and anything that makes them hunt for the price period or the cancellation policy costs you sales.

Add project Knowledge

Bolt reads project Knowledge with every message, so it's the place for rules you'd otherwise repeat. Open it from the gear icon at the top: All project settings → Knowledge. Keep the rules short and checkable:

UI rules for this project:

- Reuse existing components (Button, Card, Badge). Don't invent new styles for one page.
- One primary action per screen. Secondary actions are outlined or text buttons.
- Prices: show the amount, the billing period and what's included, in that order. Never hide the period ("/month", "one time").
- If there's a recommended plan, mark it with a text label, not only a color.
- Text contrast at least 4.5:1. Don't rely on color alone for meaning.
- No gradients, glow effects, emoji or decorative icons in pricing.
- Everything must work at 390px wide and by keyboard only.

"Never hide the billing period" is a rule you can verify by looking at the page; "make pricing clear" isn't. When Bolt breaks a rule, point at it instead of re-explaining.

Look at real pricing screens

With UXKIN connected, Bolt can call find_ui_references with "pricing" or "choose a subscription plan" and get real screens back, such as Duolingo's plan picker or Dropbox's pricing screen, each with a link to see it in context.

Ask Bolt to compare two of them on four points: how the plans are laid out, how the recommended plan is marked, where the billing period appears, and what the main button says. Then have it tell you which decisions it's adopting. The point isn't to imitate another app; it's to make decisions that real products have already tested, then apply them with your own components.

Review the states

A pricing page has more states than the screenshot in your head. Have Bolt show each one in the preview:

• Loading: placeholders the same size as the plans, so nothing jumps when prices arrive.
• Prices failed to load: a short message and a Try again button, not an empty page.
• Already subscribed: the current plan says so, instead of offering to buy it again.
• Phone width (390px): plans stack, and the recommended one is still obvious.
• Keyboard only: every button is reachable and shows where focus is.

For a fuller pass, run the coding agent UI checklist and paste its report back into Bolt.

Connect UXKIN to Bolt

UXKIN connects to Bolt as a custom MCP server. You need a UXKIN plan (Monthly or Lifetime).

1. On the Bolt homepage, click the + in the chatbox, then Connectors → Manage connectors.
2. Click Custom MCP server.
3. Name: UXKIN. URL:

https://uxkin.com/mcp

4. Transport type: HTTP. Authentication: MCP OAuth.
5. Save, then sign in when the UXKIN page opens and click Allow.

Bolt can now use find_ui_references for real app screens and flows, and find_ui_materials for website design systems with their DESIGN.md. All of UXKIN's tools only read; they never change anything in your project or account.

A prompt you can use

Adapt it to your own plans. It names the problem, asks for two references and lists every state to handle:

Redesign our pricing page. Today it shows three identical cards with gradient borders, and people can't tell which plan to pick.

If the UXKIN connector is available, use find_ui_references with "pricing" and with "choose a subscription plan", and pick two screens. For each, note: how plans are laid out, how the recommended plan is marked, where the price period appears, and what the main button says. Tell me which decisions you're adopting.

Follow the project Knowledge. Then:
- Monthly and Lifetime plans, with the recommended one marked by a "Most popular" label.
- Each plan: price, period, three to five included items, one button.
- A short "Questions" list under the plans: cancelling, refunds, payment methods.
- States: loading prices, prices failed to load (with Try again), and logged-in users who already have a plan (show "Current plan" instead of a button).

Check it at 390px and 1440px, and by keyboard only.

Questions