Claude Design (ft. Next.js) • UI/UX & AI 教學

我們來看一下如何使用Claude Design (2026/04版)。
我們會利用Claude Design生成設計，加入從Figma輸出的Design System (.fig)，並利用Next.js製作出我們的設計。

____________________________________________________

【參考連結】
Claude Design: https://claude.ai/design

關於Claude Design: https://support.claude.com/en/articles/14604416-get-started-with-claude-design
Introducing Claude Design: https://www.anthropic.com/news/claude-design-anthropic-labs

關於Next.js: https://nextjs.org/docs/app/getting-started
https://youtu.be/vwhJtTd5LbI

____________________________________________________

【章節】
00:00 主題前言
00:07 建立設計
01:11 設計草稿
04:31 Tweaks
05:15 Comment
06:49 Edit
07:18 Draw
08:47 Zoom & Present
09:25 更多關於使用說明
12:16 安裝Next.js
13:51 Export: .zip
14:11 Export: PDF
14:55 Export: Send to Canva
17:58 Export: Claude Code
20:53 Design System
22:09 Figma檔案加入Design System
23:13 更多關於Claude Design System
25:51 套用Design System
26:47 更多關於Claude Design
28:25 結尾

---------------------------------------------------------

支持我在Ko-fi (美金單位): https://ko-fi.com/alandesign
我的IG: https://www.instagram.com/yt.alan.design/

#ClaudeDesign #Claude設計 #ClaudeDesign教學 #AI設計