pricing-page

定价页面技能

生成一个单屏定价页面，并遵循当前生效的 DESIGN.md。

工作流

1. 阅读当前生效的 DESIGN.md（已在上方注入）。仅使用其中的颜色、字体标记和组件模式。
2. 分类产品，并根据简介选择套餐层级：
   • 3 个层级（最常见）：Free / Pro / Team 或 Starter / Growth / Enterprise。
   • 简介提到“scale”或“enterprise plus”时，使用 4 个层级。
   • 简介提到“individual / business”或“personal / pro”时，使用 2 个层级。
3. 页面区块，按以下顺序排列：
   1. 主视觉区 — 页面标题（例如“Pricing”）、一行副标题、可选的月付/年付切换按钮。
   2. 套餐卡片 — 每个层级一张卡片。每张卡片包含：套餐名称、价格（数字使用展示字体和更大的字号）、一行定位说明、4–6 个项目符号列出的功能、主要 CTA。用 DS 强调色边框或小徽章标记推荐套餐。
   3. 对比表格 — 功能行 × 套餐列，单元格使用 ✓ / — / 数值。将功能分为 2–3 个逻辑区块（核心、协作、支持、安全等）。表头固定。
   4. 常见问题 — 4–6 个可折叠的问答项。使用 <details><summary> 实现折叠，无需 JS。
   5. 页脚 CTA — 单行文案 + 按钮，谨慎使用强调色横幅。
4. 编写一个自包含的 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 写在一个内联 <style> 中。
   • 套餐卡片行使用 CSS Grid；对比表格也使用 CSS Grid。
   • 为每张套餐卡片和每行表格设置 data-od-id。
5. 金额呈现：大数字使用展示字体，货币符号和“/mo”使用正文字体；字号遵循 DESIGN.md 的比例。
6. 自检：
   • 价格应符合产品实际情况（不要使用“$X / month”）。
   • 推荐套餐和一个 CTA 使用强调色。
   • 对比表格在 1024px 宽度下显示正常，在 768px 以下可读性良好地堆叠（旋转列标题或支持横向滚动）。
   • 不要使用虚构的功能名称——每一行都应描述真实产品会提供的功能。

输出约定

在 <artifact> 标签之间输出：

<artifact identifier="pricing-slug" type="text/html" title="Pricing — Product Name">
<!doctype html>
<html>...</html>
</artifact>

在产物前写一句话，之后不写任何内容。