info-funnel
3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书
Profile →npx skills add nexu-io/html-anything --skill info-funnel --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
【模板: 漏斗信息图（Funnel Infographic）】 【意图】把"从大到小"的转化 / 筛选 / 损耗过程一眼看清。**宽顶（输入）→ 窄底（结果）**, 每一阶有明确的"剩多少"和"漏多少"。典型场景：marketing funnel（曝光→点击→注册→付费）、招聘漏斗（投递→面试→录用→入职）、决策漏斗（候选→筛选→敲定）。 【数据形态】 输入应是有序的 **3-6 个阶段** + 每阶的绝对数值（人数 / 件数 / 金额）。可选每阶名称、说明、单位。若用户只给了百分比, 默认顶端 = 100% / 10000 人。 ``` 阶段 1: 100,000 名访客 阶段 2: 18,500 名注册（18.5%） 阶段 3: 6,200 名启动试用（33.5%） 阶段 4: 1,450 名转付费（23.4%） 阶段 5: 920 名 30 天留存（63.4%） ``` 【布局规则】 | 区域 | 内容 | 占比 | |---|---|---| | **Hero 顶部**（约 15%） | 标题（≤ 20 字, 22-32px CJK）+ 副标题 / 时间窗口（灰色 14-16px） | 上 15% | | **漏斗主体**（约 65%） | 3-6 个梯形 stage, 每段含：左大数字（48-72px tabular-nums）+ 右阶段名（18-22px bold）+ 右二行说明（13-15px 灰）+ 段间小箭头标转化率 | 中 65% | | **底部 stat strip**（约 20%） | 累计转化率（最大字号 80-120px）+ 1-2 句洞察文本（漏出最严重的环节 / 关键提示） | 下 20% | 【漏斗实现】 用 **CSS `clip-path: polygon()`** 切梯形, 不用 SVG： - 每段 stage 是一个 `<div>`, 设固定 height（120-200px）+ 不同 clip-path - clip-path 的左右收缩量 = 50% × `(1 - bottom_width_ratio)`, 累计每段比上一段窄 - 每段背景色用同一 hue 不同 lightness, 顶端最饱和, 底端最深（accent → ink） - 阶段之间有 4-8px gap, 让"流动"感更明显 - 数字用 `font-variant-numeric: tabular-nums`, letter-spacing `-0.02em` 【主题色 — 三选一, 不许混】 | 主题 | 适用 | 顶端 | 底端 | ink | paper | |---|---|---|---|---|---| | **klein-blue**（默认） | 商业 / SaaS / AI 产品 | `#4F7BD8` | `#002FA7`
What does the info-funnel skill do?
3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书
How do I install it?
Run `npx skills add nexu-io/html-anything --skill info-funnel --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/html-anything, a repository with 8,084 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.