Stitch - AI介面設計 2026 (ft. Jules, Claude Code, Next.js) • UI/UX & AI 教學
2.6K views · 2026-04-03
UI DesignInteraction & UX
在這集影片中，我們來看 Google Stitch 於 2026 年 3 月推出的更新。這次改版帶來了許多挺酷的工具，包括像是設計系統（Design System）與語音設計功能。此外，我們也會深入解析如何利用 Design.md 檔案轉換為 Claude Code Skills，讓 AI Agents 能精準對齊 Stitch 的設計規範。我們也會展示如何結合 Stitch MCP 與 AI Agent，將Stitch上的設計轉化為可實際運行的網站。
____________________________________________________
【參考連結】
Stitch: https://stitch.withgoogle.com/
Jules: https://jules.google/
Claude Code: https://code.claude.com/docs/en/overview
Next.js: https://nextjs.org/docs/app/getting-started/installation
https://youtu.be/ESI4WgytAvQ
https://youtu.be/vwhJtTd5LbI
____________________________________________________
【章節】
00:00 主題前言
00:11 登入Stitch
01:42 撰寫第一個設計Prompt
04:11 撰寫方式: 從大方向開始
04:46 撰寫方式: 仔細描述更新
07:18 撰寫方式撇步
09:09 不同模型選擇
11:24 Edit/Direct Edit
13:27 Redesign模型
16:55 Move & Align
17:41 Mark Tool
19:17 Pan Tool
19:30 Upload files to canvas
20:43 Design System
21:44 Design System: Import from web
23:51 DESIGN.md
25:31 Generate: Instant Prototype
30:13 Generate: Variations
32:10 Generate: Regenerate
32:22 Generate: Mobile & Web Version
34:54 Generate: Predictive Heatmap
36:08 Annotate
38:24 View Code
38:41 Copy to Figma
39:29 Export: AI Studio
41:54 Export: Jules
46:18 Export: .zip
46:28 Export: Code to Clipboard
46:33 Export: Project Brief
47:21 Export: MCP
54:05 DESIGN.md & Claude Skills
58:10 Live Mode 語音操控設計
01:01:58 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#Stitch #AI設計 #Claude設計
____________________________________________________
【參考連結】
Stitch: https://stitch.withgoogle.com/
Jules: https://jules.google/
Claude Code: https://code.claude.com/docs/en/overview
Next.js: https://nextjs.org/docs/app/getting-started/installation
https://youtu.be/ESI4WgytAvQ
https://youtu.be/vwhJtTd5LbI
____________________________________________________
【章節】
00:00 主題前言
00:11 登入Stitch
01:42 撰寫第一個設計Prompt
04:11 撰寫方式: 從大方向開始
04:46 撰寫方式: 仔細描述更新
07:18 撰寫方式撇步
09:09 不同模型選擇
11:24 Edit/Direct Edit
13:27 Redesign模型
16:55 Move & Align
17:41 Mark Tool
19:17 Pan Tool
19:30 Upload files to canvas
20:43 Design System
21:44 Design System: Import from web
23:51 DESIGN.md
25:31 Generate: Instant Prototype
30:13 Generate: Variations
32:10 Generate: Regenerate
32:22 Generate: Mobile & Web Version
34:54 Generate: Predictive Heatmap
36:08 Annotate
38:24 View Code
38:41 Copy to Figma
39:29 Export: AI Studio
41:54 Export: Jules
46:18 Export: .zip
46:28 Export: Code to Clipboard
46:33 Export: Project Brief
47:21 Export: MCP
54:05 DESIGN.md & Claude Skills
58:10 Live Mode 語音操控設計
01:01:58 結尾
---------------------------------------------------------
支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/
#Stitch #AI設計 #Claude設計