主题 · 公司网站 · 入门

SaaS 定价页

定价页 = 三张分档卡片、一个计费周期切换，推荐档用强调色描边标出。

怎么向 AI 描述它

Build a SaaS pricing page for "Atlas", a project-analytics platform.

STYLE
- Airy light background (#f6f9fc), white tier cards, hairline borders
- Teal accent (#0d9488) for the highlighted card, badge, and buttons
- Generous whitespace, 12px radii

LAYOUT
- Header: title "Simple pricing for growing teams" and a Monthly / Yearly · save 20% toggle (Monthly on)
- Three tier cards side by side; the middle one is highlighted:
  - Starter $12/mo: "3 projects", "Email support"; tall adds "5 GB storage"; button "Start free"
  - Growth $49/mo (badge "Most popular"): "Unlimited projects", "Advanced analytics", "Priority support"; tall adds "50 GB storage"; solid button "Start free trial"
  - Scale $199/mo: "Everything in Growth", "SSO & SCIM", "99.9% SLA"; tall adds "Dedicated CSM"; button "Contact sales"

COMPONENTS
- Billing toggle (segmented control, active state filled)
- Tier name, price with a "/mo" suffix, feature list with check-style rows
- A "Most popular" badge on the highlighted tier
- A full-width CTA button per tier (teal when highlighted)

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the highlighted tier of this pricing page.

CHANGES
- Mark it with a 2px accent border instead of a glow or a scale
- Move the Most popular badge to the top edge, centred
- Make the CTA full width and filled with the accent

DO NOT
- Do not change the other two tiers
- Do not restyle the billing toggle

Build a production Stripe-style SaaS pricing page.

STYLE
- Airy #f6f9fc background, white tier cards, hairline borders
- One blurple accent #635bff for the highlighted tier, badge, and buttons
- 12px radii with generous whitespace

LAYOUT
- Header line with the page title and a monthly and yearly toggle
- Three tier cards side by side, the middle one highlighted
- Feature comparison table below the tiers
- FAQ section to close the page

COMPONENTS
- Card, button, navbar, badge, table, accordion, toggle
- The toggle is a segmented control with the active state filled

STATES
- Yearly selected: prices swap with a short fade and a savings badge appears
- Below 900px the tiers stack, with the highlighted tier staying first

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Prices use tabular-nums

MOTION
- Billing toggle: price cross-fades over 250ms and card height settles at 200ms ease-out.
- Recommended tier: a static 2px accent border. No pulse, no glow, no scale.
- Do not float all three cards on hover at once.
- prefers-reduced-motion: instant price swap.

修改类 Prompt 只动目标，不碰页面其余部分。

提示

留白做主力——高亮档靠细描边吸引注意，而非光晕。

另见

组件

卡片→按钮→导航栏→

风格

极简→渐变→

主题

Spotify 风音乐播放器→Stripe 风定价页→

SaaS 定价页

Simple pricing for growing teams

提示

另见

组件

动画

风格

主题

Prompt

术语

反模式