kirklin/kirklin-slides

演示配图 (プレゼンテーション用画像生成)

演示配图はHTMLページを使用して16:9の画像を作成します。各ページは1920×1080のHTMLページで、選択したスタイルのスタイルシートを適用後、ヘッドレスブラウザによって3840×2160のPNGにレンダリングされます。これらの画像は提案書、報告書、企画書などの文書に挿入するために使用します。

CRITICAL — ページを作成する前に、MUST 以下のファイルをReadツールで読み込んでください：

1. kirklin-slides-copy.md：すべてのスタイルに適用されるテキストルール
2. kirklin-slides-layouts.md：27種類のレイアウトの内容とレイアウトルール
3. kirklin-slides-components.md：ページ構造とコンポーネントのクラス名
4. 選択したスタイルのルール：色、フォントサイズ、各レイアウトの寸法。ファイルの場所はスタイル一覧を参照
5. 作成、レンダリング、チェック、再ナンバリング、エクスポート、スタイルのプレビュー、及び投稿のキャプチャを行う前に、必ずkirklin-slides-workflow.mdを読んでください。
6. 新しいスタイルを追加する前に、必ずkirklin-slides-new-style.mdを読んでください。

以下で <skill 目录> はこのファイルが存在するディレクトリを指します。

スタイル

スタイルは画像の色、フォント、フォントサイズ、装飾を決定します。すべてのスタイルで共通のサンプルページ、コンポーネントクラス名、テキストルールを使用します。現在提供されているスタイルは以下の通りです：

スタイル	英語名	適用シーン	ルール
黒背景発表会スタイル	launch-dark	企画立案、提案発表、プロジェクター投影	kirklin-slides-style-launch-dark.md

サンプルページは assets/pages/ にあります。各スタイルのスタイルファイルは assets/styles/<英語名>/style.css にあります。node <skill 目录>/scripts/preview-style.ts <英語名> 汇总图.png を実行すると、スタイルの全サンプルを1枚にまとめた画像を生成できます。

適用シーン

• 提案書、報告書、企画書などの文書用の図版を作成する
• 既存の図版を修正または補足する
• カバー、スケジュール、チーム紹介などの単一ページを作成する
• 文書の順序に従ってすべての図版をエクスポートし、サマリー画像を生成する
• ソーシャルメディアの投稿をキャプチャして図版に組み込む
• ユーザーから提供された図版に基づいて新しいスタイル（例：ライトスタイル）を追加する

クイックデシジョン

• プロジェクト内に既に slides/style.css が存在する場合、そのスタイルを継続して使用します。ファイルの最初の行のコメントがスタイルの英語名です。その英語名に対応するスタイルルールを読み込み、新しいページは同じ pages/ ディレクトリに配置します。
• ユーザーがスタイルを指定した場合、指定されたスタイルを使用します。
• プロジェクト内に style.css がなく、ユーザーもスタイルを指定していない場合、スタイルが1つだけならそれをそのまま使用します。複数ある場合は、内容と場面に基づいて1つを推奨し、ユーザーがサンプル集計図を確認した後に決定します。
• ユーザーが新しい図版セットを提供し、今後これに基づいて作成するよう要求した場合は、kirklin-slides-new-style.mdに従って新しいスタイルを追加し、既存のスタイルは変更しません。
• まず各ページのタイトルを決定し、次にページの主要な内容に基づいてレイアウトを選択します。一般的な内容とレイアウトの対応は以下の表の通りです。詳細はkirklin-slides-layouts.mdを参照してください。

内容	レイアウト
1つの重要な数字	大きな数字
複数の数字	数字ブロック
複数の並列的な結論	要点
複数の特徴や能力	アイコンリスト
2つのアプローチの選択	対比
2つの次元でグループ化された項目	4象限マトリックス
複数の項目の複数側面での比較	表
数値の大小比較	水平バー
期間ごとに集計された数値	棒グラフ
指標の時間変化	折れ線グラフ
全体の構成比	ドーナツチャート
段階的に減少するフェーズ	ファネル
マイルストーン	タイムライン
フェーズに分かれた計画	ロードマップ
週単位のタスク	ガントチャート
並行して進む2つの作業	デュアルトラック
順次実行されるステップ	フローチャート
引用文	引用
1枚の画像とその説明	図と文
外部の投稿	スクリーンショット
メンバーと役割分担	チーム
協力パートナー	ロゴウォール
コードの一部	コード

コアバウンダリ

• すべてのスタイルのキャンバスサイズは1920×1080で、レンダリング結果は3840×2160です。
• テキストはスタイルで定義されたマージン内に配置されます。マージンは style.css の4つのマージン変数によって定義されています。
• ページには構造、内容、およびデータから計算されたパーセンテージのみが含まれます。色、フォントサイズなどのスタイルはスタイルによって決定され、色の意味はスタイルルールに従います。
• 各ページは1つのテーマのみを表現し、内容が多い場合は複数ページに分割します。
• 数字、人名、日付はユーザーの資料から取得するか、資料から直接計算します（例：合計、開始日と終了日、最大値）。計算された数字については、フッターに計算方法を記載します。資料に存在せず、計算もできない数字は図版に書き込まず、推定も行いません。
• サンプルページ内のプレースホルダーテキストはすべてユーザーの内容に置き換え、ユーザーから提供されていない部分はブロックごと削除します。
• 比較可能なチャートは同じ尺度を使用し、フッターにその尺度を記載します。
• タイトルは完全な文であり、句点で終了します。中国語と英数字の間にはスペースを挿入し、値の範囲は「から」で接続します。
• 文書内の図版の番号は出現順序と一致し、新しいページが挿入された場合は番号を振り直します。
• スクリプトはTypeScriptで記述され、プロジェクト内の補助スクリプトも同様にTypeScriptを使用します。

例

# BAD：タイトルが話題であり、数字と漢字の間にスペースがなく、範囲にチルダを使用している
審査フロー紹介
各モジュールに2~3人必要

# GOOD：タイトルが結論であり、句点で終了している
新しいフローにより審査待ち時間が2日短縮されました。
各モジュールに 2 から 3 人を割り当てます

# BAD：2つの水平バーチャートが異なる尺度を使用し、選択肢の表現に深刻さを表す色を使用している
# GOOD：2つの水平バーチャートは同じ尺度を使用し、その尺度をフッターに記載する。選択肢の表現にはスタイルルールで選択を示す色を使用する

チェックリスト

• 各ページを修正後、再レンダリングし、ReadツールでPNGを確認しました。
• チェックスクリプトで問題が報告されず、ページ内にサンプルのプレースホルダーテキストが残っていません。
• 数字、人名、日付はすべてユーザーの資料に存在するか、資料から計算可能です。
• 文書内の画像の説明がタイトルと一致し、番号が出現順序と一致しています。
• ユーザーからエクスポートの要求があった場合、エクスポートスクリプトがエラーなく実行され、サマリー画像を確認しました。
• このスキルのスクリプト、サンプルページ、またはスタイルを変更した後、pnpm --dir <skill 目录> test がすべてパスしました。

このスキルの範囲外

• .pptx ファイルやオンラインスライド
• ポスター、ソーシャルメディアカード、ウェブデザイン
• 文書本文の執筆

参考

ファイル	説明
kirklin-slides-copy.md	テキストルール
kirklin-slides-layouts.md	レイアウト目録
kirklin-slides-components.md	ページ構造とコンポーネント
kirklin-slides-workflow.md	制作フローとスクリプトの使い方
kirklin-slides-new-style.md	新しいスタイルの追加
kirklin-slides-style-launch-dark.md	黒背景発表会スタイル
assets/pages/	27種類のレイアウトの共通サンプルページ
assets/styles/	各スタイルのスタイルシート
scripts/use-style.ts	プロジェクトにスタイルを設定
scripts/add-page.ts	レイアウトに従ってサンプルページを1ページコピー
scripts/render.ts	ページをレンダリング
scripts/check-pages.ts	テキストとレイアウトをチェック
scripts/export-slides.ts	文書の全図版とサマリー画像をエクスポート
scripts/preview-style.ts	スタイルの全サンプルサマリー画像を生成
scripts/post-shot.ts	ソーシャルメディアの投稿をキャプチャ