SuperAPI AI 工具集

pricing-page

前端与建站

查看项目

更新于 10-16 09:34

技能介绍

用途:根据当前 DESIGN.md 生成一个单屏定价页面,并遵循其配色、字体令牌和组件模式。适用于简报中提到"pricing""plans""subscription tiers"等内容时。

主要能力:先读取当前注入的 DESIGN.md,仅使用其中定义的颜色、类型令牌和组件模式。根据简报对产品分类并确定套餐层级形态:3 层最常见(如 Free/Pro/Team 或 Starter/Growth/Enterprise);简报提到"scale"或"enterprise plus"时用 4 层;提到"individual/business"或"personal/pro"时用 2 层。

页面结构按顺序包含:Hero(页面标题、一行副标题、可选的月度/年度切换);套餐卡片(每层一张,含层级名、价格、一行定位、4–6 条功能要点、主 CTA,推荐层级用强调边框或小徽章标记);对比表(功能行 × 层级列,用 ✓/—/值 单元格,功能分 2–3 个逻辑组,粘性表头);FAQ(4–6 个可折叠问答,用 details/summary 实现,无需 JS);页脚 CTA(一行文案加按钮)。

使用方式:输出单个自包含 HTML 文档,从 doctype 到 html 结束,CSS 放在一个内联 style 中;套餐卡片行和对比表均使用 CSS Grid;每张层级卡和每个表格行添加 data-od-id。金额渲染时用展示字体显示大数字。最终以 artifact 标签包裹输出,前面一句话,后面不留内容。

自检要求:价格对产品合理(避免占位符式价格);强调色只用于推荐层级和一个 CTA;对比表在 1024px 下正常渲染,低于 768px 时可读(旋转列头或横向滚动);不虚构功能名。

限制:具体价格、层级数量与功能内容取决于简报和 DESIGN.md,资料未提供固定值;需遵守 DESIGN.md 约束。