新卒エンジニアが挑んだ Cursor × FigmaMCPでの高速UI実装/Canly Tech Hub

#リンモチ
Canly Tech Hub ~vol.1~ みんなで学ぼう！開発現場におけるMCPの活用事例LT会(2025/08/07)

==========================================
【イベント情報】
■イベントページ
https://connpass.com/event/361426/

【株式会社リンクアンドモチベーション】
■お問合せ先
　engineer_pr@lmi.ne.jp
■テックブログ
　https://link-and-motivation.hatenablog.com/
■開発組織の公式X
　https://x.com/LinkandM_dev
============================================

Transcript

1. © Link and Motivation Group 新卒エンジニアが挑んだ Cursor × FigmaMCPでの高速UI実装 株式会社リンクアンドモチベーション Engagement Product ユニット 井上萌
2. © Link and Motivation Group 2 はじめに
3. 3 © Link and Motivation Group 井上 萌 株式会社リンクアンドモチベーション Engagement Productユニット • 2024年 新卒入社 • 2024年 10月〜 エンジニア未経験からFEとして活動 自己紹介
4. 4 © Link and Motivation Group 創業年月日｜2000年4月7日 上場市場 ｜東京証券取引所 プライム市場 従業員数 ｜約1,500名 (グループ全体) 売上 ｜374億 (グループ全体) ※2024年12月期 事業内容 ｜組織改善を支援する『モチベーションクラウド』を提供 株式会社リンクアンドモチベーション 会社紹介
5. © Link and Motivation Group 5 今日お話したいこと
6. エンジニア歴約1年の自分がMCPを使って成果を出せた 若手こそ、AI開発を試してみよう！
7. 7 © Link and Motivation Group MCPを試した背景 当時の新機能開発PJTにおいて • 開発速度を早めたい PJT観点 • はじめて触るプロダクト、 知らない技術... • 初のPJT参加。実務経験 がほとんどない中での新 機能開発... 個人観点
8. 8 © Link and Motivation Group MCPを試した背景 経験・知識が浅いからこそ、 AIを活用して爆速開発しよう！ チャレンジ！
9. 9 © Link and Motivation Group 3 QA 2 機能実装 何をしたのか 1 マークアップ 0 設計 リリース CursorとFigmaMCPで デザインからコードを出力 今日話すこと
10. 10 © Link and Motivation Group AI活用の結果 1日で1画面の静的実装が完了！！ 約7.5人日→約2人日
11. © Link and Motivation Group 11 実際の取り組み
12. 12 © Link and Motivation Group FigmaデザインをもとにCursorで実装 このデザインをもとに実装して！
13. 13 © Link and Motivation Group FigmaデザインをもとにCursorで実装 15分で完成！！ < / >
14. © Link and Motivation Group 14 具体的な実装方法
15. 15 © Link and Motivation Group FigmaMCPでできること • デザインの取得 • コンポーネント構造の分析 • デザインからのコード自動生成 • デザイントークンの抽出 • デザインコメントの参照 • etc…
16. 16 © Link and Motivation Group FigmaMCPの導入方法 参考： Figma MCP × Cursorで加速するUI実装とその先の工夫 https://zenn.dev/superstudio/articles/91ceb2f2f1d784 Figmaから取得したAPIキーを使用し、.cursor/mcp.jsonファイルに設定
17. 17 © Link and Motivation Group デザインのリンクを取得 Figmaデザインを右クリック
18. 18 © Link and Motivation Group Cursorでの指示 1. Figmaリンク 2. ページ構成 3. スタイル 4. コンポーネント設計 5. ディレクトリ構成 6. ルーティング 7. アクセシビリティ 8. 画像 9. 最終確認 プロンプト プロンプト構成要素 プロンプトもAIで作成！
19. © Link and Motivation Group 19 試行錯誤で学んだFigmaMCPの活用ポイント
20. 20 © Link and Motivation Group MCPの活用ポイント Point 1 Point 2 Cursor ruleの整備 実装単位の大きさ Point 3 デザインの構造
21. 21 © Link and Motivation Group Point1：Cursor ruleの整備 1. Figmaリンク 2. ページ構成 3. スタイル 4. コンポーネント設計 5. ディレクトリ構成 6. ルーティング 7. アクセシビリティ 8. 画像 9. 最終確認 プロンプト プロンプト構成要素
22. 22 © Link and Motivation Group Point1：Cursor ruleの整備 1. Figmaリンク 2. ページ構成 3. スタイル 4. コンポーネント設計 5. ディレクトリ構成 6. ルーティング 7. アクセシビリティ 8. 画像 9. 最終確認 プロンプト プロンプト構成要素 ruleに切り分け 可能
23. 23 © Link and Motivation Group Point1：Cursor ruleの整備 1. Figmaリンク 2. ページ構成 3. スタイル 4. コンポーネント設計 5. ディレクトリ構成 6. ルーティング 7. アクセシビリティ 8. 画像 9. 最終確認 プロンプト プロンプト構成要素 ruleに切り分け 可能 Cursorのルールが整っていれば、プロンプトも簡潔で済む
24. 24 © Link and Motivation Group Point2：小さな単位で指示を出す 出力が安定せず... 出力 出力 < / > < / > コンパクトな指示で安定！ BEFORE AFTER 画面丸ごと コンポーネントごと
25. 25 © Link and Motivation Group Point2：小さな単位で指示を出す 出力が安定せず... 出力 出力 < / > < / > コンパクトな指示で安定！ BEFORE AFTER 画面丸ごと コンポーネントごと 1画面という大きな範囲を実装させるよりも、 実装単位が小さいほど圧倒的に精度は高い
26. 26 © Link and Motivation Group Point3：デザインの構造
27. 27 © Link and Motivation Group Point3：デザインの構造 デザインからの影響も大きい。 デザインもAI実装を前提に作成する必要がある。
28. © Link and Motivation Group 28 MCP活用で得られたメリット
29. 29 © Link and Motivation Group MCP活用で得られたメリット • 約7.5人日→約2人日 の速 度 • 意思決定の高速化 PJT観点 • リリースに貢献できた • 学習サイクルの加速 個人観点
30. 30 © Link and Motivation Group MCP活用で得られたメリット • 約7.5人日→約2人日 の速 度 • 意思決定の高速化 PJT観点 • リリースに貢献できた • 学習サイクルの加速 個人観点
31. 31 © Link and Motivation Group PJT全体の意思決定速度が向上 UI・UXの議論 →デザイナーがデザイン案作成 →エンジニアがFigmaMCPで高速実装 →全員で見ながら議論 PJT観点 実装~検討までのリードタイム短縮！検証数が増やせた
32. 32 © Link and Motivation Group 学びの速度向上 この部分がわからないので、 何をしているのか初心者にも わかるように説明して！ AIが実装したコードから学びが沢山得られる！！ 個人観点
33. 33 © Link and Motivation Group 学び AI実装することで、知識が身につかないのでは？
34. 34 © Link and Motivation Group 学び AI実装することで、知識が身につかないのでは？ →AIを使うことで学びのサイクルが高速化
35. © Link and Motivation Group 35 最後に
36. 新人こそ、AI開発で成長できる！成果を出せる！
37. 37 © Link and Motivation Group お知らせ • エンジニアリングマネージャー • テックリード • サーバーサイドエンジニア • フロントエンドエンジニア • SRE • データエンジニア • CRM • プロダクトマネージャー • プロダクトデザイナー 技術広報の公式Xで、定期的に発信しています。 ぜひフォローをお願いします！ 全職種、積極採用中です！