1. 相關教學＆資源
2. 影片描述
還在用比對設計稿、逐行手刻 CSS 嗎？以前設計師交稿、工程師接手，光是確認間距、色碼、字型就要來回好幾次，改一版又要重頭再來。Figma MCP 出現，這個讓設計和開發之間「 溝通 」的成本，才真正開始消失。
這支影片會帶你完整串接 Figma MCP 到 Claude Code，讓 AI 直接讀取 Figma 的結構資料，真正理解設計稿的佈局、色彩與元件等。還能透過安裝 UI UX Pro Max，強化 Claude Code 的設計能力，讓你用 Prompt 就能產出高質感網站！
把 Claude Code 生成的網頁直接推送進 Figma，整個流程完全不需要寫程式碼，也不用手動核對任何數值，這套雙向工作流，才是 Figma MCP 真正強大的地方～～～
不管你是設計師還是開發者，看完這支影片，相信你會對設計與開發的協作流程有全新的理解，並且直接幫你省下大量來回溝通的時間，把精力放在真正有價值的地方！
3. 影片時間軸
- 00:00 開頭
- 00:32 串接 Figma MCP
- 02:05 安裝 UI UX Pro Max 強化設計
- 02:45 使用 Claude Code 設計網站
- 04:03 Claude Code 網頁導入到 Figma 編輯
- 06:22 Figma 設計反向推送
- 07:37 結尾
聯絡犬哥網站
在網頁設計＋AI SEO 行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。
資源一：犬哥網站（專業 WordPress 網頁設計＆ AI SEO 行銷公司）
如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想，或是沒有被 AI 提及你的品牌。歡迎洽詢 犬哥網站（WordPress 網頁設計＆ AI SEO 行銷公司），請專家協助你會更容易！
我們有多年網頁設計、AI SEO 行銷經驗，加上上百個實戰案例，絕對能滿足您的需求！
資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）
如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？
可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！
- WordPress 高手架站課：
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！ - SEO 排名飆升課：
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
#Claude #ClaudeCode #Figma #MCP #AI #網頁設計 #網站開發 #VibeCoding #UI #自動化