● CODE DESIGN  ·  KEVIN KUO 2026 · 05

Code · Design · 2026

Codex 使用經驗分享

當 AI 把大家變得一樣時，
差異化就更有價值

Kevin Kuo / 凱文設計　·　創作邦

~/design-philosophy — claude

$

▸

▸

$

CODE DESIGN / KEVIN KUO 02 / 13

The thesis

當 AI 把大家變得一樣時，

差異化就更有價值。

— Differentiation is the new currency.

CODE DESIGN / KEVIN KUO 03 / 13

Today

今天會講什麼

• 01
  三個案例 Asset CDN · Design System · 精準指令
• 02
  三個設計小技巧 中文斜體 · 對比度 · 字重分層
• 03
  收尾 在 AI 之後，差異化還能站在哪裡

CODE DESIGN / KEVIN KUO 04 / 13

Case I · Asset CDN

Icon 跟圖庫，第一道差異化武器

i. AI 直接輸出

my-startup.app

Build faster, ship smarter.

A modern stack for modern teams.

□

Real-time sync毫秒同步

Secure by default企業級加密

□

Global CDN200+ 節點

Lightning fast10x 加速

ii. 設計師加工後

my-startup.app

Build faster, ship smarter.

A modern stack for modern teams.

Real-time sync毫秒同步

Secure by default企業級加密

Global CDN200+ 節點

Lightning fast10x 加速

CODE DESIGN / KEVIN KUO 05 / 13

Case II · Steal the spec

AI 不醜了，但大家會撞臉

CHROME EXTENSION design-md-chrome

## 為什麼 why

要不一樣，就要特別的 DesignMD。

## 怎麼做 how

• a.挑一個有調性的網站
• b.點插件，抽出 spec
• c.餵給 AI 當規範

in short · 看到喜歡的網站，
可以去獲得設計系統。

CODE DESIGN / KEVIN KUO 06 / 13

Case II · Side by side

撞臉款 vs 自己抓的 spec

i. Claude Design 預設出的

Slide 07｜case-b-default.png

ii. 餵了從喜歡網站抽出的 DesignMD

Slide 07｜case-b-custom.png

CODE DESIGN / KEVIN KUO 07 / 13

Case III · Be specific

給 Claude Design 的指令，數字越精準越準

「大一點」「深一點」「換一下」AI 都會猜。
把 px、色碼、字體名稱 直接寫進去，一次改對。

• 間距 × padding 大一點 ○ padding 改 24px
• 顏色 × 深一點的灰 ○ 改成 #1F2937
• 字體 × 標題改大一點 ○ Noto Serif TC SemiBold 56px
• 指元素 × 左上角那張卡片 ○ Editor / Jolt 點下去寫一句

CODE DESIGN / KEVIN KUO 08 / 13

Three small tips

接下來，三個容易被 AI 帶歪的設計細節

第一次生成出來時，這幾個地方最容易破功。
一般人不太會注意，但這就是「成品看起來像不像自己」的差距。

• i. 中文斜體 Fake italic 會把字 skew 歪
• ii. 對比度 氣質配色 ≠ 看得清楚
• iii. 字重分層 大字粗、小字細，層次自己跑出來

CODE DESIGN / KEVIN KUO 09 / 13

Tip 1 · No CJK italic

中文斜體，請 AI 改掉

Claude Design 預設會跑中文斜體。

但中文字體除非特別設計，斜體都是強制 skew 出來的，會變很醜。

告訴 AI：CJK 不要 italic，要強調用粗體或顏色。

× 不行

差異化來自手感

○ 正確

差異化來自手感

CODE DESIGN / KEVIN KUO 10 / 13

Tip 2 · Contrast check

對比度，請 AI 用 WebAIM 檢查

AI 配色常常落在「看起來氣質、實際看不清楚」的灰色地帶。

請 AI 用 WebAIM Contrast Checker 標準檢查，內文至少 4.5 : 1（WCAG AA）。

這段文字在背景上，看不太清楚對不對？

2.1 : 1 · FAIL

這段文字在背景上，看得清楚。

7.4 : 1 · PASS AAA

CODE DESIGN / KEVIN KUO 11 / 13

Tip 3 · Weight hierarchy

字大用粗，字小用細

字級不夠用？用字重補。

大字用粗體擔任視覺重量，小字用細體保持空氣感。

思源黑提供 7 個字重，免費。

差異化的力量

字級從 88 到 24 之間，差距由字重撐起來。粗細之間有清楚的層次，視覺上自然分主次。

× 反例：粗細顛倒

差異化的力量

層次塌掉，視覺重量不對。

CODE DESIGN / KEVIN KUO 12 / 13

The punchline

AI 可以幫你做到 80 分、甚至 90 分。

最後那 10% 到 20%

就是 AI 把大家變成一樣時，
你還能不一樣的地方。

CODE DESIGN / KEVIN KUO 13 / 13

— Thank you —

謝謝大家

平常會分享 AI 設計、Codex、創作工作流的內容。
有興趣的話，歡迎追蹤我。

kevinlearn.com Kevin Kuo · 凱文設計 · 創作邦