はてなブックマーク

はじめに 業務でWebサイトリニューアルをやっています。 テキスト量の多い静的ページを、Figmaデザインからモック（HTML/CSS）→ Laravel組み込み（3言語対応）まで実装する作業がありました。 最初は手作業で1ページ8時間かかっていました。 Figma MCP + Claude Codeを導入したら、1ページ20分になりました。 この記事はその経験の所感です。 前提：必要なもの この方法を実現するには以下が必要です： Figma 有料プラン（Dev Modeが使えるプラン） Figma MCP は Dev Mode 経由でデザインデータにアクセスするため、開発者モードが有効なプランが必須 Figma側でAuto Layoutがきちんと活用されていること Figma MCPが返すレイアウト情報（gap, padding, flex direction等）はAuto Layout