Skip to content
Recaply.
Sign inSubmit a tool

DirectorySkills

Hand-drawn pricing section: 1440, made in this run
Run 1Hand-drawn pricing section“Make a hand-drawn style pricing section for our online sketching course. Plans in brief.md.”
Runs in
  • Claude Code
  • Codex
  • Cursor
  • Gemini CLI
  • GitHub Copilot
  • OpenCode
Generates with
Your agent's model
Tested with
Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs
Node 20+Chrome
Licence
Recaply licence

Hand-Drawn Pricing Section

A hand-drawn pricing section: three sketchy plan cards, marker highlights, a doodled arrow and a monthly or yearly switch.

$9.99once, yours to keep

Every premium skill and prompt, one plan$19.99 a month. Cancel any time. What you get when you buy

Payments are non-refundable. See our Terms of service.

Builds a hand-drawn, sketchnote-style pricing section into your own project: on dotted paper, three plan cards with wobbly hand-drawn ink borders and slight tilts; prices in a handwriting face with a yellow marker swipe; hand-drawn ticks for features; a doodled arrow and a sticky note point at the middle plan; a monthly or yearly switch on top. Plain HTML, CSS and JavaScript, or matched to React, Next.js, Vue, Svelte, Astro or Tailwind when the project uses them. Comes with a working reference and a check that screenshots it at phone, tablet and desktop widths and flags sideways overflow, text under 12px, missing alt text and names, low contrast, no focus styles, motion that ignores reduced motion, leftover sample words and emoji icons. Use when a creative tool, whiteboard, education, community or indie product wants a friendly pricing section with personality, or someone asks for hand-drawn, doodle or sketchnote pricing.

By RecaplyUpdated 12 Nov

Install Hand-Drawn Pricing Section

After the download, ask your agent to add it, or run the line yourself.

Read https://recaply.co/skills/hand-drawn-pricing/install.md and follow it to install the hand-drawn-pricing skill from hand-drawn-pricing.zip.

Paste it into your agent. It reads our install steps, finds the ZIP you downloaded and adds the skill for you.

New to skills? How to install a skill

Similar skills

All 735 skills

Who Hand-Drawn Pricing Section is for

What you get

  • One HTML file with its CSS inside: no build step, no framework
  • A hand-drawn, sketchnote-style pricing section
  • Checked at phone and desktop widths

Good fit

  • When a creative tool, whiteboard, education, community or indie product wants a friendly pricing section with personality

Not for

  • An app with a backend, sign-in or a database
  • Copying another company's site

About this skill

You say

Make a hand-drawn style pricing section for our online sketching course. Plans in brief.md.

It said back

The pricing section is built as a plain HTML page. The automated check passes (no sideways overflow, no text under 12px, contrast, focus styles, reduced motion), and I looked at the screenshots myself. I only viewed the 390px and 1440px screenshots, so the 768px one is unseen.

What's on the page

  • Plans: Taster (free, 3 lessons), Full course (£49 "one-off", 40 lessons, feedback on 5 drawings) and Mentored (£19 "a month", weekly video feedback).
  • Billing labels: each price has "one-off" or "a month" beside it. There is no monthly/yearly switch, as the brief asked.
  • Highlight: the Full course card is raised and a bit larger, with a blue button. A doodled arrow and a "Best for most!" sticky note point at it on desktop. Both hide on phones, where the cards stack in one column.
  • Colours: pencil-grey ink and a sky-blue marker for the price swipes and the heading highlight. The sticky note is a paler blue.
Show more

What it did in run 1

  1. hand-drawn-pricing
  2. ls -la && cat brief.md
  3. cd ./.claude/skills/hand-drawn-pricing && ls -R . | head -30 && cat reference/index.html reference/style.css reference/script.js
  4. cd . && mkdir -p pricing && cd pricing && sed -n '/^\*,\*::before/,/^\.sr-only/p' ../.claude/skills/hand-drawn-pricing/reference/style.css | grep -v '^\.skip' > /dev/null python3 - <<'EOF' import re ref=open('../.claude/skills/hand-drawn-pricing/reference/style.css').read() ref=ref.replace('--bg:#FFFDF6','--bg:#FAFBFB').replace('--ink:#1E1C1A','--ink:#33373A').replace('--muted:#57524B','--muted:#555B60').replace('--line:#E9E3D3','--line:#DADFE2').replace('--accent:#FFD93D','--accent:#8DD0F7').replace('--on-accent:#1E1C1A','--on-accent:#33373A').replace('--em:#1E1C1A','--em:#33373A').replace('--note:#FF8A7A','--note:#BFE5FB').replace('--dots:#E4DCC8','--dots:#D3D9DD') ref=ref.replace('color:#9C2F1F','color:var(--ink)') # drop unused shared blocks ref=re.sub(r'\.btn\{.*?\n\.ic\{flex:none\}\n','',ref,flags=re.S) ref=re.sub(r'\.js \.reveal\{[^\n]*\n','',ref) ref=ref.replace('.js .reveal{opacity:1;transform:none}','') ref=re.sub(r'\.tgl\{.*?\.tgl\[aria-checked=true\] \.tr::after[^\n]*\n','',ref,flags=re.S) ref=re.sub(r'\.sk-switch\{[^\n]*\n','',ref); ref=re.sub(r'\.sk-free\{[^\n]*\n','',ref) ref=re.sub(r'\.sk-all\{[^\n]*\n','',ref) ref=ref.replace('.sk-switch{','x{') # note/arrow positions: point at middle card ref=ref.replace('.sk-note{position:absolute;left:calc(33.3% - 150px);top:-46px;','.sk-note{position:absolute;left:calc(50% - 205px);top:-50px;') ref=ref.replace('.sk-arrow{position:absolute;left:calc(33.3% - 40px);top:-20px;','.sk-arrow{position:absolute;left:calc(50% - 100px);top:-24px;') ref=ref.replace('.sk-per{color:var(--muted);font-weight:600}','.sk-per{color:var(--muted);font-weight:700}') ref=ref.replace('.sk-grid{position:relative;','.sk-grid{margin-top:1rem;position:relative;') open('style.css','w').write(ref) EOF tick='<svg class="tick" aria-hidden="true" focusable="false"><use href="#tick"/></svg>' cat > index.html <<EOF <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Linework sketching courses: pricing</title> <meta name="description" content="Prices for the Linework online sketching course: a free taster, the full course or monthly mentoring."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"><symbol id="tick" viewBox="0 0 24 24"><path d="M3.5 12.5c2 1.2 3.6 3 4.8 5.2C11 11 15 6.6 20.5 4.2" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></symbol></svg> <main id="main"> <section class="p-sec sk" id="plans" aria-labelledby="plans-h"> <div class="sec-head center"><h2 id="plans-h">Pick your way to <em>sketch</em></h2><p class="sub">Start free, buy the course once, or learn with a mentor every week.</p></div> <div class="wrap"><div class="sk-grid"> <article class="sk-card" aria-labelledby="sk-0"><h3 id="sk-0">Taster</h3><p class="sk-d">Try a few lessons before you decide.</p><p class="sk-price"><span class="sk-amt">Free</span><span class="sk-per">no payment</span></p><ul><li>$tick 3 lessons</li></ul><a class="sk-btn" href="#">Start the taster</a></article> <article class="sk-card hot" aria-labelledby="sk-1"><h3 id="sk-1">Full course</h3><p class="sk-d">The whole course, yours to keep.</p><p class="sk-price"><span class="sk-amt">£49</span><span class="sk-per">one-off</span></p><ul><li>$tick 40 lessons</li><li>$tick Feedback on 5 of your drawings</li></ul><a class="sk-btn" href="#">Get the full course</a></article> <article class="sk-card" aria-labelledby="sk-2"><h3 id="sk-2">Mentored</h3><p class="sk-d">Learn with a mentor beside you.</p><p class="sk-price"><span class="sk-amt">£19</span><span class="sk-per">a month</span></p><ul><li>$tick Weekly video feedback</li></ul><a class="sk-btn" href="#">Start mentoring</a></article> <p class="sk-note" aria-hidden="true">Best for most!</p> <svg class="sk-arrow" viewBox="0 0 120 80" aria-hidden="true" focusable="false"><path d="M8 10c30 2 62 14 86 46M94 56l-2-16M94 56l-16-1" fill="none" stroke="#33373A" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg> </div></div> </section> </main> </body> </html> EOF sed -i '' 's/\$tick/'"$(echo "$tick" | sed 's/[\/&]/\\&/g')"'/g' index.html grep -c 'class="tick"' index.html node ../.claude/skills/hand-drawn-pricing/scripts/check.mjs index.html --out check 2>&1 | tail -30
  5. cd . && mkdir -p pricing && cd pricing && python3 - <<'EOF' import re ref=open('../.claude/skills/hand-drawn-pricing/reference/style.css').read() for a,b in [('#FFFDF6','#FAFBFB'),('--ink:#1E1C1A','--ink:#33373A'),('#57524B','#555B60'),('#E9E3D3','#DADFE2'),('--accent:#FFD93D','--accent:#8DD0F7'),('--on-accent:#1E1C1A','--on-accent:#33373A'),('--em:#1E1C1A','--em:#33373A'),('#FF8A7A','#BFE5FB'),('#E4DCC8','#D3D9DD')]: ref=ref.replace(a,b) ref=re.sub(r'\.btn\{.*?\n\.ic\{flex:none\}\n','',ref,flags=re.S) ref=re.sub(r'\.js \.reveal\{[^\n]*\n','',ref) ref=ref.replace('.js .reveal{opacity:1;transform:none}','') ref=re.sub(r'\.tgl\{.*?\.tgl\[aria-checked=true\] \.tr::after[^\n]*\n','',ref,flags=re.S) for k in ['sk-switch','sk-free','sk-all']: ref=re.sub(r'\.'+k+r'\{[^\n]*\n','',ref) ref=ref.replace('left:calc(33.3% - 150px);top:-46px;','left:calc(50% - 205px);top:-50px;').replace('left:calc(33.3% - 40px);top:-20px;','left:calc(50% - 100px);top:-24px;') ref=ref.replace('.sk-grid{position:relative;','.sk-grid{margin-top:1rem;position:relative;') open('style.css','w').write(ref) EOF ls
  6. ./pricing/index.html
  7. cd ./pricing && node ../.claude/skills/hand-drawn-pricing/scripts/check.mjs index.html --out check 2>&1 | tail -30
  8. python3 - <<'EOF' import re ref=open('../.claude/skills/hand-drawn-pricing/reference/style.css').read() for a,b in [('#FFFDF6','#FAFBFB'),('--ink:#1E1C1A','--ink:#33373A'),('#57524B','#555B60'),('#E9E3D3','#DADFE2'),('--accent:#FFD93D','--accent:#8DD0F7'),('--on-accent:#1E1C1A','--on-accent:#33373A'),('--em:#1E1C1A','--em:#33373A'),('#FF8A7A','#BFE5FB'),('#E4DCC8','#D3D9DD')]: ref=ref.replace(a,b) ref=re.sub(r'\.btn\{.*?\n\.ic\{flex:none\}\n','',ref,flags=re.S) ref=re.sub(r'\.js \.reveal\{[^\n]*\n','',ref) ref=ref.replace('.js .reveal{opacity:1;transform:none}','') ref=re.sub(r'\.tgl\{.*?\.tgl\[aria-checked=true\] \.tr::after[^\n]*\n','',ref,flags=re.S) for k in ['sk-switch','sk-free','sk-all']: ref=re.sub(r'\.'+k+r'\{[^\n]*\n','',ref) ref=ref.replace('left:calc(33.3% - 150px);top:-46px;','left:calc(50% - 205px);top:-50px;').replace('left:calc(33.3% - 40px);top:-20px;','left:calc(50% - 100px);top:-24px;') ref=ref.replace('.sk-grid{position:relative;','.sk-grid{margin-top:1rem;position:relative;') open('style.css','w').write(ref) EOF node ../.claude/skills/hand-drawn-pricing/scripts/check.mjs index.html --out check 2>&1 | tail -30
  9. cat > /tmp/mkcss.py <<'EOF' import re,sys d=sys.argv[1] ref=open(d+'/.claude/skills/hand-drawn-pricing/reference/style.css').read() for a,b in [('#FFFDF6','#FAFBFB'),('--ink:#1E1C1A','--ink:#33373A'),('#57524B','#555B60'),('#E9E3D3','#DADFE2'),('--accent:#FFD93D','--accent:#8DD0F7'),('--on-accent:#1E1C1A','--on-accent:#33373A'),('--em:#1E1C1A','--em:#33373A'),('#FF8A7A','#BFE5FB'),('#E4DCC8','#D3D9DD')]: ref=ref.replace(a,b) ref=re.sub(r'\.btn\{.*?\n\.ic\{flex:none\}\n','',ref,flags=re.S) ref=re.sub(r'\.js \.reveal\{[^\n]*\n','',ref) ref=ref.replace('.js .reveal{opacity:1;transform:none}','') ref=re.sub(r'\.tgl\{.*?\.tgl\[aria-checked=true\] \.tr::after[^\n]*\n','',ref,flags=re.S) for k in ['sk-switch','sk-free','sk-all']: ref=re.sub(r'\.'+k+r'\{[^\n]*\n','',ref) ref=ref.replace('left:calc(33.3% - 150px);top:-46px;','left:calc(50% - 205px);top:-50px;').replace('left:calc(33.3% - 40px);top:-20px;','left:calc(50% - 100px);top:-24px;') ref=ref.replace('.sk-grid{position:relative;','.sk-grid{margin-top:1rem;position:relative;') open(d+'/pricing/style.css','w').write(ref) EOF python3 -I /tmp/mkcss.py . && node ../.claude/skills/hand-drawn-pricing/scripts/check.mjs index.html --out check 2>&1 | tail -30
  10. ./pricing/style.css
  11. node ../.claude/skills/hand-drawn-pricing/scripts/check.mjs index.html --out check 2>&1 | tail -30
  12. ./pricing/check/1440.png
  13. ./pricing/check/390.png
  14. ./pricing/style.css
  15. ./pricing/style.css
  16. node ../.claude/skills/hand-drawn-pricing/scripts/check.mjs index.html --out check 2>&1 | tail
  17. ./pricing/check/1440.png
  18. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 50 s · $0.28 of API use

Questions

Is Hand-Drawn Pricing Section free?

No. Hand-Drawn Pricing Section costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.

Which agents can use Hand-Drawn Pricing Section?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Hand-Drawn Pricing Section?

A ZIP of the whole skill folder (32 KB): the SKILL.md your agent follows and its 6 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.

How do I install Hand-Drawn Pricing Section?

Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./hand-drawn-pricing with your agent's flag.

What do I get from Hand-Drawn Pricing Section?

One HTML file with its CSS inside: no build step, no framework. A hand-drawn, sketchnote-style pricing section. Checked at phone and desktop widths.

What does Hand-Drawn Pricing Section need?

Node 20+ and Chrome, and no API key. Each use costs nothing beyond your agent.

How big is Hand-Drawn Pricing Section?

7 files, about 20,966 tokens in all. The SKILL.md is about 2,168 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 50 s to 1 min 50 s and $0.28 to $0.28 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Hand-Drawn Pricing Section to use it?

Type /hand-drawn-pricing first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.