Menú
3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
把 outline 1:1 铸成色块大字宣言 deck, 原文不动只做美化。三档主题 black / red / yellow
定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
Decision needed + recommendation + evidence + tradeoffs, 把复杂材料压成可拍板的一页
假设 + 指标 + 结果 + 解释 + 决策, 把 A/B 或产品实验转成行动建议
Substack / Medium 高级感长文排版, 适合公众号、博客发布
| name | info-funnel |
| zh_name | 漏斗信息图 |
| en_name | Funnel Infographic |
| emoji | 🪣 |
| description | 3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书 |
| category | data |
| scenario | marketing |
| aspect_hint | 1080×1920 (9:16) 竖屏 |
| tags | ["funnel","conversion","漏斗","转化率","marketing","infographic","social","story"] |
| example_id | sample-info-funnel-saas |
| example_name | 漏斗信息图 · SaaS 注册转化 |
| example_format | markdown |
| example_tagline | 5 阶 · 米白 + Klein Blue · 大数字 + 转化率 |
| example_desc | 访客 → 注册 → 试用 → 付费 → 留存 5 步漏斗, 左侧绝对数右侧阶段转化率, 底部累计漏出洞察 |
| example_source_url | https://github.com/JimLiu/baoyu-skills#baoyu-infographic |
| example_source_label | baoyu-skills · infographic/funnel |
【模板: 漏斗信息图（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：
<div>, 设固定 height（120-200px）+ 不同 clip-path(1 - bottom_width_ratio), 累计每段比上一段窄font-variant-numeric: tabular-nums, letter-spacing -0.02em【主题色 — 三选一, 不许混】
| 主题 | 适用 | 顶端 | 底端 | ink | paper |
|---|---|---|---|---|---|
| klein-blue（默认） | 商业 / SaaS / AI 产品 | #4F7BD8 | #002FA7 | #0A0A0A | #FAFAF8 |
| sunset-amber | 零售 / 消费 / 餐饮 | #FBB040 | #C73E1D | #0A0A0A | #FFF8EC |
| deep-forest | 招聘 / 教育 / 健康 | #56A06E | #1F4D2E | #0A0A0A | #F4F0E6 |
文字色：
#FFFFFF）#0A0A0A）rgba(10,10,10,0.55)【字体栈】
"PingFang SC", "Heiti SC", "Helvetica Neue", "Arial", -apple-system, sans-serif
数字（tabular-nums 必须）：
"SF Mono", "JetBrains Mono", "Menlo", "Roboto Mono", monospace
禁用 Inter —— 它太"AI 默认味"。优先 PingFang SC（CJK）+ Helvetica Neue（拉丁）。
【字号 / 间距锁死】
clamp(28px, 2.8vw, 36px) font-weight 800 letter-spacing -0.02em14-16px font-weight 500 ink/0.6clamp(48px, 5.5vw, 72px) tabular-nums font-weight 900 white20-22px font-weight 700 white13-15px font-weight 400 white/0.8513px font-weight 700, paper 底 ink 字, 圆角 6px, padding 2px 8pxclamp(80px, 12vw, 120px) font-weight 900 ink letter-spacing -0.04em16-18px font-weight 500 ink/0.75 max-width 80%6vmin 7vmin6px32-48px48-64px【输出契约】
输出单文件 HTML, inline CSS, 不写 JS（静态图）。不外链 CDN / 图标库 / 字体文件。
aspect-ratio: 9 / 16 锁定容器, 内容用 flex column 填充【数据规范】
当前段 / 上一段末段 / 顶段【洞察文本（底部 strip）】
写 1-2 句, 总长 ≤ 60 字：
禁止 AI 文案腔（"通过本图表可以看出"、"由此可见"、"综上所述"）。直接说事实。
【分阶段视觉宽度计算】
5 阶时, top_width=100%, bottom_width=30%（漏斗收口）。每段 bottom_width 比上一段窄 (100-30)/5 = 14%。例如：
clip-path 公式（每段独立 div）：
clip-path: polygon(
{(100-top)/2}% 0%,
{100-(100-top)/2}% 0%,
{100-(100-bottom)/2}% 100%,
{(100-bottom)/2}% 100%
);
3-4 阶时收口可以放宽到 40-45%, 6 阶时压到 22-25%。
【禁区】
【致谢】 本 skill 设计参考 baoyu-skills · baoyu-infographic 的 funnel layout 规范, 视觉补完 + HTML 实现由 html-anything 独立编写。