用途:根据需求生成一个单屏定价页面,页面需遵循当前生效的 DESIGN.md。适用于 brief 中提出“pricing”“plans”“subscription tiers”等要求的场景。
主要能力:按 brief 对产品分类并选择套餐形态:3 层(最常见,如 Free/Pro/Team 或 Starter/Growth/Enterprise);brief 提到“scale”或“enterprise plus”时用 4 层;提到“individual/business”或“personal/pro”时用 2 层。页面按顺序包含:Hero(标题、一行副标题、可选的月付/年付切换);套餐卡片(每层一张,含层级名、价格、一句定位、4–6 条功能要点、主 CTA,推荐层级用强调边框或小徽章标注);对比表(功能行×层级列,✓ / — / 值,分 2–3 个逻辑分组如 Core、Collaboration、Support、Security,粘性表头);FAQ(4–6 条可折叠问答,使用 <details><summary>,无需 JS);页脚 CTA(一行文案加按钮,少用强调色带)。
使用方式:输出一个自包含 HTML 文档,从 <!doctype html> 到 </html>,CSS 放在单个内联 <style> 中;套餐卡片行与对比表均用 CSS Grid;每张层级卡和每个表格行加 data-od-id;金额用展示字体显示大数字,货币符号和“/mo”用正文字体。输出约定为在 <artifact> 标签间给出 HTML,标签含 identifier、type、title,artifact 前一句说明,之后无内容。
限制与自检:价格需符合产品实际(不得写“$X / month”占位);强调色仅用于推荐层级和一个 CTA;对比表在 1024px 下整洁,768px 以下可堆叠或横向滚动;不得使用虚假功能名,每行都应是真实产品可能提供的功能。需先读取并只使用 DESIGN.md 中的颜色、字体令牌与组件模式。其它未在资料中说明的细节暂未提供。