pricing-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Pricing Page Skill

定价页面Skill

Produce a single-screen pricing page that respects the active DESIGN.md.

生成一个符合当前DESIGN.md规范的单屏定价页面。

Workflow

工作流程

Read the active DESIGN.md (injected above). Use only its colors, type tokens, and component patterns.
Classify the product from the brief and pick a tier shape:
- 3-tier (most common): Free / Pro / Team or Starter / Growth / Enterprise.
- 4-tier when the brief says "scale" or "enterprise plus".
- 2-tier when it says "individual / business" or "personal / pro".
Sections, in order:
1. Hero — page title (e.g. "Pricing"), one-line subhead, optional monthly/annual toggle.
2. Plan cards — one card per tier. Each card: tier name, price (use the display font + larger scale for the number), 1-line positioning, 4–6 bullet features, primary CTA. Mark the recommended tier with the DS accent border or a small badge.
3. Comparison table — feature rows × tier columns, ✓ / — / value cells. Group features into 2–3 logical sections (Core, Collaboration, Support, Security…). Sticky header.
4. FAQ — 4–6 collapsible Q&A items. Use
```
<details><summary>
```
  for the collapse — no JS.
5. Footer CTA — single line + button, accent band sparingly.
Write one self-contained HTML document:
- ```
<!doctype html>
```
  through
```
</html>
```
  , CSS in one inline
```
<style>
```
  .
- CSS Grid for the plan-card row; CSS Grid for the comparison table.
- ```
data-od-id
```
  on each tier card and each table row.
Money rendering: use the display font for the big number, body for the currency and "/mo" — sizes per DESIGN.md scale.
Self-check:
- Prices are plausible for the product (not "$X / month").
- Accent is on the recommended tier and one CTA only.
- Comparison table renders cleanly at 1024px and stacks readably below 768px (rotate column headers or scroll-x).
- No fake feature names — every row reads as something a real product would actually offer.

读取当前的DESIGN.md（已注入上方）。仅使用其中的颜色、字体标记和组件模式。
分类产品并根据需求选择套餐结构：
- 三层结构（最常见）：免费版/专业版/团队版或入门版/成长版/企业版。
- 当需求提到“扩展”或“高级企业版”时采用四层结构。
- 当需求提到“个人/商业”或“个人版/专业版”时采用两层结构。
页面板块顺序如下：
1. Hero区域——页面标题（如“定价”）、一行副标题，可选的月付/年付切换按钮。
2. 套餐卡片——每个层级对应一张卡片。每张卡片包含：套餐名称、价格（数字使用展示字体+更大字号）、一行定位描述、4-6个功能要点、主要CTA按钮。使用设计系统（DS）的强调边框或小徽章标记推荐套餐。
3. 对比表格——功能行 × 套餐列，单元格内容为✓ / — / 具体数值。将功能分为2-3个逻辑分组（核心功能、协作功能、支持服务、安全保障……）。表头固定。
4. FAQ区域——4-6个可折叠的问答项。使用
```
<details><summary>
```
  实现折叠效果——无需JS。
5. 页脚CTA——单行文案+按钮，酌情使用强调色条。
编写独立HTML文档：
- 包含
```
<!doctype html>
```
  至
```
</html>
```
  的完整结构，CSS内嵌在单个
```
<style>
```
  标签中。
- 使用CSS Grid布局套餐卡片行；使用CSS Grid布局对比表格。
- 在每个套餐卡片和表格行上添加
```
data-od-id
```
  属性。
价格渲染：数字使用展示字体，货币符号和“/mo”使用正文字体——字号遵循DESIGN.md的规范。
自我检查：
- 价格符合产品定位（不能是“$X / month”这类占位符）。
- 强调色仅用于推荐套餐和一个CTA按钮。
- 对比表格在1024px分辨率下显示清晰，在768px以下分辨率可堆叠或横向滚动（旋转列标题）。
- 功能名称需真实合理——每一项都应是真实产品会提供的功能。

Output contract

输出约定

Emit between

<artifact>

tags:

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

One sentence before the artifact, nothing after.

在

<artifact>

标签内输出内容：

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

在artifact标签前写一句话，标签后无需添加内容。