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

deck-xhs-white

ピュアホワイト + 上部レインボーバー + グラデーション文字 + マカロンソフトカード + 黒地ピル

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仕組みと動作原理

この skill は実行可能プログラムではなく、「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(任意のプレビュー)。本 skill ディレクトリはまさにこの構造に従っています。

実際に発行されるプロンプト = プラットフォーム共通デザイン指示(SHARED_DESIGN_DIRECTIVES)+ 本 skill の SKILL.md 本文 + ユーザーコンテンツとなり、assemblePrompt によって 1 本のプロンプトに組み立てられます。

next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
そのため、本 skill の本文は「レイアウト/スタイル/コンポーネントライブラリ」の部分のみを担当します。出力規律(単一ファイル HTML、ユーザーの実データの使用必須、コンテンツ主導の数量)は共通指示に由来するため、テンプレート作成者が重複して宣言する必要はありません。

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

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

ビジュアルシグネチャは SKILL.md に記載された 4 つの厳格な指標です:ピュアホワイト背景 + 上部 10 色レインボーバー、80-110px の display タイトル + 紫→青→緑→オレンジ→ピンクのグラデーション文字、マカロンソフトカード群、黒地白文字の .focus ピル + 引用大ブロック。

next/src/lib/templates/skills/deck-xhs-white/SKILL.md
- 纯白背景 + 顶部 10 色彩虹 bar
これは同一リポジトリ内で最も情報密度の高いスタイルのインライン宣言です。4 つの指標はそれぞれサンプル内のコピー可能な CSS スニペットに対応しているため、モデルが独自に配色を創作する必要はありません。

レインボーバーはサンプル内ではページ上部の 5px・10 段階の linear-gradient(#6366f1→#8b5cf6→#a855f7→#ec4899→#f43f5e→#f97316→#eab308→#22c55e→#06b6d4→#6366f1 に戻る)として実装され、すべてのページに配置されます。

next/src/lib/templates/skills/deck-xhs-white/example.html
.tpl-xhs-white-editorial .xw-topline{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#6366f1,#8b5cf6,#a855f7,#ec4899,#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#6366f1)}
始端と終端を同色にして視覚的なループを形成することで、帯が途切れる違和感を防いでいます。トップバー右側の .xw-tag .dot も同じ 5 色グラデーションをドットとして再利用しています。

タイトルの「グラデーション文字」は background-clip:text + 透明塗りつぶしで実現され、5 色のカラーポイントは SKILL.md の「紫→青→緑→オレンジ→ピンク」と一対一で対応しています。

next/src/lib/templates/skills/deck-xhs-white/example.html
.tpl-xhs-white-editorial .xw-grad{background:linear-gradient(90deg,#7b61ff 0%,#4e8cff 25%,#17b26a 48%,#ff9d42 72%,#ff5fa2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
タイトルのベースサイズは 84px、チャプター区切りページでは 110px にインライン指定されており、SKILL.md の 80-110px の範囲に収まります。グラデーションはタイトル内のキーワード span にのみ適用され、本文は #111318 の単色を維持します。

「黒地白文字の .focus ピル」はインラインの強調マーカーです:inline-block + 14px 角丸 + #111318 背景 + 白文字で構成され、さらに青/ピンク/オレンジの 3 つの薄色背景バリエーションがあります。

next/src/lib/templates/skills/deck-xhs-white/example.html
.tpl-xhs-white-editorial .xw-focus{display:inline-block;padding:6px 14px;border-radius:14px;background:#111318;color:#fff;font-weight:700}
サンプルでは同一センテンス内で「主強調 vs 副強調」の対比として使用されています:`<span class="xw-focus-orange">生産</span>…<span class="xw-focus">検収とフォールバック</span>`。太字にするよりもリズミカルに表現できます。

二刀流のポジショニング:SKILL.md の aspect_hint には「16:9 / 3:4」と記載されており、同一のレイアウトセットを横型 PPT として再生することも、縦型画像として RED (小紅書) に投稿することも可能です。

next/src/lib/templates/skills/deck-xhs-white/SKILL.md
【意图】可同时发小红书图文与横版 PPT 双用的白底杂志风。
サンプルは 8 ページの 16:9 再生形式(.slide 100vw×100vh、ページ番号 01 / 08)です。白背景と強いコントラストにより両方のアスペクト比でも崩れにくい設計となっており、これが deck-xhs-post(810×1080 固定)との決定的な違いです。

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

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ファイル内でまず `const skill = loadSkill(templateId);` が実行され(該当テンプレートがなければ 400)、その後 invokeAgent に引き渡されます。skill ディレクトリ自体がプロセスを生成したりネットワークに接続したりすることはありません。

2コア機能

01白背景マガジンスタイルの deck:レインボートップバー + グラデーションタイトル + ソフトカード + 黒ピル強調
02同一テンプレートの両用:横型 16:9 プレゼンテーションと縦型 3:4 画像テキスト
032x2 の並列要点を収容するマカロンソフトカード群(ピンク/紫/青/緑/オレンジ)
04インライン強調ピルの明暗 4 態により、フォントサイズを変えずに同一センテンス内の主従関係を表現
05パンチラインページを担う引用大ブロック(xw-hero / xw-quote)
06全ページのページ番号 + トップバータグ(チャプター/トピック)によるデュアル位置表示

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

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

5二重目の独立検証

  • [ok] 「顶部 10 色彩虹 bar」 — .xw-topline 的 linear-gradient 共 10 个色停(首尾同色 #6366f1 收口),逐字数过。
  • [ok] 「80-110px display 标题」 — .xw-title 为 84px,分隔页内联 font-size:110px,落在区间内。
  • [ok] 「紫→蓝→绿→橙→粉渐变文字」 — .xw-grad 停点顺序 #7b61ff→#4e8cff→#17b26a→#ff9d42→#ff5fa2,与描述顺序一致。
  • [ok] 「马卡龙软卡片组 (粉 / 紫 / 蓝 / 绿 / 橙)」 — 样例 2x2 网格用 soft-pink/soft-blue/soft-green/soft-orange 四张;soft-purple 亦有 token(--xw-soft-purple:#f4efff),属版式池内备用色。
  • [ok] 「黑底白字 .focus pill + 引用大块」 — .xw-focus 规则与 .xw-quote 引用块均在样例第 1 页出现。
  • [discrepancy] aspect_hint 双比例与样例画布 — 样例只用 100vw×100vh 播放式布局实现 16:9,未提供 3:4 竖版实测样例;竖版可用性由「白底 + 居中内容 + 百分比宽度」的写法推断,未在文件中验证。
  • [ok] 无脚本、无外部资源 — 除字体 @import 零 URL;无 <script> 与事件处理器。

6結論

  • 1 つのレイアウトを 2 通りに公開:白背景 + 高コントラストにより 16:9 でも 3:4 でも崩れず、「横型用」と「縦型用」を重複生成する手間を削減。
  • 画像に依存しない強調表現:レインボーバー + グラデーションタイトル + 4 態ピルの 3 点セットで階層構造を成立させ、素材への依存ゼロ。
  • 精密な重点表現:同一センテンス内の主従関係をピルの背景色(黒地 vs 薄オレンジ)で差別化し、センテンス全体の太字化よりも高い可読性を実現。
  • 集中して制御可能な配色:カラーは 5 グループ + 5 つのソフト変形のみ。これを超えると白背景マガジン調が崩れるため、モデルが意図から逸脱する余地を低減。
  • 最適な用途: オピニオン発信、業界トレンド、AI/キャリア判断系のコンテンツに最適。RED (小紅書) への投稿と横型プレゼン/プロジェクター投影の両方を行いたい一稿両用シナリオに最適。高コントラストで情報密度の高いエディトリアル風を好む作成者に最適。
    不向きな用途: 情緒的な癒しテイストを必要とするコンテンツには不向き(deck-xhs-pastel を推奨)。厳格なブランド VI には不向き(レインボーグラデーションは多くのブランドカラーと衝突)。データやチャートが密集するレポートには不向き(チャートコンポーネントなし)。白黒印刷には不向き(グレースケールではグラデーションやカラー帯が濁るため)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-xhs-white.tar.gz
    sha256: cdf4726ef28078b6…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.