デザインのギャラリー「flavors」の30秒紹介動画

flavorsは、配色・書体・余白・角丸・動き・部品の決まりをまとめた「flavor」を集めたギャラリーです。気に入った雰囲気を選んで調整し、DESIGN.mdや単一ファイルのページ、Tailwind v4とshadcnのキットとしてコピーしてエージェントに渡せます。渡したあとは「redesign my page in this style」のように頼むだけで、エージェントがその雰囲気でページを作り直します。

0〜2秒　花びらが1枚ずつ開くロゴと、「Design vibes your agent can taste.」の一文が出ます。

2〜4.5秒　エージェントの窓にプロンプトと進み具合が流れ、右にページができていきます。

4.5〜7.8秒　同じ見た目のページ3枚が「＝」でつながって揺れ、Inter・Gradient・Rounded cardsの札が付きます。

7.8〜11秒　プロンプトを3回言い換えても、毎回同じページが作り直されます。

11〜13秒　同じページの格子が流れ、自分のページの枠が埋もれて消えます。

13〜15秒　ロゴが大きく開き、「Taste you can paste.」が出ます。

15〜20秒　製品と同じ黒いギャラリーで雰囲気のカードを1枚選ぶと右のページが着せ替わり、Shuffleで配色が変わります。

20〜25秒　DESIGN.mdの中身を見せてコピーし、エージェントの入力欄へ渡すと「Redesign my page in this style.」でページができます。

25〜27.5秒　ジェラートのコーンにスクープが3つ積み上がり、カードなしでコピーできることを示します。

27.5〜30秒　ロゴとflavors.designのURLで締めます。

製品名にちなんでジェラートの店先を舞台にし、ココア色の地にワッフルコーンの格子を流して、場面のつなぎはロゴの花びらの色のスクープが下から満ちる形にしました。ギャラリーに実際に並んでいるカードは実在サイトをもじったものなので使わず、雰囲気のカードはすべて新しいものにしています。製品画面の部分はサイトと同じ黒い窓とHot・New・Upvotesの切り替えで見せています。

製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。