Automation Flow Landing Page

What it did in run 1

1. ./brief.md
2. automation-flow-landing-page
3. cd ./.claude/skills/automation-flow-landing-page; ls -R . | head -30; wc -c reference/*; cat reference/index.html; cat reference/script.js
4. cd ./.claude/skills/automation-flow-landing-page/reference; sed -n 20,400p index.html
5. cd .; cp .claude/skills/automation-flow-landing-page/reference/{style.css,script.js} .; grep -n "tiers\|billing\|logos" style.css | head -30; grep -n "billing\|year" script.js
6. cd .; R=.claude/skills/automation-flow-landing-page/reference; cp $R/style.css $R/script.js .; grep -n "tiers\|billing\|logos" style.css | head -30; grep -n "billing\|year" script.js
7. cd . && cp .claude/skills/automation-flow-landing-page/reference/style.css . && cp .claude/skills/automation-flow-landing-page/reference/script.js . && grep -n "tiers\|billing" style.css | head -20; grep -n "billing\|year" script.js
8. cp ./.claude/skills/automation-flow-landing-page/reference/style.css ./style.css
9. cp ./.claude/skills/automation-flow-landing-page/reference/script.js ./script.js
10. tiers|billing
11. ./.claude/skills/automation-flow-landing-page/reference/style.css
12. ./.claude/skills/automation-flow-landing-page/reference/script.js
13. ./script.js
14. ./style.css
15. cat > /tmp/gen.mjs <<'EOF' import fs from 'node:fs'; const chrome=(bg='#151228')=><rect width="640" height="420" rx="14" fill="${bg}"/><path d="M0 14a14 14 0 0 1 14-14h612a14 14 0 0 1 14 14v20H0z" fill="#1E1A38"/><circle cx="20" cy="17" r="5.5" fill="#FF6B5E"/><circle cx="38" cy="17" r="5.5" fill="#FFC23D"/><circle cx="56" cy="17" r="5.5" fill="#2ACB55"/>; const node=(x,y,c,w,st='#3A3466')=><rect x="${x}" y="${y}" width="120" height="48" rx="12" fill="#1E1A38" stroke="${st}" stroke-width="2"/><circle cx="${x+22}" cy="${y+24}" r="10" fill="${c}"/><rect x="${x+40}" y="${y+20}" width="${w}" height="8" rx="4" fill="#3A3466"/>; const flow=(s='#A78BFA',cols=['#A78BFA','#34D399','#EEEAFE','#F59F00','#A78BFA'])=>chrome()+['M180 144 C 240 144, 200 214, 260 214','M180 284 C 240 284, 200 214, 260 214','M380 214 C 440 214, 400 134, 460 134','M380 214 C 440 214, 400 304, 460 304'].map(d=><path d="${d}" fill="none" stroke="${s}" stroke-width="3"/>).join('')+node(60,120,cols[0],56)+node(60,260,cols[1],62)+node(260,190,cols[2],52,s)+node(460,110,cols[3],50)+node(460,280,cols[4],64); const rules=()=>{let o=chrome()+'<rect x="40" y="58" width="200" height="12" rx="6" fill="#EEEAFE"/>';const cs=['#34D399','#A78BFA','#F59F00','#F472B6','#34D399'];for(let i=0;i<5;i++){const y=96+i*58;o+=<rect x="40" y="${y}" width="560" height="44" rx="10" fill="#1E1A38" stroke="#3A3466"/><rect x="58" y="${y+18}" width="${90+i*14}" height="8" rx="4" fill="#EEEAFE"/><rect x="${58+110+i*14}" y="${y+18}" width="40" height="8" rx="4" fill="#3A3466"/><rect x="${58+170+i*14}" y="${y+18}" width="${70+(i%3)*20}" height="8" rx="4" fill="#3A3466"/><rect x="510" y="${y+14}" width="70" height="16" rx="8" fill="${cs[i]}" opacity=".85"/>;}return o}; const report=()=>{let o=chrome()+'<rect x="40" y="58" width="180" height="12" rx="6" fill="#EEEAFE"/>';const h=[120,170,140,220,190,90,60];for(let i=0;i<7;i++){const x=60+i*78;o+=<rect x="${x}" y="${380-h[i]}" width="48" height="${h[i]}" rx="8" fill="${i==3?'#A78BFA':'#3A3466'}"/>;}o+='<rect x="40" y="381" width="560" height="1" fill="#3A3466"/>';return o}; const svg=(inner,label)=><svg viewBox="0 0 640 420" ${label?role="img" aria-label="${label}":'aria-hidden="true" focusable="false"'}>${inner}</svg>; const ic=p=><svg class="ic" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="${p}"/></svg>; const tick=t=><li>${ic('M5 12l5 5 9-10')}${t}</li>; const logo=<svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="16" cy="16" r="6" fill="#A78BFA"/><ellipse cx="16" cy="16" rx="14" ry="6" fill="none" stroke="#A78BFA" stroke-width="2" transform="rotate(-25 16 16)"/></svg>; const tabs=[ ['Tags','M3 12l9-9h8v8l-9 9z','Every new email gets a tag such as billing, bug or sales, so you see what it is before you open it.',svg(flow())], ['Rules','M3 5h18l-7 8v6l-4 2v-8z','Write rules in plain words, like "refund requests go to Dana". Anyone on the team can read them and change them.',svg(rules())], ['Auto-replies','M4 5h16v11H9l-5 4z','Common questions get an answer straight away. Everything else goes to a person.',svg(flow('#F472B6',['#F472B6','#A78BFA','#EEEAFE','#F59F00','#F472B6']))], ['Weekly report','M5 20V10M12 20V4M19 20v-7','A short report each week shows what came in, what was tagged and where it went.',svg(report())]]; const faq=[ ['Is there a free trial?','Yes. Connect your inbox and start a free trial.'], ['How many inboxes does each plan cover?','Starter covers 1 inbox. Team covers up to 10 inboxes.'], ['Who can read the rules?','Everyone on your team. Rules are written in plain words, so anyone can see why an email went where it did.'], ['What does Sorter reply to automatically?','Common questions only. You choose which ones get an auto-reply, and everything else is routed to the right person.']]; const html=<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sorter: support emails tagged and sent to the right person</title> <meta name="description" content="Sorter reads incoming support emails, tags them and routes them to the right person. Built for small support teams."> <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=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"> <link rel="stylesheet" href="style.css"> </head> <body> <a class="skip" href="#main">Skip to content</a> <header class="nav"><div class="wrap nav-in"> <a class="brand" href="index.html" aria-label="Sorter home">${logo}<span>Sorter</span></a> <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="menu">${ic('M4 7h16M4 12h16M4 17h16')}<span class="sr-only">Menu</span></button> <nav id="menu" class="menu" aria-label="Main"><ul><li><a href="#features">Features</a></li><li><a href="#how">How it works</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">Questions</a></li></ul><a class="btn btn-primary btn-sm" href="#cta">Connect your inbox</a></nav> </div></header> <main id="main"> <section class="hero"><div class="wrap hero-in"><div class="hero-words reveal"><p class="kicker">Email automation for support</p><h1>Every support email, <em>sorted</em> before you open it</h1><p class="hero-sub">Sorter reads incoming support emails, tags them and sends each one to the right person, so a small team stops sorting by hand.</p><div class="hero-ctas"><a class="btn btn-primary" href="#cta">Connect your inbox${ic('M5 12h14M13 6l6 6-6 6')}</a><a class="btn btn-ghost" href="#features">See what it does</a></div><p class="hero-note">Free trial. Connect your inbox to start.</p></div><div class="hero-art reveal">${svg(flow(),'A Sorter flow: two emails come in, Sorter tags them, and each goes to a different person')}</div></div></section> <section class="logos" aria-label="Example tags"><div class="wrap"><p class="logos-label">Tags Sorter can put on an email, for example</p><ul><li>Billing</li><li>Bug report</li><li>Refund</li><li>Sales question</li><li>Account access</li><li>Feedback</li></ul></div></section> <section class="sec" id="features" aria-labelledby="features-h"><div class="wrap"><div class="sec-head"><h2 id="features-h">Every email, <em>in plain sight</em></h2></div><div class="tabs" data-tabs><div class="tablist" role="tablist" aria-label="Sorter features">${tabs.map((t,i)=><button role="tab" type="button" id="tab-${i}" aria-controls="panel-${i}" aria-selected="${i==0}" tabindex="${i?-1:0}">${ic(t[1])}${t[0]}</button>).join('')}</div>${tabs.map((t,i)=><div class="tabpanel" role="tabpanel" id="panel-${i}" aria-labelledby="tab-${i}"${i?' hidden':''}><div class="tab-words"><h3>${t[0]}</h3><p>${t[2]}</p></div><div class="tab-art">${t[3]}</div></div>).join('')}</div></div></section> <section class="sec" id="how" aria-labelledby="how-h"><div class="wrap"><div class="sec-head"><h2 id="how-h">From connected to <em>sorted</em> in three steps</h2></div><ul class="feat-list"> <li class="feat reveal"><span class="feat-n">01</span><h3>Connect your inbox</h3><p>Link your support inbox and start the free trial.</p></li> <li class="feat reveal"><span class="feat-n">02</span><h3>Write your rules</h3><p>Say who gets what in plain words your whole team can read.</p></li> <li class="feat reveal"><span class="feat-n">03</span><h3>Let it sort</h3><p>New emails are tagged and routed, and common questions get a reply.</p></li></ul></div></section> <section class="sec" id="pricing" aria-labelledby="pricing-h"><div class="wrap"><div class="sec-head"><h2 id="pricing-h">Simple <em>plans</em> for small teams</h2></div><ul class="tiers"> <li class="tier reveal"><h3>Starter</h3><p class="tier-blurb">For one shared inbox.</p><p class="tier-price"><span class="amount">$19</span><span class="per">/ month</span></p><a class="btn btn-ghost" href="#cta">Start free trial</a><ul class="ticks">${tick('1 inbox')}${tick('Rules anyone can read')}${tick('Auto-replies for common questions')}${tick('Weekly report')}</ul></li> <li class="tier reveal featured"><p class="tier-flag">For growing teams</p><h3>Team</h3><p class="tier-blurb">For teams with several inboxes.</p><p class="tier-price"><span class="amount">$79</span><span class="per">/ month</span></p><a class="btn btn-primary" href="#cta">Start free trial</a><ul class="ticks">${tick('10 inboxes')}${tick('Rules anyone can read')}${tick('Auto-replies for common questions')}${tick('Weekly report')}</ul></li></ul></div></section> <section class="sec faq" id="faq" aria-labelledby="faq-h"><div class="wrap faq-in"><div class="sec-head"><h2 id="faq-h">Questions</h2></div><div class="faq-list">${faq.map((f,i)=><details class="reveal"${i?'':' open'}><summary>${f[0]}${ic('M12 5v14M5 12h14')}</summary><p>${f[1]}</p></details>).join('')}</div></div></section> <section class="sec" id="cta" aria-labelledby="cta-h"><div class="wrap"><div class="cta-box reveal"><h2 id="cta-h">Stop sorting email <em>by hand</em></h2><p>Connect your inbox and start your free trial.</p><div class="hero-ctas"><a class="btn btn-primary" href="#">Connect your inbox${ic('M5 12h14M13 6l6 6-6 6')}</a></div></div></div></section> </main> <footer class="foot"><div class="wrap foot-in"><div class="foot-brand"><a class="brand" href="index.html">${logo}<span>Sorter</span></a><p>Support emails, tagged and sent to the right person.</p></div> <nav class="foot-col" aria-label="Product"><h2>Product</h2><ul><li><a href="#features">Features</a></li><li><a href="#how">How it works</a></li><li><a href="#pricing">Pricing</a></li></ul></nav> <nav class="foot-col" aria-label="Help"><h2>Help</h2><ul><li><a href="#faq">Questions</a></li><li><a href="#">Contact</a></li></ul></nav> <nav class="foot-col" aria-label="Legal"><h2>Legal</h2><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav></div> <div class="wrap foot-small"><p>© <span data-year>2026</span> Sorter</p></div></footer> <script src="script.js" defer></script> </body> </html> ; fs.writeFileSync('./index.html',html); EOF node /tmp/gen.mjs && node ./.claude/skills/automation-flow-landing-page/scripts/check.mjs ./index.html --out ./check 2>&1 | tail -30
16. /tmp/gen.mjs
17. node /tmp/gen.mjs .
18. node ./.claude/skills/automation-flow-landing-page/scripts/check.mjs ./index.html --out ./check 2>&1 | tail -30
19. ./check/1440.png
20. ./check/390.png
21. Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 2 min 27 s · $0.53 of API use