About 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

Solo Founder App Developer Indie Hacker

Installation guide · Troubleshooting · More Website Skills

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

About this Skill

You say/bs-sketchnote-pricing Make a playful hand-drawn pricing section for my garden app Sproutly: three plans, the middle one featured, with dark mode.

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 GrowthWeb Design & Digital ExperiencesBuild Website PageBuild Landing PageEditable OutputVisually PolishedBeginner-friendlyDoodleHand DrawnHandwrittenNotebook PaperSketchnote