▬▬▬▬▬ 🏆️ 犬哥專業服務 🏆️ ▬▬▬▬▬ 網頁設計＆數位行銷服務 ➜ https://frankknow.com WordPress 優質主機：https://frankknow.com/wordpress-hosting/ ▬▬▬▬▬ 🏆️ 精選架站系列 🏆️ ▬▬▬▬▬ 新手自學架站（網域＋主機＋WordPress 架站，一次學會）➜ https://frankknow.com/wp-web-doing/ 優質主機挑選 ➜ https://frankknow.com/wordpress-hosting/ ▬▬▬▬▬ 🏆️ 精選線上課程 🏆️ ▬▬▬▬▬ WordPress 高手架站課：https://frankknow.net/wp-course/ SEO 排名飆升課：https://frankknow.net/seo-course － 還在用比對設計稿、逐行手刻 CSS 嗎？以前設計師交稿、工程師接手，光是確認間距、色碼、字型就要來回好幾次，改一版又要重頭再來。Figma MCP 出現，這個讓設計和開發之間「 溝通 」的成本，才真正開始消失。 這支影片會帶你完整串接 Figma MCP 到 Claude Code，讓 AI 直接讀取 Figma 的結構資料，真正理解設計稿的佈局、色彩與元件等。還能透過安裝 UI UX Pro Max，強化 Claude Code 的設計能力，讓你用 Prompt 就能產出高質感網站！ 把 Claude Code 生成的網頁直接推送進 Figma，整個流程完全不需要寫程式碼，也不用手動核對任何數值，這套雙向工作流，才是 Figma MCP 真正強大的地方～～～ 不管你是設計師還是開發者，看完這支影片，相信你會對設計與開發的協作流程有全新的理解，並且直接幫你省下大量來回溝通的時間，把精力放在真正有價值的地方！ － 影片時間軸 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 結尾 ▬▬▬▬▬ 💡 相關教學＆資源 💡 ▬▬▬▬ 相關教學資源：https://docs.google.com/document/d/18qvIrvUQSAH62HM8InRRmLGuCDX6m3y6zv8Cf6Fs0UY/edit?usp=sharing ▬▬▬▬▬▬▬ 💬 關注我們 💬 ▬▬▬▬▬▬▬ 犬哥學院 ➜ https://frankknow.net 犬哥 IG ➜ https://www.instagram.com/wp.dog/ 犬哥 FB 社團 ➜ https://www.facebook.com/groups/frankknow #Claude #ClaudeCode #Figma #MCP #AI #網頁設計 #網站開發 #VibeCoding #UI #自動化