组件分类 · 定价
定价表组件
SaaS 定价页要用的方案卡片、按月 / 按年切换和方案对比。打开即可预览，复制提示词让模型接到你的价格和设计变量上。
共 8 个 · 更新于
适合用在哪里
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "定价表" 8pt add suiyun-tab-pricing
全部 8 个定价表组件
- Segmented Pricing Tiers 分段切换定价
胶囊分段控件切换三类产品定价：每类先是一段说明配右侧流程示意（访客流量穿过一排能力芯片，或等待与计算的对比条），下面是细线分格的档位列，标题、适用对象、示意价格、能力标签和描边按钮。
- Tri Plan Pricing 三档定价卡
季度、年度、终身三档定价，衬线大号价格配划线原价；顶部滑块开关在“资源库 / 建站器”之间切换，价格淡出淡入更新；推荐档为黑底卡片配紫色按钮与“限量名额”角标。
- Device Price Card 按设备数定价卡
一次买断的定价区：衬线斜体双行标题，白色价格卡带 1 台 / 2 台 / 3 台分段切换，价格数字带滚动过渡并标注示意价格，下方勾选清单和黑色下载按钮，背景是底部渐蓝的天空。
- Usage Slider Calculator 用量滑块估算器
按用量计费的估算卡片：拖动绿色滑块选择金额，金额标签跟随滑块移动，下方四格实时换算可发邮件、意向线索、可约会议等示意数值，底部黑色按钮。
- Dual Plan Pricing 双方案定价卡
月付与终身两张并排定价卡：大号价格配划线原价，功能清单每行带线性图标和蓝色对勾，底部列出计费与使用期条件；推荐方案用浅蓝渐变、加粗描边和主色按钮突出。
- Electric Border Pricing 电光描边报价卡
三栏报价卡，推荐档用旋转的暖橙流光描边加外发光突出，其他两档保持克制的深色卡面；卡片悬停轻微上浮，点击按钮切换为已选择。金额以示意呈现，窄屏改为单列。
- Ticket Pricing 票根价格卡
像一张门票的买断价格卡：左边是产品规格，右边是撕线后的票根，上下各有一个半圆缺口。切换一台 / 两台授权，原价、现价和按钮金额一起变化。
- Pricing Toggle 月付年付切换
滑块式计费周期切换，价格数字纵向切换，不触发布局抖动。
常见问题
8pt 的定价表组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把定价表组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
定价页放几档方案比较合适？
多数产品三档以内最好比较：给推荐的一档加强调，把每档的差异写成具体权益，并在下方放方案对比表和常见问题。按年付费有优惠时，切换开关默认停在按年。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。