Home / All Skills / Docs & Knowledge / info-funnel
English (EN)简体中文 (ZH)日本語 (JA)
Docs & Knowledge · nexu-io/html-anything

info-funnel

A 3-6 stage decreasing funnel highlighting conversion rates, qualification ratios, and traffic drop-offs. Vertical layout suitable for IG Stories / Xiaohongshu.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE 文件为 Apache License Version 2.0；package.json "license": "Apache-2.0"；GitHub API spdx_id Apache-2.0）Commit 553ed98c28
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The funnel shape is calculated rather than drawn: each section is a div cut into a trapezoid using CSS clip-path polygon, with a lateral shrink amount = 50% × (1 - bottom_width_ratio).

next/src/lib/templates/skills/info-funnel/SKILL.md
- clip-path 的左右收缩量 = 50% × `(1 - bottom_width_ratio)`, 累计每段比上一段窄
The body text directly specifies the stage-by-stage width table for 5 stages (100→86→72→58→44→30%) and the polygon formula, explaining that 3-4 stages expand to 40-45% while 6 stages compress to 22-25%. The polygon in the example data-i=1..5 matches this table stage by stage.

Data formatting is a hard constraint: top tier = 100% baseline, stage conversion rate = current stage / previous stage, cumulative = final stage / top stage, half-width comma thousands separators, percentages rounded to 1 decimal place.

next/src/lib/templates/skills/info-funnel/SKILL.md
- 每阶转化率 = `当前段 / 上一段`
The sample example.md gives 100,000→18,500→6,200→1,450→920, and the sample footer ends with a 0.92% cumulative conversion, perfectly matching the specification formula item by item.

Pick one of three themes without mixing: klein-blue (default) / sunset-amber / deep-forest; the example uses the full default klein-blue color ramp.

next/src/lib/templates/skills/info-funnel/example.html
--kb-6: #002FA7;
The color scale --kb-1..--kb-6 converges from #6A8FE0 down to #002FA7, lightest at the top and most saturated at the bottom, exactly fulfilling the body text requirement of 'accent → ink'.

Strictest output contract in the batch: single-file HTML, inline CSS, no JS, no external CDN / icon libraries / font files, and Inter font is banned.

next/src/lib/templates/skills/info-funnel/SKILL.md
输出**单文件 HTML**, inline CSS, **不写 JS**（静态图）。**不外链 CDN / 图标库 / 字体文件**。
Testing the example shows zero URLs—this is the only template in the batch where 'the body text bans external links and the example self-proves it'.

The template itself is the prompt: the SKILL.md body is read by the loader, assembled with the shared preamble and user content, and passed to the local agent CLI for execution.

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
No code inside the template directory runs at runtime: /api/convert only receives {agent, templateId, content}, uses loadSkill(templateId) to extract the SKILL.md body as the prompt body, and hands it to the locally logged-in agent CLI; HTML streams back to the frontend via stdout.

The skill directory is a plain-text asset: the loader reads SKILL.md from disk, and no executable code inside the directory is loaded.

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
Skills in the file system are purely text: the loader reads SKILL.md from each directory, extracts frontmatter as picker metadata, and returns the body; no modules are imported or executed from within this template directory.

The shared preamble is injected before the template, giving highest priority to the rule: 'Templates only define layout/style/palette/typography/component library; quantity is determined by user content.'

next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
The shared preamble is injected prior to the template body, establishing that 'templates only define layout/style/palette/typography/component library; quantity is determined by user content'—thus the layout list in this template serves as a 'reusable layout pool' rather than a page/frame limit.

The shared preamble is injected before the template, giving highest priority to the rule: 'Templates only define layout/style/palette/typography/component library; quantity is determined by user content.'

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
The preamble explicitly prohibits file system tools and requires raw HTML streamed via reply body, leaving disk saving to the frontend—hence there is no disk-write behavior on the skill side.

The skill directory is a plain-text asset: the loader reads SKILL.md from disk, and no executable code inside the directory is loaded.

next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
example.html in the directory is a golden sample distributed with the repo; the preview route directly reads and serves it from disk (no build, no compilation), functioning both as a quality baseline and detail page asset.

2Core Capabilities

013-6 stage decreasing funnel (clip-path trapezoid, no SVG)
02Visual hierarchy within stages: large number on left / stage name on right / two-line explanation below right
03Bottom stat strip: large cumulative conversion rate text + 1-2 sentence insights
04Three-section layout proportions (Hero 15% / Funnel 65% / Strip 20%)
05Data formatting: thousands separator, 1 decimal place, gray unit text, top tier as 100% baseline
06Three theme color palettes (klein-blue / sunset-amber / deep-forest)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
  • SKILL.md: Pure prompt instructions and rule text; no script execution or external impact
Audit Notes: 🟢 Green. Evaluation target = the skill's own directory: The only URLs appearing in the directory are https://github.com/JimLiu/baoyu-skills and https://github.com/JimLiu/baoyu-skills#baoyu-infographic—all located in example.html (sample output) or frontmatter provenance citations, with no requirement anywhere in the SKILL.md body for runtime outbound calls. The directory contains only SKILL.md, example.html, and example.md—zero scripts, zero executable code, zero network endpoints, zero credential reading, and zero disk-write instructions. Executing per SKILL.md results in the host model generating an HTML text snippet without any outbound requests or disk-write operations. Host shell and artifact-usage side behaviors do not affect the rating tier and are only documented in verdict.risks: the shared.ts preamble requires artifacts to import Tailwind CDN (https://cdn.tailwindcss.com) and Google Fonts, the runtime spawns the locally logged-in agent CLI (envFor transparently passing process.env), and the preview iframe uses sandbox="allow-scripts allow-same-origin".

5Second-Pass Verification

  • [ok] 外链普查（正文禁 vs 示例） — example.html 零 http(s) 命中，正文「不外链 CDN / 图标库 / 字体文件」成立；字体栈为 PingFang SC / Heiti SC / Helvetica Neue，无 Inter（正文点名禁用）。
  • [discrepancy] 共享前言 vs 本模板正文冲突 — 宿主壳 shared.ts 前言要求「在 <head> 中通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts」，与本模板正文「不外链 CDN / 图标库 / 字体文件」直接冲突；该示例选择服从模板正文（零外链）。模型实际服从哪一条取决于权重，用户若要求绝对离线应在内容里重申。
  • [ok] clip-path 数值核算 — 正文 5 阶宽度表 100→86→72→58→44→30%，与示例 `.stage[data-i="1"]`…`[data-i="5"]` 的 polygon 逐段一致（93/7 即剩 86%，86/14 即剩 72%，依此类推）。
  • [ok] 数据核算（example.md ↔ example.html） — 18.5% = 18,500/100,000、33.5% ≈ 6,200/18,500、23.4% = 1,450/6,200、63.4% = 920/1,450；footer 累计 0.92% = 920/100,000，与正文「累计转化率 = 末段 / 顶段」一致。
  • [ok] 字号/样式锁死项抽查 — 示例命中 `aspect-ratio: 9 / 16`（正文锁 9:16 容器）与两处 `font-variant-numeric: tabular-nums`（正文要求数字必须等宽）。
  • [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html、example.md；无 scripts/、无 references/、无数据文件、无包管理器清单。
  • [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
  • [ok] 外链端点普查 — 目录内 URL：https://github.com/JimLiu/baoyu-skills、https://github.com/JimLiu/baoyu-skills#baoyu-infographic（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）

6Verdict & Scenarios

  • Recalculable layout engineering, keeping the funnel from distorting
  • Hard constraints on data accuracy, with strict bans on AI-sounding insights
  • Self-contained output: single file, no JS, no external links (self-proven by zero URLs in example)
  • Transparent provenance
    • Best for: Vertical infographics for marketing / recruitment / decision funnels (IG Stories, Xiaohongshu, WeChat Moments long images); ideal when numerical accuracy, crisp layout, and zero-external-link delivery are required.
    Not for: Multi-metric comparisons (bar/pie chart scenarios, explicitly prohibited in body), brand designs requiring logos/icon decorations, interactive web pages (JS explicitly banned in body), complex workflows exceeding 6 stages (body requests splitting into multiple graphics).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload info-funnel.tar.gz
    sha256: 3b1b1c41295766e9…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.