WebPremium Verified

Sketchnote Pricing UI Block

Create a distinctive pricing section for a software launch, with notebook-like linework, an easy-to-scan plan comparison, visible editable HTML data, and working actions for each plan.

What you get

  • Responsive pricing section with two or three comparable plans
  • Editable prices, features, billing labels, and actions
  • Visible hand-drawn CSS/SVG details that remain decorative
  • Accessible buttons with distinct working destinations
  • Concise update notes and a hand-off note

Good fit

  • A solo founder publishing a product pricing page
  • An app developer replacing a generic pricing template
  • A launch page that needs a clear recommended tier

Not for

  • A full website with navigation and footer
  • A live checkout or metered billing calculator

What you provide

  • Plan names and prices
  • Billing periods and included features
  • Recommended tier, if any
  • Distinct destination for each plan button

Requirements

  • A modern browser
  • Node.js 20+ for the validator

Running cost

No external services. Runs entirely on your agent.

Try this prompt

/sl-sketchnote-pricing-ui-block Create a responsive pricing section for a small project-planning app, with Free ($0/month), Plus ($12/month) and Team ($29/month). Show each plan's project and collaborator limits and features, and highlight Plus. Headline: “Pick your pace”. Use a visible Golden Margin hand-drawn style.

Follow-up prompts

  • Add an annual billing option using these confirmed annual prices and distinct annual-plan links.
  • Replace the feature lists with my updated plan limits and keep the rows easy to compare.
  • Adjust the mobile card order so the recommended plan appears first.

Verification

Verified

render-checkpass4.0 / 513s

FAQ

Can I change the plans later?

Yes. Prices, features, labels, periods, and button destinations remain editable in the delivered component.

Does this include checkout?

No. It presents plans and gives each action its own destination, such as a signup, contact, or checkout page you provide.

Similar skills

Sketchnote Pricing UI Block · SkillLoom