Sketchnote Pricingv1.0.1
Use this Skill to build website page.
5.00 downloads0 likes0 saves
$4.99
What do I get when I buy this Skill?Create a responsive pricing section with three notebook-inspired plan cards, clear feature choices, and a highlighted recommended option. It helps SaaS teams make pricing easier to compare and more memorable for buyers who need a friendly alternative to a conventional pricing table.
Picked most often by
Updated Aug 25, 2026
User reviews
Loading reviews…
What you get
- A single self-contained HTML pricing section — no build step, no libraries, no network requests — that drops into any site or iframe
- The full sketchnote look: tilted paper cards with wobbly ink borders, hard shadows that lift on hover, margin doodles, and a sticky-note ribbon on your featured plan
- A built-in light/dark "lights out" toggle plus a plain-words style guide for matching your brand colors and tuning the motion
Good fit
- Indie products, creator tools, and friendly consumer apps that want pricing with personality
- Founders who want a memorable hand-drawn pricing section without hiring an illustrator
- Existing sites and React/Vue projects — the section embeds with scoped styles and zero dependencies
Not for
- Formal or enterprise brands — the handwritten, sketched look is deliberately playful
- Pages that need billing toggles, currency switching, or checkout wiring — this Skill draws the section, not the payment flow
- Teams looking for a full landing-page builder — this Skill focuses on the pricing section
Product Launch & App GrowthDigital Publications & Web PagesBuild Website PageBuild Landing PageEditable OutputVisually PolishedBeginner-friendlyDoodleHand DrawnHandwrittenNotebook PaperSketchnote
About this Skill
What you need before you start
- You bring
- Plan tiers: 2-4 tiers with name, price, blurb, 3-5 features, and the featured tier (the Skill can draft them from a product description)
- Last tested
- v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT