1仕組みと動作原理
ファネルの形状は描画ではなく計算によるもの：各段を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 を示し、フッターで累積 0.92% を算出しており、仕様の計算式と項目ごとに整合しています。
テーマは3つの中から1つを選択し混用不可：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、インライン CSS、JS 記述禁止、外部 CDN / アイコンライブラリ / フォントファイルのリンク禁止、Inter フォント使用禁止。
next/src/lib/templates/skills/info-funnel/SKILL.md
输出**单文件 HTML**, inline CSS, **不写 JS**（静态图）。**不外链 CDN / 图标库 / 字体文件**。
サンプルの実測で URL はゼロ件であり、当バッチ内で唯一「本文で外部リンクを禁止し、サンプルで自ら実証している」テンプレートです。
テンプレート自体がプロンプト：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 本文を取得してプロンプトのメインとし、ローカルでログイン済みの 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 をピッカーのメタデータとして抽出し、本文を body として返します。当テンプレートディレクトリ内からインポートまたは実行されるモジュールはありません。
共通の前置きはテンプレート注入前に適用され、「テンプレートはレイアウト／スタイル／配色／フォント／コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」ことを最優先事項とする。
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段階内の視覚的階層：左側に大きな数値／右側に段階名／右側2行目に説明文
03下部 stat strip：累積コンバージョン率の大文字表示 ＋ 1〜2文のインサイト
043分割レイアウト比率（Hero 15% / ファネル 65% / strip 20%）
05データ仕様：桁区切りカンマ、小数第1位、グレー表記の単位、最上段を 100% 基準とする
063系統のテーマカラーパレット（klein-blue / sunset-amber / deep-forest）
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部への影響はありません
監査ノート： 🟢 グリーン（安全）。判定対象＝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 がローカルマシンでログイン済みの agent CLI を spawn する点（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結論
最適な用途： マーケティング／採用／意思決定ファネルの縦型インフォグラフィック（IG Story、小紅書、WeChat モーメンツの縦長画像）。正確な数値、シャープなレイアウト、外部リンクゼロでの成果物納品が求められる場合に最適。
不向きな用途： 複数指標の比較（棒グラフ／円グラフのシナリオ。本文でグラフを明示的に禁止）、ロゴやアイコン装飾を要するブランド資料、インタラクティブ性を要するウェブページ（本文で JS 記述を明示的に禁止）、6段階を超える複雑なプロセス（本文で画像の分割を要求）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload info-funnel.tar.gz
sha256:
Option B · Copy Guide for Agent3b1b1c41295766e9…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.