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:
-
Hero — page title (e.g. "Pricing"), one-line subhead, optional
monthly/annual toggle.
-
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.
-
Comparison table — feature rows × tier columns, ✓ / — / value cells.
Group features into 2–3 logical sections (Core, Collaboration,
Support, Security…). Sticky header.
-
FAQ — 4–6 collapsible Q&A items. Use
<details><summary> for the
collapse — no JS.
-
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.
