1仕組みと動作原理
この skill は実行可能プログラムではなく、「1ディレクトリ = 1テンプレート」の構成をとっています。SKILL.md の frontmatter はセレクター表示用であり、本文(body)はモデルに送信されるプロンプトそのものです。テンプレートの追加はディレクトリの追加と同義であり、TypeScript の改修は不要です。
routes rescan disk and the client refetches `/api/templates`.
実際に発行されるプロンプトは、プラットフォーム共有デザイン指示(SHARED_DESIGN_DIRECTIVES)+ 本 skill の SKILL.md 本文 + ユーザーコンテンツを assemblePrompt により1本のプロンプトへ結合したものです。
Wrap a per-template instruction body with the shared design directives and
完成稿はファイルシステムを経由しません。共有指示により Write/Edit/Bash などのファイル操作ツールの使用が明示的に禁止されており、モデルは HTML 全体を応答本文として直接ストリーミング出力することが求められます(stdout はフロントエンド側でキャプチャされ保存されます)。
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
本バッチ内で「最も制約が厳しい」テンプレートです。SKILL.md の「厳格なビジュアルシグネチャ — 変更不可」セクションにおいて、キャンバス、インク色、唯一のアクセントカラー、フォント、行高、禁止事項が完全に固定されています。
- **画布**: 暖羊皮纸 `#f5f4ed` (永远不用纯白 `#fff`)。次级背景 `#efeee5`。
単色アクセントの規律は検証可能な命題として記述されています。すべてのアクセントには単一の墨紺のみを使用し、多色の使用は厳禁とされています。
- **唯一色彩**: 墨蓝 `#1B365D` ——所有 accent (链接、tag 描边、重点数字、引用左 rule) 只能用这一个色, 严禁多色。
脱ダッシュボードの志向性がデザイン指針に明記されており、代替手法(影の代わりにヘアラインボーダーを使用)が提示されています。
- "Composed pages, not dashboards." 不要堆 KPI 卡, 不要堆 emoji 图标, 不要 hero gradient。
文書タイプに応じた8種類のレイアウト骨格(One-Pager / Long Doc / Letter / Portfolio / Resume / Slides / Equity Report / Changelog)を用意し、単一の固定レイアウトではなくユーザーの入力内容に応じて適切なものを選択します。
- **One-Pager** — 顶 logotype (Charter italic) + 标题 + lede + 3 列要点 + 底脚 metadata。
完成稿の技術的制約が本テンプレート内で再宣言されています:単一ファイル HTML、Tailwind CDN の利用、外部画像リンクの不使用、プレースホルダーは色ブロック+1pxの墨色ボーダーで構成すること。
- 单文件 HTML, 用 Tailwind CDN; 全文中英混排时加盘古之白; 不要外链图片, 占位用 paper-tint 色块 + 1px ink 描边。
完成稿サンプル自体が「組版された紙面」のような one-pager となっています:folio トップバー + kicker + 大見出し + 3列の pillar + フッターで構成され、すべて Tailwind クラスと4つのカラーコードのみで表現されています。
<span>KAMI · Open Design</span>
サーバー側の /api/convert が行うのは3つの処理のみです:templateId に基づきディスクから skill を読み込み、プロンプトを組み立て、ローカルの agent CLI を spawn して出力を SSE ストリームで転送します。
prompt = assemblePrompt({ body: skill.body, content, format });
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind CDN(SKILL.md 明令成稿引入;静态样式,不传数据、不需凭证) |
| network | Google Fonts(样例成稿的字体来源;离线回落本地衬线) |
| package | WeasyPrint(SKILL.md 提及的打印/PDF 渲染器名——决定「用 solid hex 不用 rgba」的设计取舍) |
4推奨統制措置と判定根拠
- SKILL.md: スクリプトの実行や外部への影響を伴わない、純粋なプロンプト指示および規則テキストのみで構成されています。
5二重目の独立検証
- [ok] 「暖羊皮纸 #f5f4ed(永远不用纯白 #fff)」 — 样例 body background: #f5f4ed;全文无 #fff 背景(tag 用 #efeee5)。
- [ok] 「唯一色彩墨蓝 #1B365D,严禁多色」 — 样例彩色只有 #1B365D(.ink-blue 与 tag 文字),其余为纸色/墨色/中性灰。
- [discrepancy] 「一种语言一种衬线(Charter / Source Serif Pro / Noto Serif SC)」 — SKILL.md 首选英文衬线是 Charter(fallback: Source Serif Pro),样例直接用 fallback 族名 'Source Serif Pro' 作主字体——符合「允许 fallback」的字面,但成稿与首选有差;且未加载 Charter。
- [discrepancy] 「绝不:drop-shadow / 圆角 ≥ 8px / 渐变 / rgba」 — 样例未用 drop-shadow/渐变/圆角,但正文段落用 style="color:#3a382f" 引入了 SKILL.md 墨色清单外的第四种文字色(清单只给 #1f1d18 主文与 #6b665b 次文);属轻微越界,不影响单色 accent 纪律。
- [ok] 成稿运行时外链(Tailwind CDN) — SKILL.md 明写「用 Tailwind CDN」,example.html 确有 <script src="https://cdn.tailwindcss.com"></script>;已在 external_deps 与 security.reason 逐条自证。
- [ok] 带 example.md 输入样例 — example.md 为 Open Design Studio Issue №26 的 markdown,与 example.html 内容一一对应(Berlin 坐标、Apache 2.0、四支柱)。
- [ok] 出处标注真实(非虚构来源) — frontmatter example_source_url = https://github.com/tw93/kami;README 第 490 行「模板来源」表同样映射 doc-kami-parchment ← tw93/kami,两处一致。
6結論
8d42d07c1757e428…