ホーム / 全スキル / デザイン＆モーション / magazine-poster
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · nexu-io/html-anything

magazine-poster

サンデーペーパー（日曜新聞）風、大型セリフ体見出し＋2段組み本文＋ナンバリングセクション

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

1仕組みと動作原理

新聞エディトリアルレイアウト：デイトライン上部バー（刊行物名／日付／号数）→ 超特大セリフ体見出し（取り消し線単語＋イタリックアクセント含む）→ 2段組み本文 → 6つのナンバリングセクション（各段落にプルクオート付き）→ 下部フッター署名／オーナメント。

next/src/lib/templates/skills/magazine-poster/SKILL.md
- Oversized serif headline (含 strike-through 词 + 斜体 accent)
サンプルではデイトラインを2本のトップルール（`01 · AI ENTHUSIAST` および `17 · APR · 2026`）として実装しており、「新聞全面」を象徴する重要な識別要素となっています。

紙の質感は温かみのあるクリーム色背景＋黒文字で構成され、サンプルパレット `--paper: #f3eee2` で実装されています。

next/src/lib/templates/skills/magazine-poster/SKILL.md
- 纸感: 暖灰 cream 背景 + 细 dot pattern, 黑字
本文にはさらに細かなドットパターンが求められ、サンプルでは印刷の質感を維持するために補助色として --rule/--tint を使用しています。

フォントには Playfair Display + IBM Plex Serif + JetBrains Mono を指定しています。

next/src/lib/templates/skills/magazine-poster/SKILL.md
- 字体: Playfair Display + IBM Plex Serif + JetBrains Mono
サンプルでは実際には Playfair Display を display 変数としてのみ使用し、本文セリフは Iowan Old Style/Charter にフォールバック、等幅フォントには IBM Plex Mono を使用しています（確認表の差異項目を参照）。

テンプレート自体がプロンプトです：SKILL.md の本文がローダーによって読み出された後、共通の前文およびユーザーコンテンツと結合され、ローカルの agent CLI に渡されて実行されます。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
ランタイムはテンプレートディレクトリ内のコードを実行しません：/api/convert は {agent, templateId, content} のみを受け取り、loadSkill(templateId) で SKILL.md 本文を取得してプロンプト本体とした上で、ローカルでログイン済みの agent CLI に渡します。HTML は stdout 経由でフロントエンドにストリーミングされます。

skill ディレクトリは純粋なテキストアセットです：ローダーがディスクから SKILL.md 本文を読み出し、ディレクトリ内の実行可能コードは一切読み込まれません。

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ファイルシステム内の skill は単なるテキストです：ローダーが各ディレクトリの SKILL.md を順次読み込み、frontmatter をピッカー用メタデータとして抽出し、本文を body として返します。本テンプレートディレクトリ内のモジュールがインポートされたり実行されたりすることはありません。

共通前文はテンプレートより前に注入され、「テンプレートはレイアウト／スタイル／配色／フォント／コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」ことを最優先事項として定めます。

next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
共通前文はテンプレート本文の前に注入され、「テンプレートはレイアウト／スタイル／配色／フォント／コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」と規定しています。そのため、本テンプレート内のレイアウト一覧は「再利用可能なレイアウトプール」であり、ページ数やフレーム数の上限ではありません。

共通前文はテンプレートより前に注入され、「テンプレートはレイアウト／スタイル／配色／フォント／コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」ことを最優先事項として定めます。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
前文ではファイルシステムツールの使用を明示的に禁止し、純粋な HTML を応答本文からストリーミング出力することを要求しており、ディスクへの保存はフロントエンド側が担当します。したがって、skill 側にはディスク書き込みの動作はありません。

skill ディレクトリは純粋なテキストアセットです：ローダーがディスクから SKILL.md 本文を読み出し、ディレクトリ内の実行可能コードは一切読み込まれません。

next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
ディレクトリ内の example.html はリポジトリと共に配布されるゴールデンサンプルであり、プレビュー用ルートがディスクから直接読み出して返します（ビルドやコンパイルは不要）。品質の基準線であると同時に、詳細ページ用の素材としても機能します。

2コア機能

01新聞風の超特大セリフ体見出し（取り消し線＋イタリックアクセント）
022段組み本文グリッド
036つのナンバリングセクション（サンプル cell-1..cell-6、それぞれプルクオート付き）
04取り消し線の修辞表現（strike-through 単語）
05デイトライン上部バー（刊行物名＋日付）
06縦長ポスター（aspect_hint：縦長画像）

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
  • SKILL.md: 純粋なプロンプト指示およびルールテキストのみであり、スクリプト実行や外部への影響はありません
監査ノート： 🟢 グリーン。評価対象＝skill 自体のディレクトリ：ディレクトリ内に URL は存在しません（example.html にも http(s) エンドポイントは一切なし）。ディレクトリ内には SKILL.md と example.html のみがあり、スクリプト、実行可能コード、ネットワークエンドポイント、認証情報の読み取り、ディスク書き込み指示は一切ありません。SKILL.md に従って実行した結果はホストモデルが HTML テキストを出力するのみであり、外部送信やディスク保存のアクションは含まれません。ホストシェルおよび成果物利用側の挙動は評価区分の根拠とせず、verdict.risks にのみ記録します：shared.ts の前文が成果物に Tailwind CDN (https://cdn.tailwindcss.com) および Google Fonts の参照を求めていること、ランタイムがローカルでログイン済みの agent CLI を生成（spawn）すること（envFor が process.env を透過）、プレビュー用 iframe に sandbox="allow-scripts allow-same-origin" が設定されていること。

5二重目の独立検証

  • [discrepancy] 规范↔示例：字体 — 正文指定「Playfair Display + IBM Plex Serif + JetBrains Mono」；示例 `--serif-body` 实为 `'Iowan Old Style', 'Charter', Georgia, serif`（无 IBM Plex Serif），等宽是 `'IBM Plex Mono'`（不是 JetBrains Mono），且全文件未引 Google Fonts——Playfair Display 在未装该字体的机器上会回退。
  • [ok] 规范↔示例：编号 section 数 — 正文要求 6 个编号 section，示例命中 cell-1..cell-6 与编号 01–06（「01 · SHIP FAST」等）。
  • [ok] pull-quote 与 dateline — 示例以 `<div class="quote">` 承载每段 pull-quote，以 `.top-rule`（`01 · AI ENTHUSIAST` / `17 · APR · 2026`）承载 dateline 的刊名与日期。
  • [ok] 删除线/斜体 accent — 示例 `h1.headline .strike { text-decoration: line-through; … }` 与 `h1.headline .accent { font-style: italic; … }` 落地正文的标题修辞要求。
  • [ok] 脚本/外链普查 — example.html 无 <script>、无 http(s) 命中——零外链零脚本，离线可开。
  • [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
  • [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
  • [ok] 外链端点普查 — 目录内（含 example.html）零 http(s) 命中，产物离线自持。

6結論

  • 新聞の視覚的語彙が揃っており、見た目がまさに「印刷物」の質感
  • レイアウト密度の制御性：2段組みグリッド＋6つのナンバリングセクション
  • 外部リンクなし・スクリプトなしで、成果物はオフラインで自己完結
  • セクションに data-od-id が付与されており、上流での特定や編集が容易
    • 最適な用途： ブランドマニフェストの縦長画像、SNS向け縦長ポスター、ニュースレター／公式アカウントの「新聞風」ヘッダー画像。エディトリアルデザインの強いトーンが求められる場合に最適。
    不向きな用途： データグラフやインタラクションが必要なページ、厳密なウェイト／フォントの一貫性が求められるブランド用原稿（テンプレートはフォントをロードしません）、短いコピーのシーン（新聞スタイルは2段組みと6セクションを支えるのに十分な本文量を前提とするため）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload magazine-poster.tar.gz
    sha256: cccc07fdf20a7e6a…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.