免费在 GitHub 公开中文介绍

pricing-page

制作包含价格方案卡片、功能对比表、常见问题和操作按钮的HTML页面，按需求安排方案数量及推荐标记，方便用户在订阅前比较服务内容。

原文查看原文说明

A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.

nexu-io/open-design

AI 评分90分/ 100 查看安装方法

适用场景

制作订阅服务价格页原型
比较各方案包含的功能
展示个人与企业方案
整理价格相关常见问题

中文介绍

功能

制作可比较服务价格方案的HTML页面，整合开头说明、价格卡片、功能对比表、可展开收起的常见问题，以及页面末尾的操作按钮。根据需求选择两到四档方案，每张卡片放置价格、简短说明、四到六项功能和主要操作按钮。

适用场景

适合制作订阅服务价格页原型，或展示个人方案与企业方案的区别。通过推荐方案标记和按功能分类的对比表，可以整理用户订阅前需要查看的内容。流程也会考虑窄屏上的对比表呈现方式，让读者能够阅读各方案的差异。

使用示例

“制作一个比较Free、Pro、Team三档方案的价格页面。”
“展示个人与企业两种方案，并附上功能对比表和常见问题。”

注意事项

前提是使用当前有效的DESIGN.md所规定的颜色、字体及组件模式。输出为包含CSS的单个HTML文档。常见问题使用<details><summary>实现展开与收起。资料涉及页面原型，未说明如何接入收费或订阅办理流程。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确用于价格或方案比较需求，并制作价格页面。
步骤具体性步骤、输入输出和示例是否具体: A良好具体规定了方案数量、章节顺序、卡片内容、HTML格式和不同屏宽的检查。
安全性发送数据、删除文件、执行命令等是否有说明: A良好任务范围是生成HTML文档，未要求对外发送或读取凭据。
安装难易度所需工具和 API 密钥是否少且有说明: B部分不足以有效的DESIGN.md为前提，但未提供创建步骤。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月20日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md2.8 KB
example.html7.0 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Pricing Page Skill

Produce a single-screen pricing page that respects the active 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.

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.

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能