Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20250527_NEWT‐Tech-Talk_fukuda
Search
reiwa-travel
May 27, 2025
0
330
20250527_NEWT‐Tech-Talk_fukuda
reiwa-travel
May 27, 2025
Tweet
Share
More Decks by reiwa-travel
See All by reiwa-travel
創業期の急成長を実現した技術戦略を振り返る
reiwatravel_0405
0
81
QA Career Talk vol.5 〜QAエンジニアの生存戦略~
reiwatravel_0405
0
220
20250527_NEWT‐Tech-Talk_semba
reiwatravel_0405
0
350
20250527_NEWT‐Tech-Talk_hosoi
reiwatravel_0405
0
290
20250527_NEWT‐Tech-Talk_magara
reiwatravel_0405
0
370
reiwatravel_20250416_vpoe-magara_lt
reiwatravel_0405
1
1.4k
reiwatravel_20250225-newt-tech-talk-14_lt2
reiwatravel_0405
1
360
20241128_NEWT‐Tech-Talk_nakano
reiwatravel_0405
0
170
CTO-of-the-year-2024_reiwatravel
reiwatravel_0405
0
110
Featured
See All Featured
Bash Introduction
62gerente
614
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Applications with DynamoDB
mza
95
6.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Building Adaptive Systems
keathley
43
2.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Automating Front-end Workflow
addyosmani
1370
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Practical Orchestrator
shlominoach
190
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
Figma MCP で フロント開発を爆速にする
CONFIDENTIAL © 2024 Reiwa Travel, Inc. フロントエンドチーム フロントエンド4年くらい 趣味 •
⾳楽 • ⿇雀 • 散歩 • カフェ巡り • パン作り $whoami Fukuda Akito 福⽥ 晃都
AGENDA CONFIDENTIAL © 2024 Reiwa Travel, Inc. 1. MCPサーバーとは? 2.
Figmaからコードを⽣成してみる 3. より使い⼼地を良くするには?
CONFIDENTIAL © 2024 Reiwa Travel, Inc. MCPサーバーとは?
CONFIDENTIAL © 2024 Reiwa Travel, Inc. MCP (Model Context Protocol)
サーバーとは何? アプリケーションがLLM にコンテキストを提供する方法を標準化するオープンなプロト コル → AI アプリケーションにとっての USBケーブル のようなもの
CONFIDENTIAL © 2024 Reiwa Travel, Inc. Figma MCPでできるようになること • 色やサイズなどの情報を正確に取得できる
• Figma上のコメントを参照できる • Figma上の情報を元に、素早くコードを生成できる • …
CONFIDENTIAL © 2024 Reiwa Travel, Inc. Figma MCPでできるようになること • 色やサイズなどの情報を正確に取得できる
• Figma上のコメントを参照できる • Figma上の情報を元に、素早くコードを生成できる • … → フロントエンド開発を高速化できるはず!
CONFIDENTIAL © 2024 Reiwa Travel, Inc. Figmaから コードを⽣成してみる
CONFIDENTIAL © 2024 Reiwa Travel, Inc. 今回作るもの • 写真詳細を表示するモーダル •
今回はUI中心 ↓ Figmaに記載されている仕様
CONFIDENTIAL © 2024 Reiwa Travel, Inc. (事前準備)Figma MCPを登録する { "mcpServers":
{ "figma-developer-mcp": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--stdio"], "env": { "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY" } } } } ↓ mcp.jsonに以下の記述を追加
CONFIDENTIAL © 2024 Reiwa Travel, Inc. プロンプトを作成する # 実装要件 ##
デザイン - 画面全体 : https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント : https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、 Figmaのデザインを確認すること
CONFIDENTIAL © 2024 Reiwa Travel, Inc. プロンプトを作成する # 実装要件 ##
デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇 〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること モーダルを含んだ画面 全体のFigmaリンク
CONFIDENTIAL © 2024 Reiwa Travel, Inc. プロンプトを作成する # 実装要件 ##
デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント : https://www.figma.com/design/〇〇?node-id=〇 〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること 今回実装するモーダル のFigmaリンク
CONFIDENTIAL © 2024 Reiwa Travel, Inc. プロンプトを作成する # 実装要件 ##
デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇 〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること 今回実装するモーダル の仕様を記載した Figmaリンク
CONFIDENTIAL © 2024 Reiwa Travel, Inc. プロンプトを作成する # 実装要件 ##
デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用 すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、Figmaのデザインを確認すること コード生成上の制限
CONFIDENTIAL © 2024 Reiwa Travel, Inc. プロンプトを作成する # 実装要件 ##
デザイン - 画面全体: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 - 実装コンポーネント: https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 仕様 https://www.figma.com/design/〇〇?node-id=〇〇&t=〇〇 ## 技術要件 - @Mantine Mantineコンポーネントを基本的に使用すること - 画像には next/image を使用すること - 実装は既存の実装に合わせること ## 注意事項 - 不明点があれば質問してから作業を開始する - Figma MCPを使って、 Figmaのデザインを確認する こと その他の指示
CONFIDENTIAL © 2024 Reiwa Travel, Inc. ⽣成してみた結果 生成したUI Figma
CONFIDENTIAL © 2024 Reiwa Travel, Inc. ⽣成してみた結果 生成したUI Figma →
微調整は必要そう
CONFIDENTIAL © 2024 Reiwa Travel, Inc. より使い⼼地を良くするには?
CONFIDENTIAL © 2024 Reiwa Travel, Inc. Project Rulesを充実させる • どのライブラリを使っているか
• どのようにライブラリを使っているか ◦ 基本 Mantine の props を使ってスタイリングして、他に⽅法がない時のみ Tailwind を使う ◦ Mantine の Image ではなく、 next/image を使う • アイコンなどの配置場所はどこか
CONFIDENTIAL © 2024 Reiwa Travel, Inc. まとめ • Figma MCPを使えば、実務レベルで開発速度をあげることは可能
• そのために、ある程度の整備をしておくと効率が上がる • とはいえ、微調整は必要 • 最初のプロンプトは結構⼤事
CONFIDENTIAL © 2024 Reiwa Travel, Inc. フロントエンドエンジニア 絶賛募集中
Thank you! CONFIDENTIAL © 2024 Reiwa Travel, Inc.