デザイン&モーション · nexu-io/html-anything

deck-guizang-editorial

電子雑誌 × E-ink;10種類のレイアウト + 5つのカラーパレット (インク/藍磁器/森林インク/クラフト紙/砂丘)

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License, Version 2.0;GitHub API license.spdx_id = Apache-2.0;模板目录内无独立 LICENSE 文件)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

カラーパレットは単に「いくつかの色を選ぶ」のではなく、5組の4色役割システム(ink / paper / paper-tint / ink-tint)であり、各セットが使用シナリオに紐づけられ、Hex値の変更や混用が固く禁じられています。Hexを1つ変えるだけで、全体の印刷感が損なわれます。

next/src/lib/templates/skills/deck-guizang-editorial/SKILL.md
- 🖋 **墨水经典 Monocle** — ink `#0a0a0b`, paper `#f1efea`, paper-tint `#e8e5de`, ink-tint `#18181a`. 默认 / 通用商业 / 科技。
「配色」を妥協のないロールシステムへと引き上げている点が、本テンプレートにおける最も強固な制約です。

レイアウトプール L01〜L10 は「カセットテープ式」の再利用可能なリストです。ページ数はユーザーのコンテンツ量によって決まり、同じレイアウトを別セクションで再利用可能です。短いコンテンツは6〜12枚から開始し、長いコンテンツはより多くのページを割り当てます。

next/src/lib/templates/skills/deck-guizang-editorial/SKILL.md
【布局 — 10 个磁带式版式池, 可复用; **数量由【用户内容】决定**, 完整覆盖每个要点; 短内容 6-12 张起步, 长内容应更多 (同一版式可在不同章节重复使用)】
ホスト側の共有指示である「コンテンツ主導のページ数決定」と同じ方向性です。テンプレートはレイアウトを提供し、ページ数はコンテンツに委ねられます。

ネガティブ制約も厳格に固定されています。グラデーション / drop-shadow / 角丸 / 円形装飾 / blur / SVGアイコンライブラリ / 絵文字装飾を厳禁とし、モデルの自律性に頼るのではなく「何をしてはいけないか」によって墨紙の印刷質感を担保します。

next/src/lib/templates/skills/deck-guizang-editorial/SKILL.md
- **严禁**: 渐变 / drop-shadow / 圆角 / 圆形装饰 / blur / SVG 图标库 / emoji 装饰。
禁止事項による制約は肯定的な記述よりもスタイルのブレを強力に防止します。これは同バッチのテンプレートの中で最も長い禁止リストです。

雑誌らしい質感は3つの微細なディテールが担っています。11px 大文字 + 0.12em 字間のキッカー(kicker)、右下のフォリオ(folio)「01 / 12」、上部の極細罫線(hairline rule)+ 定期刊行物ロゴ / トピックです。

next/src/lib/templates/skills/deck-guizang-editorial/SKILL.md
- **杂志感细节**: kicker 用 11px uppercase letterspacing 0.12em; folio 右下角 `01 / 12`; 顶部细 hairline rule + 期刊 logo / topic。
「印刷物のような質感」を実行可能なタイポグラフィパラメータに分解し、サンプルにおいて1つずつ具現化しています。

サンプルでは Tailwind CDN + 少量のカスタムクラスを用いて2つのレイアウト(L02 章扉 + L03 データグリッド)を表現しています。.paper / .ink の反転色、.display / .body-serif の明朝体、tabular-nums による .folio の等幅数字整列などを採用しています。

next/src/lib/templates/skills/deck-guizang-editorial/example.html
<!-- L03 Big Numbers Grid · paper -->
example_desc に「L02 Act Divider 章扉 + L03 Big Numbers Grid データグリッド」と明記されており、サンプルとメタデータが一致しています。

コンテンツの真正性もハードな制約事項です。データの捏造、Lorem ipsum、プレースホルダー画像URLを禁止し、すべての挿絵は純粋な CSS / インライン SVG による線画・面で描画する必要があります。

next/src/lib/templates/skills/deck-guizang-editorial/SKILL.md
- **不许**: 数据捏造、Lorem ipsum、占位图片 URL。所有图请用纯 CSS / SVG 内联描绘 (色块 + 简笔)。
サンプルに画像が一切含まれていない理由を説明しています。グラフィック機能は色面とシンプルな線画のみに限定されています。

出典と翻案:frontmatter の example_source_url は op7418/guizang-ppt-skill を指し、本文には「Inspired by op7418/guizang-ppt-skill Style A」と謝辞を記載。README には vendored である旨と元の LICENSE およびクレジット表記が維持されている旨が記されています。

README.md
`deck-guizang-editorial` is vendored directly from [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) with original LICENSE and authorship preserved.
これは同バッチ内で唯一、メタデータにサードパーティの出典を明記しているテンプレートです(サイト詳細ページのソース欄に対応)。

ランタイム実行はホスト側が担います。テンプレートディレクトリ内には実行可能ファイルが一切存在せず、プロンプトは assemblePrompt によって組み立てられた後、ローカルの agent CLI に渡されます。

next/src/lib/templates/shared.ts
export function assemblePrompt(opts: {
スキル本体は純粋なプロンプトとサンプル素材のみで構成されています。

2コア機能

01ナラティブ / オピニオン / 個人的スタイルの表現向け(墨紙の印刷感、テクノロジー感は排除)
025組のカラーパレット × 4色の役割分担(Hex変更・混用の禁止)
03L01 Hero Cover 表紙(中央揃え大見出し + kicker + subtitle + lead + 下部メタデータ)
04L02 Act Divider 章扉(8.5〜10vw の巨大フォント、ink↔paper 反転に対応)
05L03 Big Numbers Grid データグリッド(3×2 データカード)
06L06 Pipeline / Flow(横方向の番号付きステップ、キーボードによる順次進行に対応)
07L08 Big Quote(5.8vw 明朝体引用 + 英語訳 + 署名 + 日付)
08キーボード ← / → 切り替え + URL hash 同期 + 単一ファイル HTML
09フォリオの数字整列(tabular-nums)と定期刊行物スタイルのヘッダー

3外部依存関係

KindDependency / Endpoint
networkGoogle Fonts(Playfair Display / Inter / Noto Serif SC / Noto Sans SC)
networkTailwind Play CDN(出现在产物示例 example.html 的 <script src>)
network第三方 skill 来源标注(frontmatter example_source_url,仅作出处记录,非运行时调用)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部影響は一切ありません。
監査ノート: 判定対象=スキル自身のディレクトリ(next/src/lib/templates/skills/deck-guizang-editorial/)。ディレクトリ内には SKILL.md、example.html、example.md のみが存在し、.sh/.py/.mjs/.ts などの実行可能ファイル、package.json、インストールスクリプトは存在しません。認証情報、環境変数、Cookie を読み取るコードは含まれず、ディスク書き込み指示もありません(HTML はモデルによって返答本文に出力され、ファイル保存はホストのフロントエンドが担当します)。サンプル内の <script> タグ数=1(example.html×1)。SKILL.md は純粋なレイアウト・コンテンツ仕様であり、実行時にアクセスする生成バックエンドや API は一切指定されていません。第4バッチの判定基準(生成物の外部参照は評価対象外、純粋な指示テンプレートは green 判定)に基づき、本テンプレートは純粋指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下のもののみです(いずれも生成物サンプルまたはそのメタデータに属し、ブラウザ側から取得されるもので、スキルコードが発起したものではありません):cdn.tailwindcss.com(example.html に記載)、fonts.googleapis.com(example.html に記載)、github.com(SKILL.md に記載)。ホスト側の挙動は評価対象外とし、verdict.risks に別途記載しています:convert ルートがローカル agent CLI を spawn して stdin 経由でプロンプトを渡す処理(next/src/lib/agents/invoke.ts)、共有指示による CDN 経由の Tailwind / Google Fonts 読み込み(next/src/lib/templates/shared.ts)、プレビュー用 iframe の sandbox="allow-scripts allow-same-origin" の設定(next/src/components/template-picker.tsx)。

5二重目の独立検証

  • [discrepancy] README 称 vendored 保留原 LICENSE,但该目录内是否有 LICENSE 文件 — 该 pin 的 next/src/lib/templates/skills/deck-guizang-editorial/ 下只有 SKILL.md、example.html、example.md,没有 LICENSE(deck-swiss-international/ 同样只有这三个文件)。README 的「original LICENSE ... preserved」在本 commit 未落到目录内;署名则保留于 frontmatter example_source_* 与正文致谢。
  • [ok] 「10 个版面」是否在 SKILL.md 内真实列全 — 正文 L01-L10 十条齐备(Hero Cover / Act Divider / Big Numbers Grid / Quote+Image / Image Grid / Pipeline / Hero Question / Big Quote / Before-After / Mixed Media)。
  • [ok] 5 套调色板是否都给全 hex — 墨水经典 / 靛蓝瓷 / 森林墨 / 牛皮纸 / 沙丘各给 ink、paper、paper-tint、ink-tint 四个 hex(如墨水经典 #0a0a0b / #f1efea / #e8e5de / #18181a)。
  • [ok] 「严禁改 hex」是否与示例一致 — 示例 .paper{background:#f1efea} 与 .ink{background:#0a0a0b} 正是墨水经典 Monocle 的 paper / ink 值,色值未被改动。
  • [ok] 目录内是否有脚本 / 凭证读取 / 写盘 — 三个文件均为文本;无 .sh/.py/.mjs,无 env 或凭证访问,无写盘代码。端点仅字体与 Tailwind CDN(见 security.reason)。
  • [ok] 是否存在 WebGL / 动态描述被夸大 — 本模板未声称 WebGL 或动态效果;示例为静态双页展示,无需 JS 即成立。
  • [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699;skill.path = next/src/lib/templates/skills/deck-guizang-editorial,含 SKILL.md。

6結論

  • スタイルの制御性が極めて高い
  • ナラティブの全工程を網羅するレイアウトプール
  • 出典およびサンプルのメタデータが完備
  • 比較検証しやすい入力サンプルを内蔵
  • コンテンツの真正性に対する二重の規律
  • 最適な用途: ブランドストーリー、オピニオン記事、業界考察、個人の表現、編集スタイルの共有に最適。「印刷雑誌 / 電子ペーパー」のトーンを求め、グラデーションやアイコンを使わないデザインを受け入れられるシナリオ向け。10種類のレイアウトプールは、長文にリズムを持たせたスライドへ分割するのにも適しています。
    不向きな用途: ハイテク感、データダッシュボード、新製品発表会には不向き(テンプレートで「テクノロジー感は不要」と明記)。グラフやアイコンを多用するレポートには不向き(SVGアイコンライブラリやプレースホルダー画像は禁止、色面と線画のみ)。アニメーションやインタラクティブなデモが必要な用途には不向き(サンプルは静的な2ページ構成)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-guizang-editorial.tar.gz
    sha256: 6176059da9e335cc…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.