Community画像github.com

jiaosdesign-pixel/popbook

写真や一日の出来事を一行で綴ったものから、遊べる紙のポップアップブックの1ページを作成し、自己完結型の単一HTMLファイル(three.js、サーバー不要、インストール不要、オフライン動作)として提供します。段ボール紙の層がのど元から立ち上がり、読者は紙片をタップしたり、引きタブをドラッグしたり、昼夜のダイヤルを回したりすると、シーン内の何かが自動的に動きます。誰かが写真、場所、思い出、一行日記を送ってきて、それをポップアップブック、紙のジオラマ、「ポップブック」、または遊べる記念品のページにしたい、あるいは既存のポップブックにページを追加したい場合に使用します(たとえ「ポップアップ」という言葉を使わなくても)。

popbook とは?

Popbookは、写真やテキストの一行から、遊べる紙のポップアップブックの1ページを生成するAIエージェントスキルです。出力は自己完結型の単一HTMLファイル(約1.8MB)で、Three.jsを使用し、サーバーやインストールを必要とせず、オフラインでも動作します。このスキルは、Claude Code、Cursor、Codexなどのコーディングエージェントで使用するように設計されており、例えば「このビーチの写真からポップアップブックのページを作って」といった指示に応答します。 スキルは、紙片のキットから構成されるJSONファイル(「モーメント」)を生成し、ビルドスクリプトがそれをHTMLに変換します。各ページには、最低4つ、最大6つのストーリーピース(紙の層)、タップ操作とドラッグ操作の2つのインタラクティブ要素、そして昼間に自動で動く「生きているループ」が含まれている必要があります。ユーザーは昼夜を切り替えるスカイダイヤルも操作できます。 重要なのは、写真自体はブックに埋め込まれず、参照としてのみ使用されることです。スキルは、送り主の言葉や写真にあるものだけを使用し、装飾用の小道具を追加することは禁止されています。また、フィギュアは特に指定がない限り送り主自身を表し、写真に基づいて服装が設定されます。 効率化のために、スキルはスカウト、ビルダー、レビューア、エディターという4つのサブエージェントに分割して作業を進めることができます。これにより、新しい紙片の作成が必要な複雑なページも迅速に処理できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jiaosdesign-pixel/popbook/tree/HEAD/popbook

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

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

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

ドキュメント

popbook は何をしますか?

ポップアップブックの1ページは1つのJSONファイル(「モーメント」)で、紙片のキットから構築されます。scripts/build.mjsは、1つ以上のモーメントを1つのHTMLファイルに変換します。写真は参照のみであり、ブックには決して含まれません。

最初に読むもの:references/kit.md(すべての紙片、そのパラメータ、読み取るパレットキー、折りたたみルール)。次に、写真の被写体に最も近いexamples/内の例:海岸や乗り物(bay-trail)、庭園、家屋、またはお祭りのシーン(filoli-halloween)、ランドマーク(golden-gate)、店舗やカフェ(cafe)。

入力

  • 写真(見てください)、送り主の言葉による一行、またはその両方。通常は両方です。
  • 場所と日付。信頼度の順序:送り主の言葉、写真のEXIF、ファイル名。scripts/photo.py <photo>は、日付、GPS、サイズ、パレットの推測値を出力します(シーンの色を使用。カバーとストライプは無視、ハウスブロックはそれらを保持します)。ファイル名に場所があれば、自分で読み取ってください。EXIFがないファイルの日付は、多くの場合間違っています(再保存された写真は保存日を保持します)。確認してください。場所が不明な場合は、1つ質問し、他のすべての作業を続けてください。
  • すでにブック(モーメントファイルのフォルダ)を持っている場合、新しいページはそれに加わります。すべてのファイルを一緒にビルドします。

基準

4つの例が基準です。何かを手渡す前に、最も近い例と比較してください。

  • 4~6個のストーリーピースが3層以上(奥、中、手前)に配置されていること。エンジンは6個を超えると拒否します。4個未満では空っぽに見えます。
  • スカイダイヤル以外に2つの遊び要素:読者がタップするもの(鐘、カモメ、ドア)と、ドラッグするもの(引きタブ、レバー、スライダー、回転絵)。check.mjsは両方をリストアップし、どちらかが空であれば失敗します。kit.mdのセクション1「読者に応答するもの」には、タップまたはドラッグを受け付けるすべての紙片がリストされています。写真や一行にタップできるものが何もない場合は、何かを追加する前に1つ質問してください(「他に何かありましたか?鳥、旗、鐘、ドアなどは?」)。答えが「いいえ」の場合は、基準に満たないことを明記してページを渡してください。
  • 1つの生きているループ。シーン内の何かが昼間に自動で動くもの:交通、ライダー、ボート、蒸気、鳥、旗、葉。写真や一行の中で動いたり存在したりするものを選んでください。タップ、ドラッグ、開ききっかけはカウントしません。check.mjsはalive:を表示し、空の場合は失敗します。
  • キットを優先。既存の紙片から構築できるものはすべてそれを使ってください。丘、木、生け垣はレイヤーバンドとして。ランプ、フィギュア、ライダー、鳥。新しいキットの紙片は、送り主が指さすであろう唯一のもののためだけに、そして1ページあたり最大1つまで(「新しい紙片」を参照)。
  • 写真または一行にあるものだけ。装飾用の小道具は追加しないでください。写真がシンプルなためにシーンが薄くなる場合は、何かを創作するのではなく、その旨を伝えてください。
  • ハウスのライトとブックは変更しない。new.mjsはハウスブロック(ブックの形状、表紙、ページエッジ、ランプ、照明、カメラ)を書き込みます。昼は柔らかいスタジオライト、夜はランプのついた月明かりです。時刻と天気はパレット、スカイダイヤル、ランプに存在し、照明には決して存在しません。
  • フィギュアは特段の指定がない限り送り主です。写真に基づいて服装を設定します(palette.figure:コート、マフラー、脚、髪、肌)。一行だけの場合は、送り主が何を着ていたかを言わない限り、例のフィギュアの色を維持し、ノートに推測したことを記載します。写真にマフラーがない場合:scarfをコートの色に設定します。送り主が言及していない人、ペット、仲間を決して追加しないでください。

ワークフロー

  1. 写真を読む。python3 scripts/photo.py <photo> --swatches swatches.pngを実行し、その後自分で写真を見ます:何が奥、中、手前か。送り主が指さすであろう唯一のもの。自動で動くものと触れられるもの。時刻。天気。
  2. シーンブリーフ(自分のノート):綴じ方(side、V折りパノラマ、ほぼすべての場合)。奥から手前へのレイヤーとそれぞれのキットの紙片。タップとドラッグ。生きているループ。夜を担うもの(ランプ、窓、ダイヤルの月、ヘッドライト)。photo.pyの推測からのパレットを、明るく暖かく一段階上げたもの(ブックは紙であり、印刷物ではありません)。紙片が読み取るキーに絞り込みます(kit.mdセクション3)。
  3. ページを開始する。`node scripts/new.mjs --place

関連スキル