1仕組みと動作原理
本skillは実行可能プログラムではなく、プレーンテキストのプロンプトテンプレートです。ホストが正規表現でSKILL.mdのYAML frontmatterを解析し、本文bodyをプロンプトのメインテキストとして読み込みます。
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
リポジトリ自身のディレクトリ規約に関する説明：「SKILL.md — frontmatter (id, scenario, tags, …) + prompt body」、および「Adding a template = adding a folder. No TS code change required」— テンプレートはディレクトリ規約によって登録されます。リポジトリ全体のTS/TSX内に "prototype-web" のハードコード参照は一切なく、本テンプレートに対する特別なコード分岐は存在しません。
テンプレート本文は単独で実行されず、最終プロンプトの「テンプレート部分」に組み込まれます：共有デザイン指示 + 本テンプレート本文 + ユーザーコンテンツ。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
shared.tsのassemblePromptには、「Wrap a per-template instruction body with the shared design directives and the user content tail.」と記載されています。リクエストはまずconst skill = loadSkill(templateId);経由で本ディレクトリのbodyを取得した後に組み立てられます。
グローバルの「コンテンツ駆動型の数量」ルールがテンプレート内のあらゆる数値をオーバーライドします：テンプレートはレイアウト／スタイル／配色／コンポーネントライブラリのみを定義し、出力の長さを定義しません。
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
このルールは「最高優先度であり、テンプレート内のあらゆる数値をオーバーライドする」と明記されており、スライド系テンプレートの「6〜10枚」といった数値も「短いサンプルにおける参考下限値とみなす」と記載されています。したがって、本テンプレートが提供するのは利用可能なレイアウトと制約であり、ページ数の上限ではありません。
成果物の形式はグローバルな厳格な制約を受けます：単一ファイルHTML、コードフェンスなしの純粋なHTML、最初の文字は必ず<であること、およびファイル書き込みの禁止（フロントエンドがstdoutをキャプチャ）。
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
同一箇所に「Write / Edit / MultiEdit / Bash / Create / ファイルシステムツールの使用を一切禁止する」とも明記されています。ファイルのディスク保存はホストのフロントエンドが担当し、テンプレート側から書き込み動作が発生することはありません。
frontmatterのメタデータがセレクターUIの表示（中国語名／英語名／emoji／説明／カテゴリ／シナリオ／アスペクト比／タグ／サンプルメタデータ）を駆動します。
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
本テンプレートのメタデータ：category=prototype、scenario=design、aspect_hint=1440×900 デスクトップ（featuredなし、セレクターではおすすめバケットの後に配置）。セレクターはcategory/scenarioごとにグループ化され、featured順にソートされますが、これらはすべてfrontmatterによって決定され、コード側の特例処理はありません。
同梱のサンプルアセットは2つの読み取り専用APIを通じてフロントエンドに公開されます：example.htmlはそのままiframeに返され、example.mdは「プレビュー」ボタンの入力コンテンツとして機能します。
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
example.htmlのレスポンスヘッダーはContent-Type: text/html; charset=utf-8です。別のルーティングではcontent: skill.exampleMd ?? ""としてサンプルテキストをクライアントに渡します。本ディレクトリの内容：example.md（651バイト）およびexample.html（13472バイト）。
実行チェーン（テンプレートのコードではなくホスト側の動作）：ホストがローカルで認証済みのagent CLIをspawnし、組み立てられたプロンプトをstdin経由で渡し、stdoutからHTMLをストリーミング回収します。
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
子プロセスはcwd=process.cwd()（cwd: opts.cwd ?? process.cwd(),）で実行され、stdioはすべてパイプ接続されます。プロンプトはシェルの文字列連結ではなく、stdin/--message経由で渡されます（not interpolated into a shell command）。
テンプレートは「ページセクションリスト + 各セクションの要点」を提供し、モデルがセクションごとに内容を埋めます。Pricingは任意（オプション）とマークされており、ビジネスに応じたブロックの削減が許容されています。
next/src/lib/templates/skills/prototype-web/SKILL.md
- Sections: Top Nav (logo + 导航 + CTA 按钮)
pricing-pageと相互補完の関係にあります：本テンプレートはサイト全体の骨格（Pricingは必要最小限に留める）であり、pricing-pageは料金ページの深掘りを行います。
レスポンシブとインタラクションの両方に実装アプローチが提示されており（md:ブレークポイント、ピュアCSSの登場アニメーション、detailsアコーディオン）、「プロトタイプらしく見せる」2大要素（適応性とフィードバック）が仕様に組み込まれています。
next/src/lib/templates/skills/prototype-web/SKILL.md
移动端单栏, 桌面多栏
インタラクション項目のうち、スクロールによるnavの背景色変化には少量のJS（成果物内に自己完結）が必要ですが、その他（hover、details）はCSSまたはネイティブコントロールです。
「高忠実度／明日にも公開可能」は、全9件のテンプレートの中で最も率直な完成度への要求表現であり、共有指示の「ユーザーが提供した実際のデータを必ず使用すること」と相まって、プレースホルダー的な出力を抑制します。
next/src/lib/templates/skills/prototype-web/SKILL.md
- 这是高保真原型, 应该让人觉得"明天就能上线"。
example.md（651バイト）は架空の製品「Inkstack」を用いて一連の素材（位置づけ／機能／レビュー／価格／CTA）を提供しており、「どのような入力データを与えるべきか」の模範として活用できます。
2コア機能
01断片ではなく完全なランディングページを出力
02固定されたセクション骨格：Top Nav → Hero → Features → How → Social proof → Pricing（オプション） → Footer
03現代的なSaaSビジュアルトレンド（大きなタイポグラフィ／柔らかなグラデーション／グラスモーフィズム／登場アニメーション、ピュアCSS）
04レスポンシブブレークポイントの要件（モバイル1カラム／デスクトップ複数カラム、最低限md:）
05インタラクションの詳細：スクロール時のnav色変化、機能カードのhover浮き上がり、FAQアコーディオン
06完成度基準：「明日にも公開できると思わせるレベル」
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの宣言: ディレクトリ内にネットワークリクエストのコードは一切ありません。同梱のexample.htmlは<head>内でhttps://cdn.tailwindcss.comを参照しています（サンプル成果物の外部リンク、
監査ノート： 。判定基準：本skillディレクトリ（SKILL.md + example.html/example.md）のみを判定対象とし、ホストシェルや成果物の外部リンクは判定に含めません。ディレクトリ内にはスクリプトファイル、認証情報の読み込み、ディスク書き込み指示は一切なく、SKILL.mdが要求するランタイム外部リンクもありません（SKILL.md内のJSは成果物内インタラクションのみを指し、特定のCDN／フォント／APIは指定していません）。ディレクトリ内で実際に確認できるエンドポイントは、成果物の外部リンク1点のみです：example.htmlの<head>がcdn.tailwindcss.comを参照（同梱の静的サンプルであり、プレビュー時にブラウザによって読み込まれます）。説明目的のみで判定を変更しない補足2点：① ホストシェル（loader.ts → assemblePrompt → agents/invoke.tsがローカルCLIをspawn；claude引数に--permission-mode bypassPermissionsが含まれ、envForが{...process.env}で環境変数を透過）はホスト側の動作であり、verdict.risksに記載済み；② ホストが注入する共有デザイン指示が、成果物の<head>内でTailwind Play / Google Fontsを参照するよう要求しています（成果物の実行時外部リンクに該当）。
5二重目の独立検証
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 3 个文件：SKILL.md 与 example.html、example.md；无 scripts/、无 references 目录、无任何可执行文件（.sh/.py/.js/.mjs/.ts 零命中）。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描（api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.）：零命中；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板另有 example.html 的 cdn.tailwindcss.com 外链，已在该 example.html 原文中定位。
- [ok] 宿主执行链（供 security.reason / verdict.risks 使用，不参与判级） — prompt 经 stdin 送入被 spawn 的本机 CLI（invoke.ts），HTML 从 stdout 分流捕获；claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env；预览 iframe sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 / preview-pane.tsx:297）。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path=next/src/lib/templates/skills/prototype-web 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "nav 滚动变色"是否要求外部 JS 依赖 — SKILL.md 只写 "- 添加交互: nav 滚动变色; 特性卡 hover 浮起; FAQ 可手风琴展开"，未点名任何库或 CDN；example.html 除 Tailwind Play 外无其他脚本。
- [ok] example.md 的虚构品牌素材是否构成外部数据抓取 — example.md 是仓库内静态文本（Inkstack 的定位/特性/评价/价格），由 /api/templates/<id>/example 作为 JSON content 返回给前端，无抓取行为。
6結論
最適な用途： SaaSや製品ランディングページの高忠実度プロトタイプに最適：ナビゲーションからフッターまで揃っており、ブラウザ上でクリックして操作でき、デザインレビューのベース資料としても活用可能なページ向け。
不向きな用途： 料金ページのみを求める用途（pricing-pageを使用）や単一画面のデザイン（mobile-appを使用）には不向き。実際のバックエンド連携やフォーム送信を要するエンジニアリング要件には不向き（成果物は静的プロトタイプ）。ピクセル単位で厳密に固定されたブランドガイドラインが求められる環境にも不向き（テンプレートは「現代的SaaSトレンド」といった方向性の指定に留まる）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload prototype-web.tar.gz
sha256:
Option B · Copy Guide for Agent6423f76bc45f7834…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.