株式会社カミナシで VPoE を務めている pospome です。 (´・ω・`)
先日 "Chrome DevTools MCP" というMCP Serverが存在することを知りました（チームメンバーが教えてくれた）。 これによって日々沼っていたCSS修正の効率が上がって嬉しかったので記事として残します。
CSSの実装に沼る日々
自分は最近プライベートの時間をつかって TypeScript, React の勉強をしています。 GitHub Copilot を使いながら簡単なアプリケーションを作っていて、 コードを実装してもらったり、不明点を説明してもらったり、Copilotさんのお陰で勉強効率がグッと上がった気がします（AIってすごいですね・・・）。
Copilotさんは自分が作る簡単なアプリケーション程度であれば、かなり精度高く動いてくれますが、デザインの修正だけは上手く動いてくれないことがあります。 というのも、Copilotさんは実際にブラウザ上に表示されるCSSを読み取って実装することができないからです。 CSSが定義されているファイルを読み取って実装するだけだと、デバッグのようなことができないので、いくらCopilotさんといえど「このテキストを中央揃えにして欲しい」という一見簡単な修正も沼ることがありました。そして、自分もCSSが全然わからないので、自分で対応することもできません。こうなると詰みです（テキストの中央揃え程度で詰むCSSスキルは笑えますね・・・）。
"Chrome DevTools MCP" を使うと嬉しい
ググればいくらでも情報出てくると思うので詳細は割愛しますが、要は実際にChromeを立ち上げて、AI Agent がそこにアクセスできるようになるやつです。 実際に表示されているCSSを読むこともできますし、 パフォーマンス計測 & 改善などを始めとする "人間が普段 Chrome DevTools でやっている作業" をAI Agent にお任せできるようになる余地があります。
これを利用することによってCopilotさんは実際に表示されている画面のCSSを読み取れるようになるので、 実装の精度が上がります。
ただ、自分はCSSが全然わからないので、見た目が要件通りになったとしても、そのCSS実装にどの程度の妥当性があるのかは判断できません。 「見た目がそれっぽいからいーか」という感じです。 "ちゃんとした実装をするにはAIを使う側にも最低限のリテラシーが求められる" というのを実感した気がします。
まとめ
自分はCSSの修正にしか使っていませんが、色々と使えそうで、わくわくする仕組みです。
宣伝
株式会社カミナシでは以下のポジションをすごく募集しています。 興味のある方は応募してみてください。