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

deck-xhs-pastel

クリーム色の背景 + ソフトグローblob + マカロン角丸カード + Playfairイタリック数字

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

1仕組みと動作原理

本スキルは実行可能プログラムではなく、「1ディレクトリ=1テンプレート」構成をとっています。SKILL.mdのfrontmatterはセレクター表示用であり、本文(body)はモデルに送信するプロンプトそのものです。テンプレートの追加はディレクトリの追加のみで完結し、TypeScriptの変更は不要です。

next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
同一ファイルのヘッダーコメントにディレクトリ規約が明記されています:SKILL.md(frontmatter + prompt body)/ example.md(任意の入力サンプル)/ example.html(任意のプレビュー)。本スキルディレクトリ内もまさにこの構造に従っています。

実際に発行されるプロンプトは、プラットフォーム共有デザイン指示(SHARED_DESIGN_DIRECTIVES)+ 本スキルのSKILL.md本文 + ユーザーコンテンツとなり、assemblePromptによって1つのプロンプトに統合されます。

next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
したがって、本スキルの本文は「レイアウト/スタイル/コンポーネントライブラリ」のセクションのみを担当します。出力規律(単一ファイルHTML、ユーザー実データの必須使用、コンテンツ主導のページ数決定)は共有指示側で定義されているため、テンプレート作成者が重複して宣言する必要はありません。

完成原稿の出力はファイルシステムを経由しません。共有指示によりWrite/Edit/Bashなどのファイル操作ツールの使用が明示的に禁止されており、モデルにはHTML全体を返答本文として直接ストリーミング出力することが求められます(stdoutはフロントエンド側でキャプチャされ保存されます)。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
これが「スキル自体のディスク書き込みゼロ」メカニズムの根拠です。ファイルを書き出すのはホスト側のフロントエンドでありスキルではありません。また、本ディレクトリ内にはスクリプトも一切存在しません。

スタイルはすべてSKILL.mdの【レイアウト】リストにおいて、「カラー値 + フォント + 角丸 + コンポーネント」の4要素で厳格に固定されています:クリーム背景 #fef8f1、3つのソフトグローblob、Playfairイタリックセリフ見出し、28px角丸マカロンカード、Playfairイタリックの01〜04通し番号。

next/src/lib/templates/skills/deck-xhs-pastel/SKILL.md
- 奶油 #fef8f1 底 + 三个柔光 blob
同セクションにはカードの配色パレット(ピーチ/ミント/スカイ/パープル/レモン/ローズ)とトップバーのchip+page構造も明記されており、モデルは「デザイン」を行う必要がなく、ユーザーコンテンツをこの定義済みビジュアルシステムに流し込むだけで済みます。

カードの28px角丸とソフトグローblobは、example.html内でそのままコピー可能な具体的CSSとして実装されています:カードは28px角丸 + 0 14px 40pxのソフトシャドウ、blobは放射状グラデーションを持つ3つの大きな円 + blur(2px)です。

next/src/lib/templates/skills/deck-xhs-pastel/example.html
.tpl-xhs-pastel-card .xp-card{border-radius:28px;padding:30px 34px;background:#fff;box-shadow:0 14px 40px rgba(42,35,64,.08);position:relative;overflow:hidden}
blobの3つのCSS定義はそれぞれ420pxピーチ / 360pxパープル / 260pxミントで、いずれもradial-gradient(circle, var(--xp-*), transparent 70%)、不透明度.85、z-index 0となっており、本文層(z-index 2)がソフトグローの上に重ねられます。これが「クリーム背景 + ソフトグロー」の質感を演出する手法です。

数値グラフはチャートライブラリに依存しません。1週間の時間配分は手書きのSVGドーナツ(複数セグメントのcircle + stroke-dasharrayオフセット)で描画され、中央にはPlayfairフォントで4hと表示されます。

next/src/lib/templates/skills/deck-xhs-pastel/example.html
<text x="130" y="130" text-anchor="middle" font-family="Playfair Display" font-size="44" font-weight="900" fill="#2a2340">4h</text>
SKILL.mdの「SVGドーナツ図」に対応しており、テンプレートがJSやチャートCDNなしでデータページを出力できることを示しています。各セグメントの色にはカードのダーク版トークン(--xp-*-d)が使用されます。

ページ数はテンプレート側で固定されません。共有指示が「コンテンツ主導のボリューム決定」を要求しており、テンプレートは再利用可能なレイアウトプールを提供するのみです。

next/src/lib/templates/shared.ts
模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
example.htmlは8ページのサンプル(表紙 01 · 08 → チャプター 02 · 08 → 2x2カード 03 → 引用 04 → プロンプトコード 05 → ドーナツ図 06 → CTA 07/08)であり、フッターおよびトップバーのページ番号は実際のページ数に応じて書き換えられます。ユーザーコンテンツが長ければ、自然とページ数も増やすべきです。

サーバーサイドの /api/convert が行うのは3つの処理のみです:templateIdに基づいてディスクからスキルを読み込み、プロンプトを組み立て、ローカルのagent CLIをspawnしてSSEストリーミングで出力を転送します。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ファイル内でまず `const skill = loadSkill(templateId);` が実行され(テンプレートが存在しない場合は400)、その後invokeAgentに渡されます。スキルディレクトリ自体がプロセスを起動したり、ネットワーク通信を行ったりすることはありません。

2コア機能

01ライフスタイルやエモーショナル系の長文をマカロン調スローライフ風スライド(表紙 + チャプター + カード + 引用 + コード + データ図 + CTA)にレイアウト
023つのソフトグローblobでクリーミーな雰囲気の背景を演出し、本文層をグローの上に配置して可読性を確保
03並列する要点を配置するためのマカロン角丸カードプール(ピーチ/ミント/スカイ/パープル/レモン/ローズ)と、テキスト/凡例用のダーク版カラートークン
04ディスプレイ見出しおよび01〜04の通し番号にPlayfair Displayイタリック、本文にサンセリフ(Inter / Noto Sans SC)を採用し、セリフ/サンセリフの役割を明確に分担
05chip + pageのトップバーと「NN · 総ページ数」のフッターページ番号により、ページごとの順序確認が容易
06純粋なCSS/SVGによるデータ図:stroke-dasharrayで分割されたドーナツチャートにより、チャートライブラリへの依存を排除

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部への影響はなし
監査ノート: 評価対象=スキル自身のディレクトリ(SKILL.md + example.html/example.md、本ディレクトリ内にはスクリプト、認証情報の読み込み、ディスク書き込み指示、ネットワーク呼び出しコードは一切存在しません)。第4バッチ最終基準に基づき、html-anythingテンプレートは一律greenと判定されます:SKILL.md全文においてランタイムサービスバックエンド/APIの指定はなく、ユーザー素材を外部生成バックエンドに送信することもありません(orange要件なし)。バックエンドのリバースエンジニアリング、なりすまし、バイパスも存在しません(red要件なし)。ディレクトリ内に実際に現れるエンドポイントは成果物のサンプル用外部リンク(example.htmlにおけるfonts.googleapis.comからの8フォントファミリーのGoogle Fonts @import、および本スキルとは無関係なw3.org SVGネームスペース)のみであり、これらは「成果物サンプル」に該当するため基準上は判定対象外とし、自己証明のためにのみ記載しています。なお、ホスト側の参考情報として、プレビュー用iframeにはsandbox="allow-scripts allow-same-origin"が指定され、ローカルagent CLIがspawnされ(next/src/lib/agents/invoke.ts)、共有指示により成果物でのCDN参照が求められますが、これらはプラットフォーム側の挙動としての補足説明にとどまります。

5二重目の独立検証

  • [ok] 目录只有 SKILL.md + example.html(无脚本/无资产) — find 结果 2 个文件;<script 与事件处理器零命中。
  • [ok] 「奶油底 #fef8f1 底 + 三个柔光 blob」 — example.html 有 --xp-bg:#fef8f1 与 .xp-blob.b1/.b2/.b3 三条径向渐变规则。
  • [ok] 「Playfair 斜体 01-04 序号」 — 卡片内 <div class="xp-num">01</div>…04 与 .xp-h1 em{font-style:italic} 均为 Playfair Display。
  • [ok] 「SVG donut 图 + chip+page 顶栏」 — 第 06 页背景层含四段 stroke-dasharray 的圆环 + 中心 4h;每页 xp-topbar 内 xp-chip + xp-page。
  • [discrepancy] aspect_hint 16:9 与样例的对应关系 — SKILL.md frontmatter 写 aspect_hint: "16:9",但 example.html 的 .slide 是 width:100vw/height:100vh 全屏适配(由宿主的 deck 模式播放),并没有 16:9 固定画布;选择器缩略图处才出现 aspect-ratio:16/9。结论:16:9 是宿主预览/导出的约束,不是模板文件里的画布尺寸。
  • [ok] 页数口径 — 样例为 8 页(页脚 01 · 08…08 · 08),符合共享指令「模板不定义数量、由内容决定」;SKILL.md 未写死页数。
  • [ok] 官方描述逐字一致 — description 原文「奶油底 + 柔光 blob + 马卡龙圆角卡片 + Playfair 斜体序号」与 SKILL.md 逐字相同。

6結論

  • デザイン決定事項をすべて事前定義:カラー値、フォント、角丸、コンポーネントプールがSKILL.mdに記載されており、モデルはコンテンツの穴埋めのみに集中できるため、生成ごとのスタイルが安定。
  • 外部依存性ゼロ:グラフィックはCSS/SVGで手描きされ、画像URLやチャートライブラリは不使用。単一ファイルをダブルクリックするだけで閲覧可能。
  • 雰囲気と可読性の両立:ソフトグローblobをz-index 0、本文層をz-index 2に配置することで、装飾が文字の邪魔にならない設計。
  • 自己検証可能なページ番号構造:トップバーのchip+pageとフッターの「NN · 総ページ数」により、長文でページが増加しても順序を見失わない。
  • 最適な用途: ライフスタイル、自己成長、情緒的なテーマを扱う16:9の共有スライドに最適。デザイン経験はないが「RED(小紅書)やモーメンツ向けの原稿」を安定して制作したい個人クリエイターやインフルエンサーにも最適。中国語の長文をスライド化する際の作業効率を大幅に向上させます。
    不向きな用途: 厳格な財務諸表、技術仕様書、精密なデータ表や座標軸が求められる場面(ソフトグロー背景と28pxの角丸がフォーマル感を損なうため不向き)。ピクセル単位のブランドレギュレーションや厳格な企業CIが求められる用途には不向き。テンプレート単体に対話型スクリプトが含まれることを期待する用途(ページめくりやエクスポート機能はホスト環境側が提供)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-xhs-pastel.tar.gz
    sha256: e9e5fecb3c98880a…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.