概要
https://speakerdeck.com/yug1224/2025-08-29
詳細内容
## Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
https://speakerdeck.com/yug1224/2025-08-29
本発表は、Model Context Protocol（MCP）をFigma、Storybook、Playwrightといった主要ツールに適用し、AI駆動のフロントエンド開発ワークフローを劇的に加速させる具体的な手法を提示します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:4/5 | Unique:5/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 90/100 | **Annex Potential**: 90/100 | **Overall**: 88/100
**Topics**: [[Model Context Protocol (MCP), フロントエンド開発ワークフロー, AI駆動開発ツール, デザインシステム, 自動テスト]]
本発表は、AIアプリケーションと外部ツール・データ源を連携させるオープン標準であるModel Context Protocol（MCP）をフロントエンド開発に適用し、開発ワークフローを劇的に改善する具体的な手法を解説しています。ウェブアプリケーションエンジニアにとって重要なのは、「仕様作成からPRレビューまで、いかにAIを統合し、開発効率を最大化するか」という問いに対する実践的な回答が示されている点です。
具体的には、Figma、Storybook、Playwrightといった主要な開発ツールとMCPを連携させることで、各フェーズでのAI活用がどのように可能になるかを詳述しています。例えば、Notion MCPは仕様・要件定義の自動取得と整理を、Figma MCPはデザイン要素の分析とコンポーネント仕様確認を、Storybook MCPはUIコンポーネントの棚卸しと実装前確認の自動化を、Playwright MCPはブラウザ操作の自動化とE2Eテスト実行を、そしてGitHub MCPはセルフレビューや差分サマリの自動生成を実現します。
これらのMCPを導入することで、開発現場では調査工数が大幅に圧縮され、意思決定の頻度が向上、結果として開発サイクル全体の高速化と品質チェックの自動化が実現すると強調されています。特に、手動での確認作業や情報収集にかかっていた時間をAIに任せることで、エンジニアはより創造的で本質的な業務に集中できるようになります。これは、AIを活用した「Argument Coding」やエージェントベースのワークフローを模索するWebエンジニアにとって、実装のヒントと具体的な効果を提示する非常に価値のある内容です。将来的には、Git WorktreeとAIの並行稼働によるさらなる生産性向上の可能性も示唆されており、AI駆動開発の未来像を描く上で示唆に富んでいます。