Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発

Transcript

1. Figma + Storybook + Playwrightの MCP を使ったフロントエンド開発 2025/08/29 #newt_techtalk Dress Code株式会社 / 山口 祐司
2. 自己紹介 2
3. 自己紹介 担当 IT領域のプロダクトエンジニア 経験 フロントエンドエンジニア プロジェクトマネージャー エンジニアリングマネージャー 好きなこと フロントエンドや新しいものが好き ゲーム（オープンワールドアクション系） ぷーじ（@yug1224） 3
4. 会社紹介 4
5. Dress Code 会社概要 Company Name CEO Date of Establishment Location Member |　Dress Code株式会社 |　江尻 祐樹 |　2024年9月 正式創業: 2025年4月 |　東京都中央区築地2-1-4 銀座 PREX East 8F |　21名 Pre Seed & Seed Round 14.1億円 資金調達を実施 Number of companies 180+社 が利用中 Number of countries 4カ国 で事業を展開 5
6. 挑戦する事業ドメイン/マーケット Dress Codeが初めに挑戦するのは、グローバル（まずアジア）のWorkforce Management領域全体 6
7. ビジネスモデル ビジネスモデルはDRESS CODEというひとつのプロダクト上に、 直接サービス提供するSaaSとストアやマッチングを行うマーケットプレイスの2つのモデルです。 7
8. 技術スタック 採用言語はフロントエンドもバックエンドもTypeScript。AIはNotion AI, Cursor, Devin, Geminiなどを 主に利用していますが、他にも使いたいものがあれば柔軟に導入しています。 8
9. Figma + Storybook + Playwrightの MCP を使ったフロントエンド開発 2025/08/29 #newt_techtalk Dress Code株式会社 / 山口 祐司 9
10. AGENDA MCPとは 実際に利用しているMCPの紹介 DEMO まとめ 10
11. MCPとは 11
12. MCP（Model Context Protocol）とは 定義：AIアプリと外部ツール・データ源をつなぐオープン標準 目的：モデルが必要なコンテキストを統一手順で安全に取得・実行 通信：JSON-RPC 2.0ベース + セッション管理 12
13. MCPの構成要素 Tools: 実行可能な操作（検索/作成/更新など）をエージェントが呼び出し Resources: 読み取り可能なコンテンツ（文書/DB項目/デザイン等） Prompts: 再利用可能なプロンプト定義（テンプレート） Events: サーバー→クライアントの通知（更新/進捗） 13
14. MCPのアーキテクチャ Host: 実行環境（IDE/エージェントアプリ）。サーバー起動/接続、権限/環境変 数、トランスポート管理 Client: モデル/エージェント側。サーバーのTools/Resources/Promptsを利用 Server: Notion/Figma/Playwright/GitHub等へのブリッジを提供 14
15. 実際に利用しているMCPの紹介 15
16. 開発フローの全体像 仕様 → デザイン → UIコンポーネント → 実装 → PR という流れで進行 開発プロセス 仕様確認 → Notion MCP デザイン確認 → Figma MCP UIコンポーネント確認 → Storybook MCP 実装確認 → Playwright MCP PR確認 → GitHub MCP MCPの実効果 調査工数の圧縮 意思決定頻度の増加 開発サイクルの高速化 品質チェックの自動化 16
17. Notion MCP：仕様確認 できること ページ・データベースの参照・横断検索 データベースのクエリ（フィルター・ソー ト） ページ・アイテムの作成・更新 ブロックの取得・追加・更新・削除 ユースケース 仕様・要件定義の情報取得 不具合の環境情報取得 設定方法 { "mcpServers": { "Notion": { "url": "https://mcp.notion.com/mcp" } } } プロンプト例 <Notion URL> Notionから要件を確認してください AsIs-ToBeは何か整理してください 17
18. Figma MCP：デザイン確認 できること ファイル・ノード取得 スタイル・トークン参照 コンポーネント仕様参照 アセット書き出し ユースケース 実装前の仕様確認 デザイントークンの確認 コンポーネントの確認 設定方法 { "mcpServers": { "Figma": { "url": "http://127.0.0.1:3845/sse" } } } プロンプト例 <Figma URL> Figmaで選択中の要素を確認してください その要素はどんな要素ですか？分析してください 18
19. Storybook MCP：UIコンポーネント確認 できること ストーリー一覧の取得 ストーリーの検索・フィルター ストーリーのメタ情報取得 Docs・args・parametersの参照 ユースケース コンポーネント棚卸し 実装前確認の自動化 ストーリー資産の可視化 設定方法 { "mcpServers": { "Storybook": { "command": "npx", "args": ["-y", "mcp-storybook@latest"] // 非公式のStorybook MCPなので注意 } } } プロンプト例 Storybookからコンポーネントの情報を取得してください Dateに関連するコンポーネントはありますか？ 19
20. Playwright MCP：ブラウザ動作確認 できること ブラウザ操作の自動化 スクリーンショット・トレースの取得 コンソール・ネットワークログ取得 E2Eテストの実行と結果取得 ユースケース E2Eテストの自動実行 スクリーンショット比較によるビジュアルチ ェック 設定方法 { "mcpServers": { "Playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest"] } } } プロンプト例 <Local URL> PlaywrightでURLにアクセスしてください ボタン押下したあとに、確認モーダルが表示されることを確認してください コンソールエラーを確認して、対応計画を検討してください 20
21. GitHub MCP：PR確認 できること リポジトリ・ブランチ・ファイルの参照 Issue・PRの検索・取得 PRの差分・変更ファイル・レビュー取得 コメント・レビューの作成・提出 ユースケース セルフレビューの自動化 差分サマリと影響範囲の確認 CI結果サマリ取得と再実行トリガー レビュー依頼やラベル付与の自動化 設定方法 { "mcpServers": { "GitHub": { "url": "https://api.githubcopilot.com/mcp/", "headers": { "Authorization": "Bearer <TOKEN>" } } } } プロンプト例 <GitHub PR URL> PRの内容を確認してください 冗長で不要な処理はありますか？ 既存の他実装パターンやアーキテクチャルールと乖離はありますか？ LOW, MEDIUM, HIGH, CRITICALの観点で改善案を検討してください PR説明文の改善案を検討してください 21
22. DEMO 22
23. Figmaで選択中の項目を実装したいです @dresscode-frontend/project-structure.mdc 既存の他実装やアーキテクチャルールを参考にしてください 利用するUIコンポーネントはStorybook MCPから探してください <URL> Playwright MCPを利用して実装を確認しながら進めてほしいです まずは実装計画を検討してください 23
24. 0:00/ 0:54 24
25. まとめ 25
26. まとめ MCPを使った開発フローで調査工数が大幅に圧縮され、意思決定の頻度を格段に向 上させることができました。 仕様からPRまでの一気通貫なプロセスにより、単純作業の時間を削減し、開発サイ クル全体が高速化しています。 まずは、Figma・Storybook・Playwright MCPから始めて、デザイン→UI→動作 の確認を自動化してみてください。 さらに、Git Worktreeを活用したAI並行稼働で、さらなる開発生産性向上も期待 できそうだなと思っています。 26
27. One more thing... この資料も、MCP/AIを利用して作成しました。 Marpのカスタムテーマ作成 資料作成前のWeb検索・要点整理・実装計画の作成 発表資料作成 27
28. Thank you for your attention. We are Hiring! 28
29. 参考資料 https://modelcontextprotocol.io/docs/getting-started/intro https://www.anthropic.com/news/model-context-protocol https://developers.notion.com/docs/mcp https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the- Dev-Mode-MCP-Server https://github.com/dannyhw/mcp-storybook https://github.com/microsoft/playwright-mcp https://github.com/github/github-mcp-server https://marp.app/ 29