● CODE DESIGN · KEVIN KUO
2026 · 05
Code · Design · 2026
Code Design
當 AI 把大家變得一樣時，
差異化就更有價值
差異化就更有價值
$
▸
▸
▸
▸
$
The thesis
當 AI 把大家變得一樣時，
差異化就更有價值。
Case I · Asset CDN
Icon 跟圖庫，第一道差異化武器
i.
AI 直接輸出
Build faster, ship smarter.
A modern stack for modern teams.
□
Real-time sync毫秒同步
Secure by default企業級加密
□
Global CDN200+ 節點
Lightning fast10x 加速
ii.
設計師加工後
Build faster, ship smarter.
A modern stack for modern teams.
Real-time sync毫秒同步
Secure by default企業級加密
Global CDN200+ 節點
Lightning fast10x 加速
Case I · Side by side
Icon CDN 進場前 vs 進場後
i.
AI 直出
Build faster, ship smarter.
A modern stack for modern teams.
□
Real-time sync毫秒同步
Secure企業級加密
□
Global CDN200+ 節點
Fast10x 加速
ii.
+ Lucide CDN + KevinDesign 色票
Slide 05｜case-a-kevin.png
Case II · Steal the spec
AI 不醜了，但大家會撞臉
CHROME EXTENSION
design-md-chrome
##
為什麼
why
要不一樣，就要自己的 DesignMD。
##
怎麼做
how
- a.挑一個有調性的網站
- b.點插件，抽出 spec
- c.餵給 AI 當規範
in short ·
看到喜歡的網站，
抽成自己的設計系統。
抽成自己的設計系統。
Case II · Side by side
撞臉款 vs 自己抓的 spec
i.
Claude Design 預設出的
Slide 07｜case-b-default.png
ii.
餵了從喜歡網站抽出的 DesignMD
Slide 07｜case-b-custom.png
Case III · Point and edit
用點擊跟留言改設計，比打 prompt 準
描述「左上角那個 card 的標題太擠」要寫一段話。
用 Editor / Jolt 直接點 + 留言，指到誰就改誰，AI 不會猜錯目標、改錯地方。
用 Editor / Jolt 直接點 + 留言，指到誰就改誰，AI 不會猜錯目標、改錯地方。
Quarterly Revenue
$ 2.4M
1
標題加 16px 上 padding
2
CTA 改成主色
Case III · Side by side
純 prompt vs 點擊 + 留言
i.
純 prompt 描述
Slide 09｜case-c-prompt.png
ii.
Editor + Jolt 點擊改
Slide 09｜case-c-editor.png
Tip 1 · No CJK italic
中文斜體，請 AI 改掉
Claude Design 預設會跑中文斜體。
但中文字體除非特別設計，斜體都是強制 skew 出來的，會變很醜。
告訴 AI：CJK 不要 italic，要強調用粗體或顏色。
但中文字體除非特別設計，斜體都是強制 skew 出來的，會變很醜。
告訴 AI：CJK 不要 italic，要強調用粗體或顏色。
× 不行
差異化來自手感
○ 正確
差異化來自手感
Tip 2 · Contrast check
對比度，請 AI 用 WebAIM 檢查
AI 配色常常落在「看起來氣質、實際看不清楚」的灰色地帶。
請 AI 用 WebAIM Contrast Checker 標準檢查，內文至少 4.5 : 1（WCAG AA）。
請 AI 用 WebAIM Contrast Checker 標準檢查，內文至少 4.5 : 1（WCAG AA）。
這段文字在背景上，看不太清楚對不對？
2.1 : 1 · FAIL
這段文字在背景上，看得清楚。
7.4 : 1 · PASS AAA
Tip 3 · Weight hierarchy
字大用粗，字小用細
字級不夠用？用字重補。
大字用粗體擔任視覺重量，小字用細體保持空氣感。
思源黑提供 7 個字重，免費。
大字用粗體擔任視覺重量，小字用細體保持空氣感。
思源黑提供 7 個字重，免費。
差異化的力量
字級從 88 到 24 之間，差距由字重撐起來。粗細之間有清楚的層次，視覺上自然分主次。
× 反例：粗細顛倒
差異化的力量
層次塌掉，視覺重量不對。
Demo · The real one
我做的這個網站，用了什麼素材
Slide 13｜demo-site-hero.png
i.
AI 影片素材
Kling / Luma 生 hero loop，剪 8 秒 mp4 嵌頁面。
ii.
AI 圖片素材
Midjourney 出 key visual，後製去背、調色對齊 brand。
iii.
KevinDesign 加工
字級、留白、互動細節，全部按 design.md 重組。
Demo · After
加工後上線的樣子
Slide 14｜demo-site-final.png
素材本身 AI 都能做。
把它們收成同一個調性，是設計師的活。
把它們收成同一個調性，是設計師的活。
The punchline
AI 可以幫你做到 80 分、甚至 90 分。
最後那 10% 到 20%
就是 AI 把大家變成一樣時，
你還能不一樣的地方。
你還能不一樣的地方。
— Thank you —
謝謝大家
記得開啟小鈴鐺，下次更新不錯過
Slide 16｜qr-code.png · 280×280
Kevin Kuo · 凱文設計 · 創作邦