いろいろなソフトウェアをAIに作らせてみてなかなか思い通りにいかずに苦労するのがUIデザインです。見た目がかっこいいとかではなくて、この画面は何をする画面で、どういう構成要素があるのか、という伝達がうまくいかない。2ペインで左にはツリービューがあって・・・みたいにテキストで伝えても、いまいち伝わっているのかどうか。何度も往復して時間もトークンも浪費して、ということがよくありました。
ラフなUIデザインをうまくAIに伝える方法はなにかあるのか、いろいろ調べたりしましたがいまいち、自分のニーズに合うものが見当たりませんでした。
- Figma。一時期すごい流行ったが、どちらかというと、ここで作ったものがそのままシステム化できるという、デジタルコンテンツ作成ツール的な使われ方だったと思うのでラフ用にはオーバースペック
- Salt。フォーム要素とかの細かい定義には良さそうだが、ペインを分けて右にフォーム、みたいな大まかなラフにはちょっと向かない。というかこれならHTMLの方がみんな慣れてそう
- draw.io。UI部品集がある。が、絵でしかなく「ここは右寄せで」みたいな意図が入れづらい。
- PowerPointとかExcel。単なる絵でしかないし、トークン消費が多くなりがち。
- Qt CreatorやXAMLなどのフォームデータをそのまま使う: ツールが重すぎるのと、そのまま動かす前提なので細かい定義ができすぎてしまう。意図があってもものかデフォルトなのかの区別がしづらい。
- HTML。デフォルトだとUI部品としては弱いが、ツールキット使うとリアルになりすぎたり加減が難しい。
そもそもAI以前は、既存のPowerPointに書いちゃう or 自動コード生成のためにFigma、みたい感じでラフスケッチを作る独立したツールのニーズがそもそもあまりなかったのではないか、と思ったりもしました。
人間との対話でも、Figmaで「リアルっぽい絵」を作ってしまうと、なんとなく良いものに見えてしまって議論が返って進まず、実際にできてから「こうじゃなかった」となりがちというのも聞きます。そういうところもカバーしつつ、AIとの対話のトークン数を減らすためのツールを作ってみました。こんな感じのラフが出るツールです。あえてリアルっぽく見せないデザイン。
UI定義のトークンを減らす
UIのデザインを伝える上で大事なのは親子関係を維持しつつ、どんな要素があるか、大まかなレイアウトがどうなっているのかを伝えることかな、と思います。逆に詳細な情報は相手がiOSのツールきっとなのか、ウェブなのか、いろんな文脈で変わってきます。そこの現実との橋渡しはAIが得意なところなので、がんばりすぎないようにしています。promptという属性でAIエージェント向けの情報も書けるようにしています。それらの意図や使えるコンポーネントの種類とかをAIに教えるためのskillsも作ってあります。
```uisketch |
ちょっとウェブのチャットに渡したい場合などのため、あるいはうまくプレビューできないエディタのためにプレーンテキストのアスキーアートでも出力できるようにしています。これをコピペして意図を伝えることもできます。
┌──────────────────────────────────────────────────────────────────────────────┐ |
ChatGPTに聞いたところ、アスキー形式も悪くないが、オリジナルのYAMLコードが一番トークンを節約できるだろう、とのことでした。SVGは基本人間向けです。
実際、これをもとにウェブエディタを作ってもらいましたが、以前とは違って意図を大外しすることはなくなりました。余計なタブを追加してきたりとか要件にない機能を追加してきたりはしましたが、現物がある状態でそういう指摘を加えていくのは比較的容易です。
変換ツール
Go製のuisketchというコマンドラインツールを提供しています。renderサブコマンドで、markdownファイルの中にある、uisketchというフォーマット(実態はyamlだが)のコードフェンスを見つけてSVGやASCIIアートが生成できます。
また、markdownサブコマンドで、markdown自体を書き換えて、レンダリングした結果の絵が表示されるようにします。ただし、コメントで元のソースも残して、再実行などもできるようにしています。これでGitHubにpushしても人間にも優しいと言えます。
ウェブエディタ
いくらskillsがあっても、結局人間が言葉で伝えて作らせると、苦労するタイミングが先に移動するだけで苦労の総量は変わりません。ビジュアルなエディタが欲しくなるはずです。GitHub Pagesで触れるようにしています。ドラッグアンドドロップで部品を並べると、ソースができて、プレビューが見れてSVGやascii artもダウンロードできます。ローカルでも動かせますし、Wails(Go用のTauriみたいな)のデスクトップアプリも作ってます。
まとめ
生成AIのコーディングエージェント周りは日々いろんなニュースが飛び交っています。もっと賢くなって全自動だ！という進歩を前提とした流れがありつつも、やはり、将来的には固定料金モデルがなくなっていくのではないか、というのをうっすら思っている人が多そうです。どんな未来が来るにせよ、ポイントとなるのはいかに効率よく、少ないトークン数でAIに意図を伝えるか、というところがポイントになっていくんだろうな、と思っているところです。
AIにラフデザインを提供する、というのに特化したツールを作ってみて、実際にそれ用のウェブエディタの実装のためにドッグフーディングをしてみて、意図通りのものができました。まだskillsが完成前だったので実際のワークフローはこれから試そうと思っています。あとはVSCodeのmarkdownプレビュー拡張とかも作りたいですね。
AIのおかげで「きちんと定義されたデータ構造から、苦労を重ねたテンプレート定義を使ってコード生成」というやり方から「意図だけ伝えて、あとはAIの持つ知識を活用して良い感じにコード生成」とやり方が大きく変わってきているのを感じます。そのムーブメントに乗るべく今回は作ってみています。ラフデザインに特化しているため、似たような画面で、テーブルのカラム定義が違うものを量産、みたいな用途は想定していません。おそらくそういうユースケースはプロジェクトごとに定義ツールとかジェネレータが作られるようになるでしょう。こんな感じで、ツールに求められる特性が大きく変わってきているので新しいツールを作るチャンスがいっぱい転がっていますね。
Markdownがカバーしきれなくて、Excelが登場しがちな領域をカバーするツールは今後もちょくちょく作っていきたいですね。