Communitygithub.com

KaigorodovTuskul/editorial-design-agent-skill

オリジナルHTML/CSS/SVGでハイエンドなエディトリアルデザインの投資家向け資料、ボードプレゼン、年次報告書・財務報告書を制作します。印刷可能な固定スライドPDFと、ラスター背景に編集可能なテキスト/数値を持つハイブリッドPPTXを生成。ハルマークデザイン批評、ブラウザ視覚レビュー、厳格なPDF/PPTXラウンドトリップ品質ゲートが必要です。

editorial-design-agent-skill とは?

このスキルは、Claude Code などのAIエージェントが、単なるテンプレートの穴埋めではなく、本格的なアートディレクションによるエディトリアルデザインを実行するためのものです。投資家向けデッキ、取締役会向けプレゼンテーション、年次報告書などの高品質なドキュメントを、オリジナルのHTML/CSS/SVGで制作します。主な特徴として、固定スライドPDFと、ラスター背景の上に編集可能なテキスト・数値を持つハイブリッドPPTXを生成します。また、デザイン品質を保証するために、Hallmark による自動デザインレビュー、Playwright を用いたブラウザ上でのビジュアル検証、そしてPDFとPPTXの画素単位での一致確認という厳格な品質ゲートを組み込んでいます。Crystal Cobalt Enterprise などのテーマに沿ったアートディレクションを行い、スライドごとに独自のビジュアルコンセプトを考案・実装します。対応プラットフォームは主にClaude CodeなどのコマンドラインAIエージェントですが、そのワークフローは任意のエディトリアルデザインプロジェクトに応用可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/KaigorodovTuskul/editorial-design-agent-skill/tree/HEAD

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

エディトリアルデザイン — テンプレートの穴埋めではなく、オリジナルのアートディレクション

絶対条件

一貫性があり、差別化され、コンテンツに特化した出版物を、本格的なアートディレクションスタジオのような編集意欲で作成すること。モデルはアートディレクターです。デザインを9つの定義済みスライドタイプから選択することに矮小化してはいけません。 元の build <json> パスは レガシー回帰テスト用の固定具 であり、推奨される生成戦略ではありません。

実際にHTML/CSS/SVGを作成・修正し、Chromiumでレンダリングし、出力を確認し、問題を修正し、アーティファクトを検証する必要があります。スキル、ブランディングファイル、リントスクリプトは、オリジナルのビジュアルディレクションやレンダリングされたページの検査を代替することはできません。Hallmarkはプロフェッショナルリリースに必須ですが、パブリッシングエンジンやこのスキルの代わりにはなりません。

0. 新しいインタラクティブプロジェクトの開始 — テーマとタイプ

新しい インタラクティブ プロジェクトの開始時には、パレットとフォントについて一度だけ尋ね、簡単な回答として デフォルトを使用 を用意してください。デフォルトパレットは Crystal Cobalt Enterprise — コバルト/ニアブラック、控えめなシアン/バイオレットの光、淡い分析的な表面、オリジナルのプリズマティックガラスアート、4つのアートディレクションモードを備えた、リファレンスに基づいたデザインディレクションです。デフォルトタイプは Geologica Roman (CRSV=0) です。代替案: Azure Iris Unified、Arctic Editorial、Deep Navy、Monochrome;および Geist Sans、IBM Plex Sans、Onest、Manrope。ブランドの制約が優先されます。会話ですでにパレット/フォントが確立されている場合は、再度尋ねずにそれを継承してください。ヘッドレスビルドはデフォルトを使用し、推定選択フラグでそれらを永続化します。

単なる説明的な形容詞ではなく、実際の制作指示を使用してください: Crystal Cobalt については、references/styles/crystal-cobalt-enterprise.md、references/quality/crystal-cobalt-hallmark.md、および seeds/crystal-cobalt/README.md を読んでください。すべてのオリジナル再利用可能アートは seeds/crystal-cobalt/ 以下にあります。AEBのロゴ、サンバースト、またはその特定のオリジナルガラスリングを埋め込んではいけません。添付のリファレンスを スタイル上のインスピレーション として使用し、新しいシェイプ、コンポジション、オリジナルのマークを作成してください。

node bin/editorial.mjs seeds crystal-cobalt-enterprise を使用してアセットを一覧表示するか、node bin/editorial.mjs seed <project-dir> --theme crystal-cobalt-enterprise を使用してシードアセットをプロジェクトの assets/seeds/crystal-cobalt/ にコピーします。ビルドパイプラインには、選択したテーマのシードアセットも自動的に含まれます。スライドをラスターに平坦化しないでください: ハイブリッドPPTXのために、静的な下地の上にHTML編集可能なテキストフィールドを維持してください。

フォントはバンドルされていません。公開前に、ブラウザとPPTXレンダラーでのフォントの完全一致インストールを確認してください。置き換えは、再生成されたパリティ証拠に基づいて承認されない限り、リリースをブロックします。

1. コンテンツがデザインの入力

実際のソース(ユーザーのリファレンスPDF、承認済みコピー、XLSX財務モデル、テーブル、写真、ブランドキット)を読んでください。事実上の数値、ロゴ、企業情報を作り出してはいけません。スプレッドシートの財務モデルについては、openpyxlは数式を再計算しないことに注意してください。デモ値には未検証のラベルを付けてください。デザインは散文を再構成・タイトにすることができますが、数値の意味、単位、日付、注釈、分母、符号、出典を変更してはいけません。

コーディングの前に、ドキュメントの ナラティブリズム を内部的にマッピングします(例:冒頭のテーゼ → ネガティブなベースライン → 戦略的転換 → ドライバー → シナリオ → ブリッジ → 決定)。出版物のために1つの明確なビジュアルコンセプトを作成します:タイポグラフィ階層、スペーシングロジック、チャートマーク、静/動のリズム、そしてコンテンツに基づいた1つまたは2つのシグネチャーモチーフ。特に要求されない限り、ソースリファレンスのパレットやグリッドをそのまま流用しないでください。そのピクセルではなく、編集意欲を再利用してください。

2. アートディレクションルール(規律ある自由)

  • レイアウトはHTMLでオリジナル作成。 自由形式グリッド、CSSポジショニング、CSSシェイプ、作者デザインのSVGが許可されます。固定のスライド構造 やページごとの強制テンプレートファミリーはありません。
  • 構成は主張に従う。 1行のテーゼが半ページを占めることもできます。数値は記念碑的に大きくできます。財務ブリッジは定量的な意味を保持する必要があります。すべてをKPIカードに詰め込んだり、ページごとに同一のグリッドを使用したり、空白を無差別に埋めたりしないでください。
  • 1つのビジュアルワールド、異なる構成。非対称/静/密、明/暗、タイプ主導/データ主導のバランスの取れた交互配置を構築してください。連続する同一のシルエットを避けてください。
  • 創造的な野心は単に許容されるだけでなく、必須です。 効果的な場合は、印象的な非対称性、表現力豊かなタイポグラフィ、カスタムSVGコンポジション、レイヤードシェイプ、制御されたグラデーション、テクニカルイラストレーション、アイコン、微妙なテクスチャ効果を使用してください。ビジュアルリッチネスを目的に沿ったものにし、コンテンツ固有にします。すべてのスライドを同じウェーブグラデーションのヒーローにしないでください。ページが機械的に有効であるにもかかわらず汎用的に感じられる場合は、ランダムな装飾を追加するのではなく、そのビジュアルコンセプトを再設計してください。画像がある場合は、本物/ライセンスされているか、明らかにアーティスティックである必要があります。
  • 偽の精度、でっち上げの財務請求、デフォルトのインディゴパープルのグロー、ユビキタスなアイコン、装飾的なカードマトリックス、壊れたキリル文字、データが不足したチャート、小さな免責事項を避けてください。意図的な名前付きブランドグラデーションは許可されます: Crystal Cobaltは明示的にコバルト、シアン、時折バイオレット/マゼンタの照明を使用します。上流のHallmark 2aの競合は、生の監査に文書化する必要があります。均一なぼやけたブロブよりも、構造化された指向性照明と局所的な奥行きを優先してください。ストーリーを明確にする場合は、イラストやSVGマークを許可します。アイコンには意味的な意味と視覚的な一貫性が必要です。
  • コーディング前に、1ページのビジュアルスコア (visual-plan.json またはメモ) を作成してください: スライドごとに1つのユニークな焦点要素とシルエット。選択したテーマの適切なサーフェスモードを割り当ててください(Crystal Cobalt: atmospheric-dark、analytical-light、data-night、mixed-strategic; Azure Iris: lighter、refined、darker)。そのシグネチャーモチーフとデータの役割を説明してください。7スライドのデッキでは、少なくとも5つの明確に異なるシルエットを目指してください。すべてのページを1つの構成に強制しないでください。references/styles/ にある 選択したテーマ の語彙から選択するか、より強力なオリジナルの処理方法を考案してください。
  • バリエーションゲート: 隣接するページは、同じプライマリジオメトリ、ヒーロー処理、グラフィックモチーフ、密度を共有してはいけません。デッキ内には、非常に抑制されたページと強力なグラフィックページの両方を含めてください。予想される左見出し/右チャートの配置を破る構成を少なくとも1つ確保してください。特徴的なモチーフは、その表現を変える前に最大2〜3ページで使用してください。これらはデザインレビュールールであり、根拠のない数値的主張ではありません。
  • アイコンポリシー: 目的に合った、スタイル的に一致するインラインSVGアイコン、または細い作者デザインのピクトグラムを使用してください。純粋なタイプまたはデータ主導のページにはアイコンをゼロ使用、階層を改善する場合に1〜3個使用し、装飾のためにすべてのKPIの上にアイコンを置くことは決してしないでください。絵文字をアイコンの代わりに使用しないでください。
  • エフェクトとグラデーション: 出版物全体で複数の美的ファミリーを許可します(例:虹色のシルク/リボン、コンターマップライン処理、クリップされたライトフィールド、半透明のテクニカルオーバーレイ、タイポグラフィックマスキング、ソフトにグラデーションされたパネル、ファイングリッドテクスチャ、データバインドSVGマーク)。すべてのページで同じエフェクトを繰り返さないでください。編集可能なテキスト要素から装飾的なSVGを遠ざけてください。ハイブリッドPPTXがそれを正確な静的背景の一部として保持できるようにします。
  • 1つのソースプロジェクトを project.json、独立した slides/01-*.html ...、assets/*.css で構築してください。各ソーススライドは、正確に1つの1920×1080 `<section class=

関連スキル