はじめに

このサイトは元々自分でFigmaを使ってデザインしていましたが、地味すぎるので直したいとずっと思っていました。

でもコードはほとんどAIに書かせているのに、今どき自分の手でデザインを作成するなんて面倒です。 Vibe codingにはだいぶ慣れてきたので、vibe designを試してみることにしました。

最初からコードを書かせれば良いのでは？

確かに、MCPを介してデザインツールを操作させたりするよりも、直接コードを書かせる方が短期的に見れば早いでしょう。 しかし長期的に見ると、実装を変えるときにうっかり見た目も変えてしまったりすることがあるので、デザインは別で管理しておきたいと思いました。

Penpotを使う

一応まずは公式のFigma MCPを試したのですが、なぜか使えるクライアントをFigma側が絞っていて¹、この方針にはかなり疑問を覚えました。 メジャーなクライアントはサポートされているので実用上は問題ないのでしょうが……何のためにオープンなプロトコルがあると思っているんでしょうか。

ということで代わりにPenpotを使うことにしました。

Figmaの代替としてはOpenPencil²などもありますが、ちゃんと比較してはいません。 なんとなくで選びました。 今のところPenpotにはMCP周りの制限が特になさそうで、ブランチ機能はないもののバージョン管理ができるのでエージェントとの相性も悪くはありません。 機能面でどこまでFigmaに対抗できるかは分かりませんが、静的なページのデザインくらいであれば十分でした。

やったこと

とりあえずMCPの設定をしたら、雑に大まかなイメージだけ伝えてデザインに起こさせてみました。 1回形にさせると「そこはそうじゃなくて〜」というポイントが無限に出てくるので、ひたすらそれを指摘しながら頭の中にあるイメージとすり合わせていくとだんだんマシになってきます。

放っておくとまとまりのないデザインになるので、再利用できるものは再利用させるのが大切です。 意味もなく16pxと14pxのフォントを混在させたり、同じパーツをバカみたいに繰り返し作るといったことを平気でやってくるので、トークンやコンポーネントを作らせてそれを使わせました。

やってみて

自分で手を動かす必要がないため気楽にやり直しができ、色々なパターンを試せるのが良かったです。

作業中の感覚はvibe codingと特に変わらないなぁと感じました。 Penpotにはトークンやコンポーネントを定義する機能があるのに、明示的に使うよう指示しないと愚直に目の前のものを作ろうとします。 たぶんコードを書いているときに何でもかんでも自前実装したがるのと同じ。 ファイル全体である程度トークンやコンポーネントを使うようになっていればそれに合わせてくれるので、AI様の作業が破綻しないようにお膳立てしてあげるのが人間の仕事です。

一方で、プログラムならある程度機械的に検証できますが、デザインは人間向けのものなので人間にしか良し悪しを決められないというのはvibe codingとの大きな違いだと思います。

おわりに

分かりきっていたことですが、AIを使ったからといって自分の能力以上のものを出せるわけではありませんでした。 違和感を感じた部分に対して自分がしっくり来るような修正をさせていくと、最終的には自分でも作れるようなデザインに収束します。 実際新しくなったこのサイトも地味めですしね。

結局のところvibe designでも優れたデザインを作れるかは人間がうまくAIをナビゲートできるかにかかっているので、ちゃんとデザインの勉強をしたいと思いました。