1实现原理 · 为什么它能做到
漏斗形状不是画出来的而是算出来的：每段是一个 div，用 CSS clip-path polygon 切梯形，左右收缩量 = 50% × (1 - bottom_width_ratio)。
next/src/lib/templates/skills/info-funnel/SKILL.md
- clip-path 的左右收缩量 = 50% × `(1 - bottom_width_ratio)`, 累计每段比上一段窄
注：正文直接给出 5 阶时 100→86→72→58→44→30% 的逐段宽度表与 polygon 公式，并说明 3-4 阶放宽到 40-45%、6 阶压到 22-25%。示例 data-i=1..5 的 polygon 与该表逐段吻合。
数据规范是硬约束：顶端 = 100% 基准、每阶转化率 = 当前段/上一段、累计 = 末段/顶段、千分位半角逗号、百分比 1 位小数。
next/src/lib/templates/skills/info-funnel/SKILL.md
- 每阶转化率 = `当前段 / 上一段`
注：示例 example.md 给 100,000→18,500→6,200→1,450→920，示例 footer 落 0.92% 累计，与规范公式逐项对得上。
主题三选一不许混：klein-blue（默认）/ sunset-amber / deep-forest；示例用默认 klein-blue 全套色阶。
next/src/lib/templates/skills/info-funnel/example.html
--kb-6: #002FA7;
注：色阶 --kb-1..--kb-6 从 #6A8FE0 收敛到 #002FA7，顶端最浅、底端最饱和，正是正文「accent → ink」的要求。
输出契约全批最严：单文件 HTML、inline CSS、不写 JS、不外链 CDN / 图标库 / 字体文件，并禁用 Inter 字体。
next/src/lib/templates/skills/info-funnel/SKILL.md
输出**单文件 HTML**, inline CSS, **不写 JS**（静态图）。**不外链 CDN / 图标库 / 字体文件**。
注：示例实测零 URL——这是本批唯一「正文禁外链且示例自证」的模板。
模板本体就是 prompt：SKILL.md 正文经 loader 读出后与共享前言、用户内容拼装，交给本机 agent CLI 执行。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：运行时不吃模板目录里的代码：/api/convert 只收 {agent, templateId, content}，用 loadSkill(templateId) 取 SKILL.md 正文当 prompt 主体，再交给本机已登录的 agent CLI；HTML 由 stdout 流回前端。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
注：文件系统里的 skill 只是文本：loader 逐个目录读 SKILL.md，frontmatter 抽成 picker 元数据、正文作为 body 返回；本模板目录内没有任何模块被 import 或执行。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
注：共享前言在模板正文之前注入，规定「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」——所以本模板里的版式清单是「可复用版式池」，不是页数/帧数上限。
共享前言先于模板注入，把「模板只定义版面/风格/配色/字体/组件库，数量由用户内容决定」定为最高优先级。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
注：前言明令禁用文件系统工具、要求纯 HTML 从回复正文流式输出，落盘由前端负责——skill 侧因此没有写盘行为。
skill 目录是纯文本资产：loader 读盘取 SKILL.md 正文，目录内无任何可执行代码被加载。
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
注：目录里的 example.html 是随仓库分发的黄金样本，预览路由直接读盘返回（无构建、无编译），既是质量基线也是详情页素材。
2核心能力
013-6 阶递减漏斗（clip-path 梯形，无 SVG）
02阶段内视觉层级：左大数字 / 右阶段名 / 右二行说明
03底部 stat strip：累计转化率大字 + 1-2 句洞察
04三段式版面占比（Hero 15% / 漏斗 65% / strip 20%）
05数据规范：千分位、1 位小数、单位灰字、顶端为 100% 基准
06三套主题色卡（klein-blue / sunset-amber / deep-forest）
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 与宿主壳共享前言的 CDN 条款冲突 — 前言要求引 Tailwind/Google Fonts，本模板禁外链；若模型服从前言，产物会带外链，与「不外链」条款矛盾。需要绝对离线时应在用户内容里重申。
- 审美禁令较强（禁 Inter/禁图表/禁 logo/禁 3D 阴影） — 用户若想要品牌 logo 或多指标对比图会被违背；正文明确「一篇一个漏斗」「不要超过 6 阶」，多序列需拆图。
- 数值口径由用户决定，模板不校验 — 若输入百分比与绝对数不自洽，页面照画；建议按正文「先定顶端 = 100%」的约定整理输入。
🟢 绿色（风险提醒：绿色，放心使用）。判级对象＝skill 自身目录：目录内出现的 URL 仅 https://github.com/JimLiu/baoyu-skills、https://github.com/JimLiu/baoyu-skills#baoyu-infographic —— 全部在 example.html（产物示例）或 frontmatter 出处标注里，SKILL.md 正文无一处要求运行期外发。目录内只有 SKILL.md、example.html、example.md，零脚本、零可执行代码、零网络端点、零凭证读取、零写盘指令——照 SKILL.md 执行的结果是宿主模型输出一段 HTML 文本，不含任何外发或落盘动作。宿主壳与产物使用侧行为不作为档位依据，只记入 verdict.risks：shared.ts 前言要求产物引 Tailwind CDN(https://cdn.tailwindcss.com) 与 Google Fonts、runtime 会 spawn 本机已登录的 agent CLI（envFor 透传 process.env）、预览 iframe 为 sandbox="allow-scripts allow-same-origin"。
5第二遍独立确认
- [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 出处标注；正文未要求运行期外发）
6结论
适合：marketing / 招聘 / 决策漏斗的竖屏信息图（IG Story、小红书、朋友圈长图）；需要数字准确、版式锐利、零外链交付时最合适。
不适合：多指标对比（柱状/饼图场景，正文明确禁图表）、需要 logo/图标装饰的品牌稿、需要交互的网页（正文明确不写 JS）、超过 6 阶的复杂流程（正文要求拆图）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 info-funnel.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent3b1b1c41295766e9…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE 文件为 Apache License Version 2.0；package.json "license": "Apache-2.0"；GitHub API spdx_id Apache-2.0）
本站信息
收录日期2026-09-06
分类文档与知识
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。