NewJeans「Cookie」のミュージックビデオから7秒間の動きを選び、Canvas 2DとCSSで再構成したスクロールリールです。元映像のフレームは使わず、色、形、動きの関係をコードとして描き直しました。
コードを一次資料にする
この制作では、完成した実装をAIへ渡すデザイン参照として扱いました。画面の見た目を長いMarkdownへ置き換えるのではなく、リポジトリと動くURLをそのまま読ませ、再現したい視覚的な条件だけを補足します。shimonは選んだ画面状態とスクリーンショットを残し、変更後に同じ条件を確認するために使いました。
HyperFramesで映像へ展開する
同じ実装をHyperFramesへ渡し、Cookie単体からジャケット、design.md、盤面へ展開する7秒の映像に再構成しました。静止画や文章へ置き換えず、コードに含まれる色、形、動きの関係を次の表現へ引き継いでいます。
現在の位置づけ
当初は「デザインハーネス」として文章化する方法も試しましたが、現在はデザインテーマを詳細なMarkdownへ圧縮する必要はほとんどないと考えています。モデルが既存のリポジトリやURLを直接読み、背景を含めて解釈できるようになったためです。
この事例は、新しい規格の提案ではありません。デザインを文章だけで定義することの限界と、動く実装そのものを参照にする方が自然だという判断を示す実験です。