AIと一緒にポートフォリオサイトを作ろう！ / Creating a portfolio with AI

テックハブ AI‑Powered エンジニアリング講座のスライドです。
Warp × Cursor × Figma MCP で、AI を駆使してポートフォリオサイトを最速公開する方法を紹介します。

Transcript

1. AIと一緒にポートフォリオサイトを作ろう！ テックハブ AI-Powered エンジニアリング講座 © 2025 TechHub, Inc. 1/18
2. AIを使ってポートフォリオサイトを作り、実際に公開する → 最新のAIツールを使いこなせるように！ 今日のゴール © 2025 TechHub, Inc. 2/18
3. cf. https://www.figma.com/community/file/1170206889562959306 © 2025 TechHub, Inc. 3/18
4. これまでのエンジニア 技術書などで勉強して、コードを書く →コードが中心 これからのエンジニア AIにコーディングを任せる →価値創造が中心 イントロ: AI 時代のエンジニアへ © 2025 TechHub, Inc. 4/18
5. キャッチアップ: この講座や X 広く調べる: Gemini DeepResearchで俯瞰的に理解 深く学ぶ: NotebookLM 情報収集テクニック © 2025 TechHub, Inc. 5/18
6. https://gemini.google.com/ ハンズオン: Gemini DeepResearch © 2025 TechHub, Inc. 6/18
7. https://notebooklm.google.com/ ハンズオン: NotebookLM © 2025 TechHub, Inc. 7/18
8. 1. 環境準備 2. 空のサイト作成 & デプロイ 3. デザイン適用 & デプロイ ポートフォリオサイト作成の流れ © 2025 TechHub, Inc. 8/18
9. Git: バージョン管理 ( git --version で確認) Node.js: JavaScript環境 ( node --version で確認) GitHub & Vercel: アカウント必須 前提条件 © 2025 TechHub, Inc. 9/18
10. やりたいことが分かっていれば、コマンドは覚えなくて OK Warp - AIが使えるターミナル © 2025 TechHub, Inc. 10/18
11. Ctrl+L からAIに作業依頼 設定のポイント: Agent モードを使う YOLOモードをオン（ターミナルコマンド自動実行） モデルは gemini-2.5-pro がおすすめ 現在のフロンティアモデルは gemini-2.5-pro （手堅い） 、 claude-3.7-sonnet （ク リエイティブ） 、 o3 （賢い） Cursor - AIファーストエディタ © 2025 TechHub, Inc. 11/18
12. 1. Warpで: 「portfolioディレクトリを作成してGit管理して」 2. Cursorで: 「空のHTML作って、コミットして」 3. GitHub上でリポジトリ作成 (ブラウザ操作) 4. Cursorで： 「 <Your-GitHub-Repo-URL> をリモートにセットしてプッシュ」 5. Vercelでデプロイ ハンズオン: 空のサイト作成 © 2025 TechHub, Inc. 12/18
13. デザインをどう当てていくか i. 自分でやるなら → Cursor ii. あらかじめワイヤーフレーム組みたいなら → v0 iii. テンプレやデザイナーのデザインを使いたいなら → Figma MCP (今回) ハンズオン：デザイン適用の準備 © 2025 TechHub, Inc. 13/18
14. cf. https://x.com/norahsakal/status/1898183864570593663 MCP = AI から SaaS を呼び出すプロトコル © 2025 TechHub, Inc. 14/18
15. FigmaのAPIキーを取得 Figma設定画面 > Personal access tokens ( File content: Read-only ) CursorでMCPサーバーを設定 Cursor で： 「figma-developer-mcp をインストール」 設定 > MCP > Add Server "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } Cursor と Figma を MCP で接続しよう © 2025 TechHub, Inc. 15/18
16. Figmaテンプレート例 Cursor で:「@FigmaテンプレートのコンポーネントURL のデザインをHTMLに適用して」 「修正プロンプト→確認→（デプロイ） 」のサイクルを回すのが開発作業 MCPでデザインを適用 © 2025 TechHub, Inc. 16/18
17. © 2025 TechHub, Inc. 17/18
18. ご清聴ありがとうございました！ © 2025 TechHub, Inc. 18/18