/design でUIを作る
Claude Code に /design というスキルが入った。ターミナルから指示を出すと、
配色・書体・余白を決めたUIをブラウザで見られる形にして返してくれる。
このサイトのトップページはこれで方向性を決めた。
リサーチプレビューとして提供されているもので、公開情報では v2.1.233 以降で使える。 手元は 2.1.251 だった。
claude --version
何が返ってくるか
出てくるのはコードではなく、キャンバスという1枚の面だ。 その上にアートボードという板が複数並ぶ。1枚のアートボードが1画面にあたる。
キャンバスは公開リンクとして渡される。ブラウザで開くと拡大縮小して見比べられて、 気になった要素をクリックすると余白や色をその場で直せる。 PNGとPDFにも書き出せる。
つまり、コードを書く前に「見た目の合意」だけを先に取るための道具になっている。
使い方
/design 作りたいものの説明
説明は具体的なほうがいい。私が出したのはこういう指示だった。
- どのページか(トップページ)
- 構成(ヒーロー、左にWIKI、右に開発日記、下に作ったもの、フッター)
- 技術的な前提(Tailwind ではなく既存の globals.css)
- 仕様書の場所
最後の「仕様書の場所」がいちばん効いた。
docs/ に構成を書いたファイルを置いてあったので、それを読ませるだけで
セクションの順番や必須項目の説明を繰り返さずに済んだ。
リポジトリの中で使うと既存の見た目を拾う
これが便利だった点。空のディレクトリではなく、実際のプロジェクトの中で /design を叩くと、
先に既存のCSSやコンポーネントを読みにいく。
うちの場合は app/globals.css にあったブランドカラーのグラデーション、
スレート系の濃度スケール、角丸の数値をそのまま拾ってきた。
「今のサイトに合わせて」と言わなくても合わせにくる。
逆にゼロから作り直したいときは、そう言わないと既存に引っ張られる。 私は「1から作り直す」と明示した。
方向性は複数出させて選ぶ
一発でいいものが出ることは期待しないほうがいい。 実際、最初に出てきた3案は「構成はいいがデザインがダサい」で全部やり直した。
うまくいったのは次の流れだった。
- 骨格(セクションの順番)を先に決める
- 骨格は固定したまま、見た目だけ違う案を3つ出させる
- どれかを選ぶ、あるいは「ここがダメ」と言って作り直させる
- 決まったら見出しの文言だけ別のアートボードで7案並べて選ぶ
3の「ここがダメ」は、理由を言えなくても構わない。 「ダサい」だけ伝えたら、太い黒枠とハードシャドウをやめて 罫線と余白で階層を作る方向に振り直してきた。
4のように、決めたい要素だけを取り出したアートボードを作らせるのは効いた。 ページ全体の中で見出しを比べるより、見出しだけ7つ縦に並んだほうが選びやすい。
気をつける点
文字は勝手に埋まる。 記事のタイトルもプロダクトの説明文も、 それらしいものが最初から入った状態で出てくる。見た目を判断するには要るのだが、 そのまま実装に渡すと、書いていない記事のタイトルが本番に載る。 仮であることを意識しておく。
外部の画像やCDNは読めない。 キャンバスの中は外へ通信できない仕様で、 例外は Google Fonts だけだった。写真を入れたいときは画像を渡す必要がある。
書き出したPDFのフォントは代替になる。 Google Fonts は書き出しに埋め込まれないので、 PDFで見ると別の書体になる。画面で見るぶんには問題ない。
向いている場面
- 実装前に見た目の方向を決めたいとき
- 案を並べて人に選んでもらいたいとき
- 既存プロダクトに新しい画面を足すとき(既存の見た目を拾ってくれる)
逆に、動くものが要るときには向かない。 キャンバスの中身は静止した画面であって、アプリケーションではない。 実装は結局そのあと自分で(あるいはエージェントに)書かせることになる。
このサイトも、方向が決まってから app/page.tsx と app/globals.css を書いた。