nexu-io/pricing-page

一个独立的定价页——页眉、套餐层级、功能对比表和常见问题解答。当简报中要求 “pricing”（定价）、“plans”（套餐）、“subscription tiers”（订阅层级）或 “compare plans”（套餐对比）页面时使用。

设计多媒体开发 Agent Agent 技能自动化 skill agent-skill pricing page nexu-io open-design ai-agent

技术栈: cursor9.1万+许可证: Apache-2.0开发者: nexu-io

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

Pricing Page Skill

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

Workflow

Read the active DESIGN.md（上文已注入）。仅使用其中的颜色、字体 token 与组件模式。
Classify 根据简报对产品进行分类，并选择套餐层级形状：
- 3 层级（最常见）：Free / Pro / Team 或 Starter / Growth / Enterprise。
- 4 层级：当简报中出现 “scale”（扩展）或 “enterprise plus”（企业增强）。
- 2 层级：当出现 “individual / business”（个人 / 商务）或 “personal / pro”（个人 / 专业）。
Sections，顺序如下：
1. Hero —— 页面标题（例如 “Pricing”）、一行副标题、可选的月付 / 年付切换控件。
2. Plan cards —— 每个层级一张卡片。每张卡片包含：层级名称、价格（使用展示字体并将数字放大）、一行定位描述、4–6 条特性要点、主 CTA。使用设计系统的强调色边框或小徽标标记推荐层级。
3. Comparison table —— 特性行 × 层级列，单元格内容为 ✓ / — / 取值。将特性归入 2–3 个逻辑分组（核心、协作、支持、安全等）。表头采用吸顶（sticky）样式。
4. FAQ —— 4–6 个可折叠问答项。使用 <details><summary> 实现折叠效果，无需 JS。
5. Footer CTA —— 一行文案 + 一个按钮，强调色色带克制使用。
Write 输出一个独立的 HTML 文档：
- 从 <!doctype html> 到 </html>，CSS 内联在单个 <style> 中。
- 套餐卡片行使用 CSS Grid；对比表使用 CSS Grid。
- 每个层级卡片和每一行表格添加 data-od-id。
Money rendering：大号数字使用展示字体，货币符号与 “/mo” 使用正文字体，字号遵循 DESIGN.md 的比例。
Self-check：
- 价格对产品而言是合理的（不要写成 “$X / month”）。
- 强调色仅用于推荐层级和单个 CTA。
- 对比表在 1024px 下排版清晰，并在 768px 以下可读地堆叠（旋转表头或横向滚动）。 -…