20250527_NEWT‐Tech-Talk_fukuda

by reiwa-travel

Slide 1

Slide 1 text

Figma MCP でフロント開発を爆速にする

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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に以下の記述を追加

Slide 11

Slide 11 text

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のデザインを確認すること

Slide 12

Slide 12 text

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リンク

Slide 13

Slide 13 text

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リンク

Slide 14

Slide 14 text

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リンク

Slide 15

Slide 15 text

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のデザインを確認することコード生成上の制限

Slide 16

Slide 16 text

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のデザインを確認することその他の指示

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

CONFIDENTIAL  © 2024 Reiwa Travel, Inc.  Project Rulesを充実させる ● どのライブラリを使っているか ● どのようにライブラリを使っているか ○ 基本 Mantine の props を使ってスタイリングして、他に⽅法がない時のみ Tailwind を使う ○ Mantine の Image ではなく、 next/image を使う ● アイコンなどの配置場所はどこか