1. 相關教學＆資源
2. 影片描述
還在為「 網頁設計 」和「 網頁開發 」要分兩套流程而煩惱嗎？以前做一個網站，設計師在 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，就能做成可以在瀏覽器瀏覽的實體網頁，全程不用寫任何一行程式！
3. 影片時間軸
- 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 結尾
聯絡犬哥網站
在網頁設計＋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 排名第一頁，大量提升網站營收和訂單！
#ClaudeCode #Stitch #AI #網頁設計 #網站開發 #VibeCoding #自動化工作流 #AIAgent