info-funnel

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：

• 每段 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	#0A0A0A	#FAFAF8
sunset-amber	零售 / 消费 / 餐饮	#FBB040	#C73E1D	#0A0A0A	#FFF8EC
deep-forest	招聘 / 教育 / 健康	#56A06E	#1F4D2E