Web & Frontendlow risk

pricing-page

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·design-templates/pricing-page/SKILL.md

61/ 100推薦值

↓

匯入這個 Skill

選擇你的 coding agent，複製專案級或個人級安裝指令。

固定至平台收錄的 commit

匯入目前專案.agents/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a codex -y

匯入個人環境~/.agents/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a codex -g -y

手動放置目錄.agents/skills/pricing-pageOfficial docs ↗

匯入目前專案.claude/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a claude-code -y

匯入個人環境~/.claude/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a claude-code -g -y

手動放置目錄.claude/skills/pricing-pageOfficial docs ↗

匯入目前專案.agents/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a github-copilot -y

匯入個人環境~/.copilot/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a github-copilot -g -y

手動放置目錄.agents/skills/pricing-pageOfficial docs ↗

匯入目前專案.agents/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a cursor -y

匯入個人環境~/.cursor/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a cursor -g -y

手動放置目錄.agents/skills/pricing-pageOfficial docs ↗

匯入目前專案.agents/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a gemini-cli -y

匯入個人環境~/.gemini/skills/pricing-page

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/design-templates/pricing-page -a gemini-cli -g -y

Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path design-templates/pricing-page

手動放置目錄.agents/skills/pricing-pageOfficial docs ↗

⚠ 安裝指令使用開源 skills CLI。執行前請檢查來源、腳本與權限。

Skill 指令

在 GitHub 查看原始檔案 ↗

# Pricing Page Skill

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

## Workflow

1. **Read the active DESIGN.md** (injected above). Use only its colors, type
   tokens, and component patterns.
2. **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".
3. **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.
4. **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.
5. **Money rendering**: use the display font for the big number, body for the
   currency and "/mo" — sizes per DESIGN.md scale.
6. **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.