Lucide React
用一致的線性 icon，避免 AI 自己畫出不穩定圖示。
lucide-react
● CLAUDE DESIGN · KEVIN KUO
2026 · 05
Claude Design · GPT Image2 · 2026
Claude Design +
GPT Image2
GPT Image2
從版型、內容到圖片生成，
做出不一樣的設計
做出不一樣的設計
$
▸
▸
$
Today
今天會講什麼
-
01
Claude Design 應用心得 網頁資源 · DesignMD · Prompt library · 精準指令
-
02
用 AI 設計，常見問題 中文字體 · 對比度 · 字重分層
-
03
Codex 接手製作內容 接手版型 · 補內容 · 圖片生成
-
04
GPT Image2 圖片生成應用 網站案例 · 素材技巧 · 廣告工作流 · 應用場景
01
Chapter 01 · Cases
Claude Design
應用心得
應用心得
Why Claude Design
Claude Design 好用在哪裡？
My take
它不只是生成畫面，而是用更接近設計流程的方式，幫你把需求收斂成設計。
-
01.
問卷式需求引導
提出初步想法後，它會繼續提問，確認簡報或網站要呈現什麼。這像是在幫你優化 Prompt，讓方向更聚焦。
-
02.
可控的設計選項
一開始可以產出多個版型，後續也能切換配色，讓你在完成後仍保留多種視覺選擇。
-
03.
便捷的元件編輯功能
可以直接點選文字或標記元件修改，比只靠對話描述更直覺，也更適合細節調整。
Claude Design · Feature 01
問卷式需求引導
Claude Design · Feature 02
可控的設計選項
Claude Design · Feature 03
便捷的元件編輯功能
Case I · Package install
用製作網頁的方式做簡報跟圖片
Recharts
需要圖表或資料視覺化時，直接用圖表套件處理。
recharts.org
Logo.dev
品牌 Logo 不用自己抓圖，可以透過 API 放進版面。
img.logo.dev/{domain}
Pexels API
需要照片或影片素材時，可以用 API 依關鍵字抓素材。
pexels.com/api
一致的介面圖示
安裝 Lucide 後，直接用 icon name 呼叫一致圖示。
可讀的資料圖表
安裝 Recharts 後，直接用資料渲染長條圖。
Figma
創作邦
GenAI 年會
OpenAI品牌 Logo 區塊
用 Logo.dev 依 domain 抓圖，組成品牌牆。
情境照與影片素材
用關鍵字抓照片素材，直接放進版面。
Case II · Design System
給 AI 參考或規範
i.
Design System
Relume Design System
把風格先整理成規範，再交給 AI 設計。
Type
Editorial serif headline + clean sans body
Color
Warm paper, black ink, terracotta accent
Layout
Magazine grid, strong hierarchy, fewer rounded cards
Rules
Components can repeat, but page rhythm must stay editorial
ii.
設計成果
FlowDesk
Product · Teams · Pricing
AI OPERATIONS
Build faster, ship smarter.
A modern stack for modern teams.
A modern stack for modern teams, shaped like an editorial product report instead of another blue SaaS landing page.
Start freeView demo
Case II · Steal the spec
AI 不醜了，但大家會撞臉
CHROME EXTENSION
design-md-chrome
##
為什麼
why
要不一樣，就要特別的 DesignMD。
##
怎麼做
how
- a.挑一個喜歡的網站
- b.點插件，獲得網站 Design.md
- c.丟給 AI 當規範參考
Bonus · Spec library
其它資源推薦
Resource · Design library (Beta)
![Refero Styles resource preview]()
直接提供各種知名網站 Design.md
Refero Styles
直接提供各種知名網站 Design.md。
styles.refero.design
Bonus · DesignMD library
其它資源推薦
Resource · GitHub library
![VoltAgent awesome-design-md GitHub repository screenshot]()
整理各種 Design.md 參考資源與範例
Awesome DesignMD
整理各種 Design.md 參考資源與範例。
github.com/VoltAgent/awesome-design-md
Bonus · Design resource
其它資源推薦
Resource · Design community
![補充設計資源截圖]()
可以瀏覽社群整理的 AI 設計作品與實作案例
Neuform Community
可以瀏覽社群整理的 AI 設計作品與實作案例。
neuform.ai/community
Bonus · Hero prompts
其它資源推薦
Resource · Prompt library
![MotionSites homepage screenshot]()
有免費模版可以用，快速生出有設計感的開場動畫
MotionSites
有免費模版可以用，快速生出有設計感的開場動畫。
motionsites.ai
Bonus · Web inspiration
網頁和 SaaS 設計靈感資源
-
收集 SaaS 網站頁面案例，適合看產品頁、功能頁和轉換版型。
-
專注 SaaS Landing Page 靈感，可以快速比較開場、社會證明和 CTA 安排。
-
整理互動細節與微動畫案例，適合補上網站的質感和驚喜點。
Case III · Be specific
給 Claude Design 的指令，越精準越好
「大一點」「深一點」「換一下」AI 都會猜。
把 px、色碼、字體名稱 直接寫進去，一次改對。
把 px、色碼、字體名稱 直接寫進去，一次改對。
- 間距 × padding 大一點 ○ padding 改 24px
- 顏色 × 深一點的灰 ○ 改成 #1F2937
- 字體 × 標題換襯線體並改大一點 ○ Noto Serif TC SemiBold 56px
- 元素 × 左上角那張卡片 ○ Editor 點下去寫一句
02
Chapter 02 · Design details
用 AI 設計，常見問題
Three small tips
用 AI 設計，常見問題
- i. 中文字體 字體不好看、被硬轉斜體、亂加粗
- ii. 對比度 氣質配色 ≠ 看得清楚
- iii. 字重分層 大字粗、小字細，層次自己跑出來
Tip 1 · Chinese typography
01. 中文字體
AI 比較懂英文，但中文很多時候用法不同。
1. 字體單調，選擇少。
解法：可以請 AI 調用電腦字體（請使用有安裝字體的電腦）。
2. 中文斜體，不穩重。
解法：請 AI 不要讓文字亂斜體，很多時候斜體不一定好看，需要搭配情境。
3. 亂加粗文字。
解法：中文字體沒有特別設計加粗時，使用上字會黏一起，加粗請選擇字重高字體。
1. 字體單調，選擇少。
解法：可以請 AI 調用電腦字體（請使用有安裝字體的電腦）。
2. 中文斜體，不穩重。
解法：請 AI 不要讓文字亂斜體，很多時候斜體不一定好看，需要搭配情境。
3. 亂加粗文字。
解法：中文字體沒有特別設計加粗時，使用上字會黏一起，加粗請選擇字重高字體。
× 常見問題
設計來自細節
只用預設字體，畫面容易變得普通。
○ 建議
讓字體不單調
直接指定 zihunbiantaoti，建立更明確的調性。
× 常見問題
差異來自細節
中文被硬轉斜體，字形會變得不穩。
○ 建議
差異來自細節
不要用 italic，改用字重或顏色做強調。
× 常見問題
重點文字全部加粗
硬加粗會讓筆畫黏在一起，閱讀壓力變大。
○ 建議
重點文字分層加粗
選擇高字重字體，粗細層次會更乾淨。
Tip 2 · Contrast check
02. 對比度，請 AI 用 WebAIM 檢查
設計最怕對比度不夠，會導致資訊不清楚。
所以請 AI 用 WebAIM Contrast Checker 檢查，避免做出「看起來很有氣質，但其實看不清楚」的配色。
所以請 AI 用 WebAIM Contrast Checker 檢查，避免做出「看起來很有氣質，但其實看不清楚」的配色。
這段文字在背景上，看不太清楚對不對？
2.1 : 1 · FAIL
這段文字在背景上，看得清楚。
7.4 : 1 · PASS AAA
Tip 3 · Weight hierarchy
03. 文字用字重創造層次
字級不夠用？用字重補。
大字用粗體擔任視覺重量，小字用細體保持空氣感。
思源黑、思源宋都提供 7 個字重，免費。
大字用粗體擔任視覺重量，小字用細體保持空氣感。
思源黑、思源宋都提供 7 個字重，免費。
這二種開源字體直接告訴 AI 你要用就可
○ 建議：標題粗、內文細
差異化的力量
同樣字級下，標題用粗體，內文用細體，層次自然分出來。
△ 中間案例：標題細、內文細
差異化的力量
標題和內文都太細時，畫面會變輕，重點比較不容易被看見。
× 反例：粗細顛倒
差異化的力量
層次塌掉，視覺重量不對。
03
Chapter 03 · Codex handoff
Codex 接手
製作內容
製作內容
Claude Design 用量消耗太快了
Workflow · Handoff
Claude Design 和 Codex，分工不同
先把設計方向聚焦
透過提問釐清需求、聚焦呈現方式，再把回答整理成版型與 Design System。
- i.用問題收斂目標、受眾和畫面重點
- ii.把呈現方向轉成版型、元件和頁面節奏
- iii.建立配色、字體、間距和設計系統規範
接手把它補完整
負責讀專案、改檔案、補內容、接素材，特別適合把圖片生成、GIF 和視覺化素材放進作品。
- i.把假文案換成真內容和案例
- ii.修版面、互動、連結和嵌入內容
- iii.生成圖片、GIF、icon 和各種視覺化素材
Codex · After handoff
Codex 能解決內容補充與素材
製作 GIF 動圖
把靜態素材做成輕量動態，補在 Hero、icon、簡報章節或社群內容裡。
生成圖片
需要封面、插圖、素材照片、3D icon 或流程配圖時，直接拆成 Image2 任務。
補齊相關內容
查資料、做表格、截圖等，都可以交給 Codex 製作。
Codex · UI polish
提升 UI 設計質感
Codex · Game assets
Codex 也能製作遊戲素材
從遊戲內容到視覺素材
Codex 本身就可以製作網站遊戲的內容，現在搭配了生成功能，你可以直接要求它產出類似這樣的遊戲元素素材並直接使用。
vimeo.com/1186506359Agent workflow
Codex 能用流程化方式處理圖片生成
處理重複性流程
例如每天依照固定需求生成特定圖片，批次調整尺寸、風格和版型。
自主研究與分析
先讀文件或網站，學習參考資料，再把分析結果轉成 Prompt 生成內容。
多張圖片生成
Agent 好處是可以一次讓它生成多種版型、風格、尺寸等需求圖片。
04
Chapter 04 · Image2 applications
GPT Image2
圖片生成應用
圖片生成應用
Image2 · Strengths
GPT Image2 厲害的地方
01 · Stability
穩定性
可以穩定依照文字、圖片產出內容，讓可用性變高。
02 · Chinese text
中文生成
中文效果提升非常多，多數字體都能穩定生成。
03 · Aesthetic
美感提升
對於產出物品的細緻度、排版都相較於其它模型提升很多。
04 · Agent ready
Codex 可用
搭配 AI Agent 可以讓雙方發揮更多能力。
Case · Asset workflow
AI 素材生成技巧
循環影片製作技巧
先生成一張照片作為起點，同時指定它也是結尾。中間讓天氣、光線或景觀變化，最後回到同一張畫面，就能做出可循環播放的影片。
讓 AI 生成去背素材
做網站時，很多插圖、icon、人物或物件都需要能直接疊在版面上。生成前先指定去背方式，後面排版會順很多。
01
ChatGPT 生成可以直接生成去背圖
在 ChatGPT 生成圖片時，直接指定透明背景或去背素材，適合 icon、插圖、人物或物件素材。
02
讓 Codex 生成圖片時要備註
交給 Codex 批次生圖時，把「去背、透明背景、不要白底」寫進需求，後面放進網站會更乾淨。
Case · AI application
搭配 AI 影像生成，能豐富產出內容
AI video ad
AI 廣告搭配 AI 影像生成應用
AI video ad
AI 廣告搭配 AI 影像生成應用
Pinterest · Research
用 Agent 的好處就是它能做研究分析
化妝品廣告素材的可用規則
瓶身、粉盒或唇膏多半置中或偏右，下方保留平台，上方留給標題和功效文案。
粉色負責柔美與保養感，藍色連到清爽、保濕與醫美感，背景通常低彩度。
常用窗光、水波反射、玻璃折射與柔焦散景，讓包裝看起來更透明、更高級。
花瓣、露珠、水面、凝膠、布料和肌膚特寫，分別對應香氣、保濕、修護與柔膚。
品牌感用高對比襯線或細字距英文字，功效資訊用清楚無襯線，避免搶掉產品。
Prompt 要指定品類、材質、鏡頭、主色、光線、留字區和版位比例，才會像廣告素材。
Pinterest → Prompt → Image2
分析結果，可以變成一組圖片生成 Prompt
1:1 square Taiwan beauty ad.
Reference style: blue-white Japanese/Taiwan skincare ad.
Hero: frosted white CC serum bottle centered inside a clear water bubble.
Atmosphere: transparent, airy, dewy, sunbeam highlights, micro bubbles.
Layout: big headline top, product center, callout badges around product, fine print bottom.
Use exact Traditional Chinese copy:
「LUMÉ 光潤實驗室」
「水光感」「透亮」「防曬」
「透明無瑕 CC 霜」
「一抹創造空氣妝感」
「防曬｜遮瑕｜水光感」
「SPF 35」「清爽不黏膩」「修飾暗沉」「台灣夏天適用」
「新品體驗組｜限時免運」
No Japanese, no Simplified Chinese, no QR code, no real brand.
Image2 edit
移除文字，保留可再設計的素材版位
生成後的圖片也可以再交給 Image2 處理，把不需要的文字拿掉，留下產品和可重新排版的視覺框架。
- 避免文字不清楚、歪斜等問題
- 避免文字版權問題
- 後續文案修改可以更簡單快速
- 人為介入修改後能有「著作權」
Component assets
把生成圖片，拆成可用元件
Simple prompt · Image2
沒想法時，簡單提示詞可能效果也不錯
Prompt 01
生成一個無線耳罩式耳機的廣告
Prompt 02
生成一個日式風格鑄鐵鍋廣告
Cover design · Image2
封面很重要，可以讓 AI 協助設計吸睛封面
Banner design · Resources
Banner 相關設計參考資源
-
日本商業視覺與網頁案例庫，適合參考 Banner 的構圖、留白和視覺細節。
-
收集各類 Banner 設計案例，可以快速比較主視覺、標題、CTA 與促銷版型。
-
整理設計與生成用 Prompt，可作為 Banner 圖片生成和版型提案的提示詞參考。
Many scenes · Many outputs
Codex+圖片生成還可以應用在...
文章配圖
主視覺、段落插圖、產品示意圖。
插畫素材
角色、情境、操作步驟和概念插圖。
Icon 素材
工具、功能、分類和介面提示圖示。
情境應用
故事、流程圖、梗圖等應用。
Bonus · Image2 resources
AI 生成資源整理
Nano Banana 介紹
可和 Image2 對照參考的圖片生成工具。
GPT Image2 實測分享
中文生成、風格穩定度和實際應用整理。
MeiGen
各類 AI 圖像生成案例資源網站。
Awesome GPT Image 2
GitHub 上整理的 Image2 資源清單。
Image2 Hub
快速瀏覽 GPT Image2 作品與 Prompt。
YouMind Prompts
GPT Image2 Prompt 案例與靈感整理。
Canghe Gallery
可直接瀏覽不同類型的圖片生成案例。
GLBGPT Image Generator
GPT Image2 圖片生成與案例入口。
PromptsRef GPT Image
依題材整理的圖像生成 Prompt 參考庫。
Image2 API & Prompts
API、Prompt 和相關工具的 GitHub 資源。
Before delivery
AI 很快，交付前更要檢查
版權與品牌
注意知名 IP、Logo、真人肖像與客戶素材授權，合約階段先講清楚。
風格一致性
系列素材要用同一套 prompt 節奏，能給參考圖就給，避免每張都不同。
人工收尾
小字、比例、邊緣、透明背景、實際放進網站後的效果，都要再看一次。
Ending · Commercial value
AI 生成很快，
但人才能讓 AI 發揮更大價值
商業價值不是「按一下生成」，而是把素材變成能解決問題的成品。
Taste · Direction
品味和創意更重要，
你的專業決定 AI 上限
專業的人能夠判斷要如何調整，提升 AI 產出品質。
— Thank you —
謝謝大家
kevinlearn.com
Kevin Kuo · 凱文設計 · 創作邦
平常會分享設計、AI 應用、創作工作流的內容。
有興趣的話，歡迎追蹤我。