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

deck-swiss-international

16列グリッド + 単一の高彩度アクセント + 22種類の固定レイアウト (Klein Blue / Lemon / Mint / Safety Orange)

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(工作副本根目录 LICENSE 文件 = Apache License Version 2.0;GitHub API spdx_id=Apache-2.0。注意:skill 目录本身不含独立 LICENSE,许可来自仓库根;第三方来源模板在 README 另有署名说明)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本skillはhtml-anything向けの「テンプレートパック」です。frontmatterはセレクターがメタデータを取得するために使用され、SKILL.md本文(frontmatter以降のbody)はloaderによってそのまま読み出され、モデルへの指示として渡されます。

next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
本テンプレート本文は49行 / 4,865バイト(本バッチで最も重厚なテンプレート:4種のテーマ + 22種のレイアウト + 鉄則セクション)で構成され、frontmatterはparseFrontmatterによりfm/bodyに分割処理され、ディレクトリ内にスクリプトは一切関与しません。

実際にモデルへ入力されるプロンプトは、共通デザイン指示 + 本テンプレート本文 + 【入力フォーマット】 + 【ユーザーコンテンツ】で構成されます。共通指示には、テンプレート内のページ数/レイアウト数が上限ではないことを明記した上書きルールも含まれます。

next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
同一ファイル内にある直後の上書きルールには、テンプレートは「利用可能なレイアウト / スタイル / 配色 / フォント / コンポーネントライブラリ」を定義するのみであり、スライド / フレーム / カード / セクションの数は**定義しない**と一文字一句明記されています。

成果物の規律は共通指示によって厳格に拘束されます。エージェントによるファイルシステムツールの使用は一切禁止され、HTMLはstdoutテキストストリームとして出力され、フロントエンド側でディスクに保存される必要があります。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何
本テンプレート自体は保存方式を宣言しておらず、完全にこの共通制約に依存しています。

スタイルは「4つのテーマからの二者択一」で固定されます:Klein Blue (IKB) / Lemon Yellow / Lemon Green / Safety Orange。各セットにaccent+paper+inkの3色が定義され、混用やhex値の変更は固く禁じられています。

next/src/lib/templates/skills/deck-swiss-international/SKILL.md
- 🔵 **Klein Blue (IKB)** — accent `#002FA7`, paper `#fafaf8`, ink `#0a0a0a`. 商业 / AI / 设计场景。
本文ではさらに、Lemon系テーマのテキストは黒色必須、Safety Orangeのテキストは白色かつbold ≥ 600と規定されており、視認性がテーマ制約として明文化されています。

22種類の固定レイアウト(S01 Cover … S22 Image Hero)が再利用可能なレイアウトプールを構成します:フルスクリーンアクセントの表紙、KPI Towerの高柱、Duo Compareのビフォーアフター比較など。

next/src/lib/templates/skills/deck-swiss-international/SKILL.md
- **S06 KPI Tower** — 4 列变高蓝色柱状; 柱顶 icon; 柱底大数字 + 标签。
本文には「数量はコンテンツによって決定される」と記載されており、短いコンテンツなら6〜10枚から、長いコンテンツならそれを大幅に超えることができ、同一レイアウトを章をまたいで再利用することも可能です。

鉄則セクションによってスタイルが検証可能なルールとして明文化されています:直角のみ(border-radius: 0)、1pxヘアライン、16列グリッド、極端なフォントサイズ対比、数値の捏造禁止。

next/src/lib/templates/skills/deck-swiss-international/SKILL.md
- **只用直角**: 全程 `border-radius: 0`。圆角 = 立刻违反。
同セクションには「- **16列グリッド**: `grid-template-columns: repeat(16, 1fr); gap: 0`」や「- **捏造禁止**: 数値はユーザー入力から取得必須、グラフの柱の高さ = 実データの比率に基づく」という記述も含まれます。

サードパーティからの移植であり、著作者表記が保持されています:frontmatterにexample_source_url = op7418/guizang-ppt-skillが記録され、READMEのサードパーティソース一覧にも「Original LICENSE + authorship preserved」と同期して記載されています。

next/src/lib/templates/skills/deck-swiss-international/SKILL.md
example_source_url: "https://github.com/op7418/guizang-ppt-skill"
READMEには、本テンプレートが同アップストリームのSwissバリアント(Style B)であることも併せて記載されています。

2コア機能

0122種類の固定レイアウトプール(S01 CoverからS22 Image Hero)、数量はコンテンツ依存、章をまたいだレイアウトの再利用が可能
024つのテーマから選択 + 固定hexコード(Klein Blue #002FA7 / Lemon Yellow #FFD500 / Lemon Green #C5E803 / Safety Orange #FF6B35)
0316列グリッド(repeat(16, 1fr), gap: 0)+ 1pxヘアライン、シャドウ/グラデーション/ブラー禁止
04完全な直角設計:border-radiusは必ず0
05極端なフォントサイズ対比:カバーは9.6vw display、本文は14-16px、ラベルは11px uppercase + letterspacing 0.08em
06フォントファミリーはInter Tight / Inter / Noto Sans SC / JetBrains Monoに限定、セリフ体は厳禁
07データ誠実性条項:グラフの柱の高さは実データの比率に厳密に従う必要があり、数値はユーザー入力由来のみ許可
08キーボード ← / → ページ送り + ハッシュ同期 + №N/Nインジケーター。単一ファイルHTML、外部画像禁止(装飾用ジオメトリは純粋なCSS/インラインSVGを使用)
09サイト側で最高ウェイト:featured 50 / recommended 2、READMEファーストビューのスクリーンショット枠および詳細ページスクリーンショットの双方を担当

3外部依存関係

KindDependency / Endpoint
cli宿主本机 agent CLI(应用侧 spawn;非本 skill 指令)
networkTailwind CDN(产物示例引用,非 skill 正文要求)
networkGoogle Fonts(产物示例引用)
network出处置标(frontmatter 元数据,非调用)

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

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言:example.htmlに<script src="https://cdn.tailwindcss.com">およびGoogle Fontsへのリンクが含まれています
監査ノート: 判定対象=skillディレクトリ(SKILL.md + example.md + example.html + サイト用スクリーンショットアセット):実行可能スクリプトなし、クレデンシャル読み取りなし、ディスク書き込み指示なし。SKILL.md本文にはCDN/API要件は一切含まれず(フォントはファミリー名のみ指定、唯一のURLはfrontmatterに記載されたop7418/guizang-ppt-skillの出所表記であり、実行時呼び出しではない)、むしろ「外部画像URLの不使用」を明示しています。ディレクトリ内の実際のエンドポイントの自己証明:example.html内のcdn.tailwindcss.comリモートスクリプトおよびfonts.googleapis.comの@importは成果物による参照です。本リポジトリのhtml-anythingテンプレートは第4バッチ基準に基づき一律で🟢「緑」判定となります:判定対象=skill自身のディレクトリ。ホストシェル(loader.ts/assemblePrompt/ローカルエージェントCLI/プレビューiframe)およびexample.html内のフォント・CDN参照は成果物フェーズの動作(ブラウザによって取得され、skill実行時には外部送信されない)であり、reason/risksへの記載にとどめ、判定ランクには影響しません。

5二重目の独立検証

  • [ok] 文件清单(4 项,无脚本) — SKILL.md(4865B) / example.md(331B) / example.html(6131B) / docs/screenshots/skills/deck-swiss-international.png;无 .sh/.py/.js/.ts。
  • [ok] 正文端点复核 — SKILL.md 内无 http URL;字体只写 Inter Tight / Inter / Noto Sans SC / JetBrains Mono 等字族名。
  • [ok] 目录内端点自证 — example.html: cdn.tailwindcss.com(远程 script)+ fonts.googleapis.com(@import);SKILL.md: frontmatter 的 github.com/op7418/guizang-ppt-skill 出处置标。
  • [ok] 无凭证读取 — key/secret/token/.env 零命中。
  • [ok] 无写盘指令 — SKILL.md 无 write/save 类指令;shared.ts 明令禁文件工具。
  • [ok] 22 个版面清单完整 — S01 Cover → S22 Image Hero 逐条在正文;抽查 S06 KPI Tower、S08 Duo Compare、S18 Why Now 均逐字存在。
  • [ok] 4 套主题 hex 逐字可复核 — #002FA7 / #FFD500 / #C5E803 / #FF6B35 与各自 paper/ink 均在正文。
  • [ok] 6 条铁律逐字可复核 — 直角 border-radius:0 / 1px hairline / 16 列网格 / 字体族 / 字号反差 / 不许编造,全部命中。

6結論

  • 検証可能なスタイル:hex値の固定、直角の鉄則、16列グリッド、フォントサイズの対比などが1項目ずつ対照可能なルールとして記述されており、生成を跨いだ一貫性が極めて高い。
  • 十分な大きさのレイアウトプール(22種)と再利用の許容により、長尺コンテンツでも同一レイアウトの単調な繰り返しを避け、構造感を維持できる。
  • データ誠実性のルール化:柱の高さの実データ比例や数値捏造の禁止が鉄則に組み込まれており、AIによるグラフ捏造傾向を直接抑制。
  • テーマレベルの視認性ガードレール:Lemonは黒文字を強制、Safety Orangeは白文字 + bold ≥ 600を強制。
  • サードパーティソースの著作者表記が完全(frontmatter + READMEの双方で対応、READMEには元ライセンスと著作者表記の維持を明記)。
  • サイト内で最も高いプライオリティ:READMEのファーストビュースクリーンショット枠 + CLIフォールバックテンプレート + recommended 2。
  • 最適な用途: 事実、製品、分析、方法論の提示に最適:ロードマップ、四半期レビュー、KPIレポート、方法論の解説、ビジネス/AI関連のプレゼンテーション。「一目でデザイナーが手がけたとわかる」アカデミックで冷静なトーンを求める場合に最も適しており、本リポジトリのデフォルトフォールバックテンプレート(CLIフォールバック + READMEファーストビュー)でもあります。
    不向きな用途: 温かみ、手描き感、雑誌編集風のトーンが求められる場面には不向き(deck-guizang-editorial / deck-magazine-web などを推奨)。角丸/シャドウ/グラデーションを多用するブランド体系には不向き(本テンプレートはborder-radius: 0、シャドウ・グラデーション禁止を明示)。4種の固定テーマのいずれにも合致しないブランドカラーを持つ組織への納品には不向き(hex値の変更禁止)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-swiss-international.tar.gz
    sha256: 6d2dc3f18adde621…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.