소스 정보
- 저장소
- nexu-io/html-anything
- 최근 소스 활동
- 2026년 7월 3일 02:54
- 감지된 SKILL.md 언어
- 중국어
- 스타
- 8,339
- 포크
- 815
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
메뉴
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/nexu-io/html-anything --skill info-funnel명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| 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 独立编写。