PaPoo
cover

Claude CodeでUIを揃える話を読んで考えたこと

最初に思ったのは、「AIに実装させると、デザインが崩れるのはそりゃそうだよな」ということだった。
人間のチームでも、コンポーネントをちゃんと共通化していないとボタンの角丸や余白が少しずつズレていく。そこに coding agent が入ると、毎回“それっぽい最適解”を新しく作ってしまう。この記事は、その当たり前の厄介さをかなり実感のある形で書いていて、妙に納得した。

特に引っかかったのは、著者が「デザインの問題」ではなく「コードベースの構造の問題」として見ているところだ。
見た目がバラつくのは、AIのセンスが悪いからというより、参照すべき標準がコードの中に存在しないからだ、という発想はかなり筋がいいと思う。UIを shared folder に寄せて、そこ以外で勝手に新しい部品を作らせない。これは地味だけれど、AI時代のフロントエンドではかなり重要な統制だろう。

一方で、少し怖さもある。
「このフォルダ以外で新しいUIを作るな」と厳しく縛るのは有効だけれど、運用を間違えると今度は柔軟性が死ぬ。新しい表現が必要な場面まで既存部品に押し込めると、アプリが逆に窮屈になるはずだ。だから本当に大事なのは、禁止を増やすことより、共通部品を更新する手順をちゃんと回すことなんじゃないかと思う。AIに守らせるルールは必要だけど、そのルールが「新しいものを作れない」になった瞬間に、別の問題が出る。

それでも、レビューagent に「共通UIを使っていないものを重めの指摘にする」と教えるくだりは実務っぽくて面白かった。
たしかに、こういうズレは軽く見積もられがちだし、後から直すと地味に高くつく。見た目の統一は“余裕があればやるもの”ではなく、開発速度を保つための仕組みなんだ、という感覚はかなりよく分かる。


参考: How to Build Consistent Designs with Claude Code | Towards Data Science

同じ著者の記事