AI駆動開発でフロントエンド開発はこう変わる - Fenrir Engineers

フロントエンドエンジニアの大山です。AIエージェントを利用した開発によってフロントエンド開発がこれまでと大きく変わっていることを実感しています。 AI駆動開発導入前 デザイナーが作成したFigmaやXDファイルの数値（フォントサイズやマージン、カラーコードなど）を目視確認しながらコーディングしていました。 また、Chrome拡張機能（PerfectPixelなど）でデザインのスクリーンショットを半透明にして重ね合わせ、ピクセルパーフェクトを実現していました。 AI駆動開発導入後 AIエージェントがデザインデータの構造を直接解釈します。それを元にAIがコードを生成します。 生成されたコードとデザインカンプの差異をAIが把握して自動的に修正作業を行います。 人間は生成されるコードの精度を上げることに注力します。 以下で、その具体的な手法を紹介します。 Figma MCP サーバー Figma