デザインを文章だけで定義すると、色や余白の値は渡せても、要素同士の緊張感や動きの間までは固定しきれません。
そこで、好みの判断が入った動く実装を先に作り、AIエージェントが観察して別の文脈へ変換できる参照にしました。
cookie-demo は、NewJeans「Cookie」の7秒間を、実際の映像を使わずCanvasとCSSで再構成したスクロール駆動のリールです。
一つの物体を中心に置く構図、放送画面の整然さと手描きの乱れ、物質の挙動に沿った動きを、コードとして読める状態にしています。
参照を構成する四つの層
動くリールとソースコードを、最も情報量の多い参照に置きました。
design.md は、モチーフをそのまま複製せず、リズムや階層、素材感を別の画面へ移すための判断軸を示します。
SKILL.md は、エージェントが参照を読み、変更の種類を分け、検証する順序を定めます。
Shimonは、リールの状態を再現してJSONへ記録する検証層です。
静止状態と14のスクロール地点で、Canvas、47個のcrumb、要素の矩形、transform、CSS変数、背景を観測します。
スクリーンショットのGPU差分に左右されず、リファクタリング前後で選んだ不変条件が保たれたかを比較できます。
解釈のずれを候補として残す
このハーネスは、同じ見た目を量産するためのテンプレートではありません。
AIエージェントは、媒体やモチーフ、配色、書体、空間設計を変えられます。
元の実装が想定しなかった結果でも、階層、リズム、素材の振る舞いに一貫性があれば、失敗として消さず次のデザイン候補に残します。
ただし、予想外であること自体を評価するわけではありません。
人が全体の構成を判断し、Shimonで既知の挙動変化を確認することで、解釈の自由と回帰検証を分担します。
単独ツールへの分離
Fingerprintの仕組みは、cookie-demo 固有のシェルスクリプトからShimonへ切り出しました。
各プロジェクトは、守りたい状態と観測値だけを shimon.config.mjs に定義します。
Shimon本体は美しさを判定せず、ブラウザ実行、安定化、正規化、保存、差分の共通処理を受け持ちます。
これにより、デザイン参照はプロジェクトごとに解釈の余地を持ち、検証方法だけを別の制作へ再利用できます。
cookie-demo は非公式かつ非商用のファンスタディです。
元映像のフレームは使用せず、画面内の要素をすべて描き直しています。
