▬▬▬▬▬ 🏆️ 犬哥專業服務 🏆️ ▬▬▬▬▬ 網頁設計＆數位行銷服務 ➜ https://frankknow.com ▬▬▬▬▬ 🏆️ 精選架站系列 🏆️ ▬▬▬▬▬ 新手自學架站（網域＋主機＋WordPress 架站，一次學會）➜ https://frankknow.com/wp-web-doing/ 優質主機挑選 ➜ https://frankknow.com/wordpress-hosting/ ▬▬▬▬▬ 🏆️ 精選線上課程 🏆️ ▬▬▬▬▬ WordPress 高手架站課：https://frankknow.net/wp-course/ SEO 排名飆升課：https://frankknow.net/seo-course － 還在為「 網頁設計 」和「 網頁開發 」要分兩套流程而煩惱嗎？以前做一個網站，設計師在 Figma 畫稿、工程師在 VS Code 寫 code，兩邊來回溝通、反覆修改，光是交接就消耗掉大半時間。 現在我把 Claude Code 和 Stitch 串接在一起，才發現原來這整條流程可以壓縮成一個人、一個終端機就搞定！ 在這支影片裡，從 Stitch MCP 的串接，到用 Skills 大幅擴充 Claude Code 的設計能力，讓你用一行指令就能做到以前要花好幾天才能完成的事。 我們直接用 Claude Code 生成一個科技感深色風格的 AI 服務 Landing Page，再來用 Stitch 本身的 Ideation 構思、Redesign 重設計、Variants 變形、Prototype 即時原型，以及 Design Systems 設計系統，示範怎麼從一個網址直接匯入色系與字型，讓整套視覺語言快速定調。 最後只要把 Stitch 的設計稿匯出，直接餵給 Claude Code，就能做成可以在瀏覽器瀏覽的實體網頁，全程不用寫任何一行程式！ － 影片時間軸 00:00 開頭 00:45 串接 Stitch MCP 02:39 了解 Stitch Skills 功能 03:38 安裝 Stitch Skills 指令 03:59 使用 Claude Code＋Stitch 生成網頁 05:43 Stitch Ideation 構思功能 07:23 Stitch Redesign 重設計功能 08:30 Stitch Variants 變形功能 09:50 Stitch Prototype 即時原型功能 10:49 Voice Canvas 語音模式 11:50 Stitch Design Systems 設計系統 13:42 Stitch 設計稿匯出到 Claude Code 14:52 結尾 ▬▬▬▬▬ 💡 相關教學＆資源 💡 ▬▬▬▬ 相關教學資源都放在這：https://docs.google.com/document/d/1Rkly_dFQI9w4TtWdQ0l7qg7vKmM49HUvDAXKjtg28ok/edit?usp=sharing Stitch MCP（可以找 Claude Code 安裝）：https://stitch.withgoogle.com/docs/mcp/setup hosting.com 主機折扣連結：https://frankknow.com/hosting hosting.com 主機教學：https://frankknow.com/hosting-teach/ ▬▬▬▬▬▬▬ 💬 關注我們 💬 ▬▬▬▬▬▬▬ 犬哥學院 ➜ https://frankknow.net 犬哥 IG ➜ https://www.instagram.com/wp.dog/ 犬哥 FB 社團 ➜ https://www.facebook.com/groups/frankknow #ClaudeCode #Stitch #AI #網頁設計 #網站開發 #VibeCoding #自動化工作流 #AIAgent