Skip to content
Get packs

Funnel Infographic

Turns stage-by-stage conversion numbers into a 9:16 funnel infographic in HTML.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent can turn a list of 3 to 6 ordered steps with counts (for example visitors, sign-ups, trials, paying customers) into a single HTML image shaped like a funnel. Each step shows its absolute number, its conversion rate from the previous step, and a short insight at the bottom about where the biggest drop-off happens. The skill sets fixed colour themes, fonts, sizes and a vertical 9:16 layout suited to Instagram Stories or Xiaohongshu.

Great for

  • Marketers who want a shareable funnel graphic for social media from existing conversion numbers
  • Founders or analysts presenting sign-up-to-paid conversion in a visual format
  • Recruiters or educators who want a hiring or enrolment funnel shown as a graphic

Skip it if

  • Analysis that needs real data pulled from analytics tools; the skill only formats numbers you provide, so wrong inputs produce a wrong-looking funnel
  • Charts other than funnels (pie or bar charts); the skill explicitly forbids them
  • Projects needing a non-vertical or non-HTML output, since the layout and output contract are fixed to a single HTML file at 9:16

Try asking

  • “Make a 5-stage SaaS funnel infographic from these numbers: 100,000 visitors, 18,500 sign-ups, 6,200 trials, 1,450 paid, 920 retained at 30 days”
  • “Create a vertical sunset-amber funnel graphic for our restaurant's reservation-to-visit conversion”
  • “Build a deep-forest hiring funnel showing applications, interviews, offers and hires for Instagram Story”
Step-by-step guide: how to use Funnel InfographicInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    info-funnel.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip info-funnel.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip info-funnel.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give absolute counts for each stage rather than only percentages; the skill defaults to 100,000 at the top if you only supply percentages, which may not match your real numbers.
  • Name the theme you want (klein-blue, sunset-amber or deep-forest) so the colours match your industry.
  • Keep to 3 to 6 stages; the skill says more than 6 should be split into two graphics.

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.