flavorsの紹介動画｜デザインのギャラリー
配色・書体・余白・角丸・動き・部品の決まりをまとめた「flavor」を集めたギャラリーです。
FablessBridgeによる自主制作の紹介動画
概要
コーディングエージェントにデザインの雰囲気を渡すギャラリー「flavors」の30秒の紹介動画です。どれも同じに見えるページが、選んだ雰囲気をエージェントに渡すことで着せ替わるまでを見せています。
動画の要点
- エージェントに作らせたページがどれも同じ見た目になる悩みに対して、ギャラリーで雰囲気を選ぶと同じページが着せ替わる様子を見せました。
- センスをプロンプトの言葉で伝えきれない悩みに対して、DESIGN.mdをエージェントに渡し1行の依頼でページができる流れを見せました。
- 選んだ雰囲気が手元のページに合わない場合に備え、Shuffleで配色を変えられることも解決の場面に入れました。
動画の流れ
- 00:00花びらが1枚ずつ開くロゴと、「Design vibes your agent can taste.」の一文が出ます。
- 00:02エージェントの窓にプロンプトと進み具合が流れ、右にページができていきます。
- 00:04同じ見た目のページ3枚が「＝」でつながって揺れ、Inter・Gradient・Rounded cardsの札が付きます。
- 00:07プロンプトを3回言い換えても、毎回同じページが作り直されます。
- 00:11同じページの格子が流れ、自分のページの枠が埋もれて消えます。
- 00:13ロゴが大きく開き、「Taste you can paste.」が出ます。
- 00:15製品と同じ黒いギャラリーで雰囲気のカードを1枚選ぶと右のページが着せ替わり、Shuffleで配色が変わります。
- 00:20DESIGN.mdの中身を見せてコピーし、エージェントの入力欄へ渡すと「Redesign my page in this style.」でページができます。
- 00:25ジェラートのコーンにスクープが3つ積み上がり、カードなしでコピーできることを示します。
- 00:27ロゴとflavors.designのURLで締めます。