Penpot 基礎教學 (設計 • MCP • Claude Code)

這集我們來看一下Penpot的基本使用方式。
我們會製作設計，從Component，Variant，到Token設定。最後再用MCP，透過Claude Code把Penpot裡的設計做出來。

____________________________________________________

【參考連結】
Penpot: https://penpot.app/
Penpot MCP: https://help.penpot.app/mcp/
https://youtu.be/vwhJtTd5LbI
https://youtu.be/MRL4Tqq5H50

____________________________________________________

【章節】
00:00 主題前言
01:20 Penpot使用費用&方式
02:36 網路版登入
03:18 開始設計
04:50 Penpot前端思維
06:32 Flex layout & Radius
07:44 Lucide Icons
10:11 Components
11:15 建立Components
13:01 Variants
13:54 Swap 更換 Component
15:19 更新Components
16:22 完成設計
21:51 Tokens (Light & Dark Mode)
32:11 Theme 設定
34:08 簡單Prototype
37:38 Token數學
39:40 MCP 安裝
43:27 Penpot 設計 MCP 連結
46:46 Inspect (Dev mode)
47:43 結尾

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

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

#penpot #penpot教學 #figma免費替代