Communityコーディング&開発github.com

NoahYUYE/image-to-editable-ppt

フラットな画像、スクリーンショット、ポスター、図表、インフォグラフィックを編集可能なPowerPointスライドに再構成し、元の構成と視覚効果を保持します。

image-to-editable-ppt とは?

このスキルは、画像(スクリーンショット、ポスター、図表、インフォグラフィックなど)を編集可能なPowerPoint(PPTX)に変換するためのものです。主にClaude CodeやCodexなどのAIエージェント向けに設計されており、ユーザーが「画像を編集可能なPPTに変換して」「画像の要素を分解して」「スクリーンショットをPPTで再現して」といったリクエストをした際に自動的に起動します。スキルは、テキストや単純な図形はネイティブなPowerPointオブジェクトとして、複雑な3Dレンダリングや詳細なイラストは透明PNGとして保持することで、編集可能性と視覚的忠実度のバランスを取ります。ワークフローは参照画像の詳細な分析、編集計画の策定、要素の抽出、スライドの再構築、テキストのローカライズ、そして3段階の品質検証を含みます。

対応~Claude Code✓Codex CLI~Cursor
npx skills add NoahYUYE/image-to-editable-ppt

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

ドキュメント

Image to Editable PPT

参照画像を実際のスライドオブジェクトとして再構築します。テキストとジオメトリにはネイティブなPowerPointオブジェクトを、複雑なレンダリングオブジェクトには透明画像レイヤーを優先したハイブリッドな結果を推奨します。

必要なコンパニオンスキル

作成前に、利用可能なプレゼンテーション/PPTスキルを読み、その手順に従ってください。そのPowerPointライブラリ、ワークスペースのセットアップ、エクスポート、レンダリング、オーバーフローチェックを使用してください。プレゼンテーションスキルが利用できない場合は、サポートされていないPPTワークフローをでっち上げる代わりに、その制限を報告してください。

デフォルトの契約

ユーザーが特に指定しない限り:

  • 参照画像1枚につき1スライドを作成します。
  • ソースのアスペクト比に合わせてカスタムスライドサイズを設定します。
  • レイアウト、階層、パレット、シャドウ、グラデーション、視覚的な方向性を保持します。
  • テキスト、見出し、バッジ、ピル、矢印、プラットフォーム、線、リング、単純なジオメトリはネイティブかつ編集可能にします。
  • 複雑な製品、人物、3Dレンダリング、詳細なイラストは、個別の透明画像要素として保持します。
  • すべてのオブジェクトにPowerPointの選択ウィンドウで明確な名前を付けます。
  • 表示されているテキストの翻訳は要求された場合のみ行います。自然な対象読者向けの言語を使用し、編集可能な状態を保ちます。
  • 他のアーティファクトが要求されない限り、最終的なPPTXのみを納品します。

埋め込まれたラスターオブジェクトが内部的にベクター編集可能であると主張しないでください。それは独立した画像としてのみ編集可能です:移動、サイズ変更、切り抜き、外部での色変更、または置換が可能です。

ワークフロー

1. 参照画像を検査する

画像を原寸で表示します。そのピクセル寸法とアスペクト比を記録します。作成前に、すべての可視レイヤーを棚卸しします:

  1. 背景と装飾的なテクスチャ;
  2. コネクタ、矢印、プラットフォーム、構造的なジオメトリ;
  3. 番号バッジ、ラベル、タイトル、本文;
  4. シンプルなアイコン;
  5. 複雑なオブジェクトまたはレンダリング;
  6. 照明効果、シャドウ、グロー、オーバーレイ。

各レイヤーをどのように実装するかを選択する際は、references/reconstruction-playbook.md を参照してください。

2. 編集可能性計画を策定する

構築前にレイヤーごとの実装方法を選択します:

  • 表示されているすべてのコピーに対してネイティブテキストボックス。
  • 単純なジオメトリとPowerPointが確実に再現できるエフェクトに対してネイティブシェイプ。
  • 関係性や矢印に対して、実用的な場合はネイティブの線/コネクタ。
  • 内部の再描画が忠実度を低下させる複雑なオブジェクトに対して、独立した透明PNG。
  • 意味のある編集が不可能なテクスチャに対してのみ、単一のラスター背景。その背景にテキストや主要な前景オブジェクトを決して含めないでください。

完全なソース画像をスライドの可視背景として使用し、その上に編集可能な複製を重ねることは決してしないでください。それは真に編集可能な再構成ではありません。

3. タスクワークスペースを準備する

アクティブなファイル出力ルールに従います。プロジェクトタスクの場合は、<project-root>/_codex/YYYYMMDD-task-slug/ の下に1つのディレクトリを作成し、その中に final/、working/、_tmp/ を配置します。抽出したクロップ、プレビューレンダリング、QA証跡は _tmp/ に;最終的な成果物のみを final/ に配置します。

4. 複雑な要素を抽出する

視覚的にクロップボックスを特定した後、リージョンJSONを作成し、次を実行します:

python scripts/extract_regions.py \
  --input <reference.png> \
  --regions <regions.json> \
  --out <tmp-assets-dir>

mode: near-white は、クロップが白またはほぼ白の背景で囲まれている場合にのみ使用します。mode: preserve は、透明度の除去がオブジェクトを損なう場合に使用します。抽出されたすべてのアセットを原寸で検査し、隣接する線、プラットフォーム、テキスト、矢印を除去するためにクロップボックスをタイトに調整します。

このスクリプトはクロッピングと透明度マスキングのためだけのものです。プレゼンテーションのビジュアルを再描画するためにPythonを使用しないでください。

5. 背面から前面の順序で再構築する

レイヤーを次の順序で作成します:

  1. スライドの背景と微妙な装飾テクスチャ;
  2. 矢印とコネクタ;
  3. プラットフォームと大きな構造シェイプ;
  4. ガイドラインと番号バッジ;
  5. テキストボックスとピル;
  6. 抽出した画像要素;
  7. 前景のアクセント。

プレゼンテーションライブラリがピクセル単位をサポートする場合は、ソースピクセル座標系をスライド座標系として使用します。これにより配置が予測可能になり、元の比率が維持されます。

意味のある各アイテムは個別に保ちます。繰り返し構造の場合は、Stage 2 transport icon、Stage 2 transport label、Stage 2 platform top のような一貫した命名を使用します。

6. テキストを再構築してローカライズする

表示されているすべてのテキスト要素を転記します。フォントサイズを盲目的に保存するのではなく、階層を優先します。元の幅に収めるために必要な場合にのみ、コンデンスフォントを使用します。デザインで必要な場合は、見出しを1行に保ちます。

翻訳の場合:

  • ビジネス上の意味を保持します;
  • 単語ごとの翻訳よりも、自然なプレゼンテーション英語を優先します;
  • スライド全体で用語の一貫性を保ちます;
  • レンダリング後にスペル、大文字小文字、区切り文字、改行を確認します。

7. 3つのビューで検証する

常に3つのチェックすべてを実行します:

  1. ソース画像を原寸で検査します;
  2. プレゼンテーションライブラリのプレビューをエクスポートして検査します;
  3. プレゼンテーションスキルのレンダラーで最終PPTXをレンダリングし、その結果を原寸で検査します。

プレゼンテーションスキルのオーバーフローテストを実行します。意図しないオーバーフロー、重なり、クリッピング、テキストラップ、グリフの欠落、クロップアーティファクト、アイコンのずれをすべて修正します。プログラムによるプレビューはPowerPointのレンダリングが異なる可能性があるため、十分な証拠として扱わないでください。

最終QAチェックリストと忠実度のトレードオフについては、references/reconstruction-playbook.md を使用してください。

8. 透明性をもって納品する

最終PPTXを返し、次の内容を記載します:

  • どの要素ファミリーがネイティブかつ完全に編集可能か;
  • どの要素が独立したラスター画像のままか;
  • ソースのアスペクト比が維持されたか;
  • オーバーフローチェックと最終レンダリングチェックに合格したか。

忠実度を過大評価しないでください。正確なフォント、ソースベクター、レイヤードデザインファイルが入手できなかった場合は、その再構築を近似として説明してください。

関連スキル