結論
Claude Code / Codex 做設計，不是只裝一個「frontend design」技能。必備的是一套 Design Agent Stack：
- Frontend Aesthetic Skill
- Design System Skill
- Screenshot / Reference Reverse Engineering Skill
- Component Library Skill
- Motion / Interaction Skill
- Responsive QA Skill
- Accessibility QA Skill
- Visual Regression Skill
- Conversion UI / Landing Page Skill
- Editorial Graphic / Social Visual Skill
Claude Code 已有官方 frontend-design skill，定位是產出「distinctive, production-grade frontend interfaces」，重點包含設計方向、字體、色彩、動畫、細節，避免普通 AI 感。
Codex 目前也有官方 Agent Skills，可把 instructions、resources、scripts 包成 reusable workflow，並支援 CLI、IDE extension、Codex app。
Must-Have Skills 清單
| Skill | 用途 | Claude Code | Codex |
|---|---|---|---|
| Frontend Design | 產出高質感 UI，不要 AI 模板感 | 用官方 frontend-design skill |
自建 frontend-design/SKILL.md |
| Design System Extractor | 從現有網站 / Figma / 截圖抽出 tokens、spacing、components | Skill + subagent | Skill + AGENTS.md |
| Screenshot-to-UI | 根據 screenshot 反推 layout、style、component code | Skill | Skill |
| Landing Page Builder | Hero、CTA、section rhythm、conversion flow | Skill | Skill |
| Component Library Builder | shadcn/ui、Tailwind、Radix、CMS components | Skill | Skill |
| Motion Design | GSAP、Framer Motion、scroll animation、micro-interaction | Skill | Skill |
| Responsive QA | Desktop / tablet / mobile breakpoint 檢查 | Skill + hooks | Skill + tests |
| Accessibility QA | contrast、keyboard nav、semantic HTML、ARIA | /code-review + custom skill |
Skill + lint/test |
| Visual Regression QA | screenshot comparison、Playwright、Percy-style review | Skill + script | Skill + script |
| Editorial Graphic Design | 社群圖、報告圖、magazine layout、dark theme infographic | Custom skill | Custom skill |
| Brand Guardian | 固定品牌語氣、色彩、排版禁忌 | CLAUDE.md / skill | AGENTS.md / skill |
| Design Critic | 專門做視覺批判，不直接寫 code | Subagent | Subagent |
Claude Code 優先裝法
Claude Code 的 Skills 適合放重複流程。官方說明：建立 SKILL.md 後，Claude 會在相關任務時使用，也可用 /skill-name 直接呼叫；Skill body 只有在使用時才載入，適合放長規範。
建議結構
.claude/
CLAUDE.md
skills/
frontend-design/
SKILL.md
design-system-extractor/
SKILL.md
screenshot-to-ui/
SKILL.md
editorial-graphic-design/
SKILL.md
responsive-qa/
SKILL.md
visual-regression/
SKILL.md
agents/
design-critic.md
accessibility-reviewer.md
motion-designer.md
Claude Code 必備 Skill 排序
| 優先級 | Skill |
|---|---|
| 1 | frontend-design |
| 2 | screenshot-to-ui |
| 3 | design-system-extractor |
| 4 | component-library-builder |
| 5 | responsive-qa |
| 6 | visual-regression |
| 7 | editorial-graphic-design |
| 8 | brand-guardian |
Claude Code 還支援 subagents，適合把 codebase exploration、review、debug、設計批判拆出去，避免主對話塞滿雜訊。
MCP 則適合接 Figma、Notion、GitHub、issue tracker、CMS，不用一直複製貼上資料。
Codex 優先裝法
Codex 最核心是三層：
~/.codex/AGENTS.md # 全域設計偏好
project/AGENTS.md # 專案規範
project/.codex/skills/ # 可重複設計工作流
OpenAI 官方建議把穩定規則寫進 AGENTS.md，內容包含 repo layout、run command、test/lint、engineering conventions、PR expectations、done definition。
Codex 也支援全域 ~/.codex/AGENTS.md 與 repo-level AGENTS.md 分層，還可用 override 做局部規則。
Codex 必備 Skill 排序
| 優先級 | Skill |
|---|---|
| 1 | frontend-design |
| 2 | design-system-extractor |
| 3 | figma-or-screenshot-to-code |
| 4 | landing-page-conversion-ui |
| 5 | tailwind-shadcn-component-builder |
| 6 | responsive-accessibility-review |
| 7 | playwright-visual-qa |
| 8 | brand-editorial-system |
Codex 的 subagent workflow 適合大型任務，例如一個 agent 探索 codebase、一個 agent 做 UI 實作、一個 agent 做 QA review，最後彙整結果。
最實用的 10 個 Skill 定義
1.
frontend-design
用途：避免普通 SaaS 模板感，強制有明確視覺觀點。
必寫規則：
- Pick a strong aesthetic direction before coding.
- Avoid generic AI SaaS UI.
- Use distinctive typography, spacing, layout rhythm, and interaction.
- Implement real production-ready code.
- Match complexity to aesthetic direction.
2.
design-system-extractor
用途：從現有網站 / screenshot / Figma reference 抽出設計系統。
輸出：
- Color tokens
- Typography scale
- Spacing scale
- Border radius
- Shadows
- Component patterns
- Layout grid
- Motion rules
- Do / Don’t list
3.
screenshot-to-ui
用途：把參考圖反推成 HTML / React / Tailwind。
必寫規則：
- First describe the layout hierarchy.
- Then extract visual tokens.
- Then implement the UI.
- Do not copy brand logos or protected marks unless provided by the user.
- Match proportions, spacing, and visual density.
4.
editorial-graphic-design
用途：社群圖、AI infographic、magazine-style dark theme。
適合你的 EK / IG cover workflow。
必寫規則：
- Use Traditional Chinese, Taiwan-fluent wording.
- Remove original author/user IDs.
- Credit belongs to “Tenten”.
- Use dark editorial magazine layout.
- Prioritize hierarchy, punchy title, data-card structure, and visual tension.
- Output social captions for X, LinkedIn, Instagram.
5.
landing-page-conversion-ui
用途：做 Tenten、AI consultant、B2B tech、SaaS landing page。
輸出：
- Hero
- Problem section
- Solution section
- Proof
- Process
- Use cases
- CTA
- FAQ
- Conversion notes
6.
component-library-builder
用途：建立可維護 components，不只是單頁 demo。
技術規則：
- Prefer reusable components.
- Support props and variants.
- Use Tailwind tokens.
- Keep visual styles centralized.
- Avoid one-off hardcoded layout when component should be reusable.
7.
motion-design
用途：GSAP / Framer Motion / scroll-trigger / micro-interaction。
輸出：
- Motion intent
- Trigger
- Duration
- Easing
- Reduced motion fallback
- Performance notes
8.
responsive-qa
用途：避免 desktop 好看、mobile 爛掉。
檢查：
- 1440
- 1280
- 1024
- 768
- 430
- 390
- 375
9.
accessibility-review
用途：基礎品質線。
檢查：
- Contrast
- Semantic HTML
- Keyboard navigation
- Focus state
- ARIA misuse
- Alt text
- Reduced motion
10.
visual-regression
用途：讓 AI 做完 UI 後自己截圖檢查。
搭配工具：
- Playwright
- screenshot diff
- viewport matrix
- console error check
- layout overflow check
最小可用
AGENTS.md
給 Codex 用：
# AGENTS.md
## Design Quality Rules
- Never produce generic AI SaaS UI.
- Always choose a clear visual direction before implementation.
- Use strong typography, deliberate spacing, and coherent layout rhythm.
- Prioritize production-ready UI over mockup-only output.
- Use Tailwind CSS unless the project uses another styling system.
- Respect existing design tokens and component conventions.
- Do not introduce new dependencies unless necessary.
## Frontend Implementation
- Inspect existing components before creating new ones.
- Reuse existing layout, typography, button, card, and section patterns.
- Keep components composable.
- Test responsive layouts at desktop, tablet, and mobile widths.
- Run lint/build after changes when available.
## Done Means
- UI works.
- Layout is responsive.
- No obvious overflow.
- No console errors.
- Code follows project conventions.
- Visual result has a clear design point of view.
最小可用
SKILL.md
給 Claude Code / Codex 都可用：
---
name: editorial-graphic-design
description: Create dark editorial magazine-style social visuals and infographic layouts in Traditional Chinese for AI, design, business, and technology topics.
---
# Editorial Graphic Design Skill
Use this skill when creating social visuals, infographic covers, magazine-style layouts, or redesigning screenshot-based content.
## Output Principles
- Use Traditional Chinese, Taiwan-fluent wording.
- Remove original user IDs, handles, and author metadata.
- Add design credit: Tenten.
- Use dark editorial magazine design.
- Prefer strong hierarchy, large title, sharp contrast, compact information blocks, and high-density visual rhythm.
- Avoid generic AI gradient-card aesthetics.
- Make the result feel like a premium business / technology magazine spread.
## Layout Rules
- One dominant title.
- One supporting subtitle.
- 3–5 structured insight blocks.
- Use editorial spacing, asymmetric layout, and strong typographic contrast.
- Keep visual density high but readable.
- Use data-like labels, annotations, and section dividers.
## Copy Rules
- Translate or rewrite into fluent Traditional Chinese.
- Make the title punchy.
- Remove filler.
- Keep concepts sharp and business-oriented.
## Social Caption Output
After visual generation, also produce:
- X.com post
- LinkedIn post
- Instagram caption
All in Traditional Chinese.
實際推薦組合
Claude Code
Claude Code
├─ official frontend-design skill
├─ custom editorial-graphic-design skill
├─ custom screenshot-to-ui skill
├─ custom design-system-extractor skill
├─ design-critic subagent
├─ accessibility-reviewer subagent
└─ MCP: Figma / GitHub / Notion / browser / CMS
Codex
Codex
├─ ~/.codex/AGENTS.md
├─ project/AGENTS.md
├─ frontend-design skill
├─ design-system-extractor skill
├─ playwright-visual-qa skill
├─ responsive-accessibility-review skill
├─ subagents: implementer / reviewer / QA
└─ config.toml profiles for design-heavy tasks
判斷標準
| 需求 | 用 Claude Code | 用 Codex |
|---|---|---|
| 視覺方向、創意 UI、設計 taste | 強 | 中強 |
| codebase 大型改動 | 強 | 強 |
| repo-level 長期規範 | CLAUDE.md + skills | AGENTS.md + skills |
| 多 agent 平行 review | subagents | subagents |
| 設計圖轉前端 | 強 | 強 |
| 嚴格工程驗證 | 強 | 強 |
| 可重複 workflow 包裝 | skills | skills |
核心結論：
Claude Code 更適合「設計感 + coding」；Codex 更適合「規範化工程 + 可驗證實作」。最佳做法是同一套 design skills 同時寫成 Claude SKILL.md 和 Codex SKILL.md / AGENTS.md 。