デザインツール「Graphical」の90秒紹介動画

Graphical は、色・明暗・書体・余白・アイコン・角丸と影・部品の状態・動きといった見た目の言語を画面で作り、Base UIのReact部品として使えるツールです。shadcnで入れるか直接ダウンロードでき、コーディングエージェント向けにGUI.mdとテーマの参照、作る・既存の画面に当てる・ずれを直すための3つのスキルが付きます。ChatGPT・Claude・Cursor・Grokなどで使え、テーマのファイルはiOSやAndroidにも渡せます。

0〜10秒　ロゴと見出しのチップが入れ替わったあと、Claude Codeでスタートアップのアプリを作るデザイナーが紹介されます。

10〜16秒　エージェントが作った3つの画面が、どれも同じ灰色の既定の見た目で並びます。

16〜22秒　画面が増えるたびに灰色の種類が増え、角丸も余白もばらばらになっていきます。

22〜28秒　見た目を言葉で伝える長い指示が続き、見本がうまく届きません。

28〜36秒　3つの困りごとが札にまとまったあと、黒いテーマに切り替わってロゴが現れます。

36〜48秒　テーマの編集画面でStyleやColor、Typographyを選ぶと、同じ3つの画面がその場でテーマを着ます。

48〜60秒　ばらばらだった色と角丸が、色・余白・角丸のトークンの段階にまとまり、ずれを見つけて直します。

60〜72秒　shadcnでテーマを入れ、GUI.mdを読んだエージェントがそのテーマで新しい画面を作ります。

72〜82秒　5つのスタイル、明暗、どのエージェントでも使えること、iOSやAndroidにも渡せることを並べます。

82〜90秒　ロゴと見出しの文、graphicalui.comで締めます。

場面が変わるたびに地の色やカードの色、強調色、角丸、書体の太さが切り替わり、画面全体のテーマが変わるように見せました。困りごとの間はどの画面も同じ灰色の既定のテーマにし、登場で黒、解決では場面ごとに個性のあるテーマへ変えています。下の補足は最後の語がサイトと同じアイコン付きのチップになって言い換わる形にしました。

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