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免費替代
我們會製作設計，從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免費替代