OpenAI Codex + Figma MCP 設計師完整設置指南

OpenAI Codex 現已與 Figma MCP (Model Context Protocol) 整合 — 這可能預示著手動設計師-開發者交接的終結。在這份完整逐步 Figma MCP 設置教學中，我將為你展示如何安裝和配置 Figma MCP 伺服器、連接 OpenAI Codex 到 Figma，並啟用程式碼到畫布工作流程，實現設計與開發的即時協作。 🔗 本設置更新教學：https://youtu.be/cPobzhh_GYE 你將學會 OpenAI Codex + Figma MCP 整合如何運作，如何在你的 Figma 畫布和程式碼庫之間啟用雙向推送和提取更新，以及這個 AI 驅動的工作流程如何消除過時的規格說明、手動 CSS 匯出和破裂的交接。無論你是在尋找如何將 Codex 連接到 Figma、如何設置 Figma MCP，或程式碼到畫布在實務中如何運作，本教學將從零開始引導你進入完全連接的狀態 — 特別為想要在 AI 驅動開發中領先一步的 UX、UI 和產品設計師量身打造。 本影片涵蓋： • Figma MCP 伺服器安裝和配置 • 連接 OpenAI Codex 到 Figma • 程式碼到畫布工作流程說明 • 即時設計到程式碼同步 • 這對現代 UX 和產品團隊的意義 #Figma #OpenAI #Codex #FigmaMCP #CodeToCanvas #設計交接 #AI工作流程 #UX設計 #產品設計 #網頁開發 #AI工具 ------------------------------------------------------------------------------- 🔗 連結和資源： 🔗 下載 Codex：https://openai.com/codex/ 🔗 Figma MCP 文件：https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/ 🔗 本設置更新教學：https://youtu.be/cPobzhh_GYE ------------------------------------------------------------------------------- 🌸 免費專業課程 🌸 🤖 全新 AI 設計工作流程 — Claude AI + Figma（免費課程）： https://www.youtube.com/playlist?list=PLXdRMPwB8CHnCai2ohL6e9HA4mcq-ZEn0 ☸️ 設計師的 Codex 與 ChatGPT：https://www.youtube.com/playlist?list=PLXdRMPwB8CHk4F76vsOWHehnz8pcKYP6T 🔥 Figma MAKE — 0 到精通（免費課程）： https://www.youtube.com/playlist?list=PLXdRMPwB8CHmbSLEKimjJMuvlAQgi09I 🌈 2025 年完整 Figma 初學者指南（免費課程）： https://www.youtube.com/playlist?list=PLXdRMPwB8CHkdA9Sch2ArrgmViCbHyaRN 🧘🏻‍♀️ UX/UI 設計職涯（免費課程）： https://www.youtube.com/playlist?list=PLXdRMPwB8CHmky4DDULgzeU-u4XyHNU7y ------------------------------------------------------------------------------- 追蹤我： ➡️ LinkedIn：https://www.linkedin.com/in/nehmatgereige/ 🌈 Figma 創作：https://www.figma.com/@nehmatgereige ------------------------------------------------------------------------------- 音樂來自：bensound.com 授權代碼：99SFBIGYDLJIBOC2 藝術家：Nick Petrov ------------------------------------------------------------------------------- ------------------------------------------------------------------------------- ⏰ 章節 ⏰ 00:00 #1.介紹 02:09 #2. 下載並設置 Codex 05:45 #3. 在 Codex 中安裝和設置 Figma MCP 伺服器 8:25 #4. 從 Figma 設計在 Codex 中生成程式碼 11:10 #5. 從 Codex 傳送到 Figma：程式碼到畫布 13:30 #6. 從 Figma 傳送到 Codex：畫布到程式碼