UI Skills — 給 Coding Agent 補 UI 設計能力

• URL: https://www.threads.com/@iextrastu/post/DdLa-hPE3PM
• Date Saved: 2026-09-12
• Source: Threads
• Tags: ai-tools, design-tools
• Repo: https://github.com/ibelick/ui-skills (8,353 stars, MIT)
• Site: https://ui-skills.com

Summary

@iextrastu 推薦 UI Skills（ui-skills.com）— 一套給 Claude Code / Codex / Cursor 等 coding agent 用的 UI 設計 skill 集合。解決的問題：AI 寫的 UI 能用但不夠精緻，動畫不自然，組合起來很「AI 味」。

推薦的 8 個 skill：

1. better-typography — 處理 Type Scale、Line Height、Letter Spacing、Text Width、Font，解決「佈局沒問題但看起來差點意思」
2. review-animations — Motion Reviewer，檢查 Timing / Consistency / Transition / Motion Quality，不再只是 transition: all 0.3s ease
3. better-layout — Dashboard / Settings / SaaS 頁面，關注 Grouping / Alignment / Reading Order / Responsive / Progressive Disclosure
4. 12-principles-of-animation — 經典 12 動畫原則帶進 Web UI（Timing / Staging / Anticipation / Follow Through / Ease）
5. harden — Demo UI → Production-ready UI，處理 Empty State / Error State / Loading / 超長文本 / i18n / Edge Cases
6. make-interfaces-feel-better — 最後 20% 的打磨：Border / Shadow / Radius / Typography / Hover / Press / Optical Alignment
7. fixing-accessibility / better-accessibility — ARIA / Focus / Keyboard / Forms / Screen Reader / Hit Area / Reduced Motion
8. shadcn — React + Next.js + Tailwind + shadcn/ui stack 專用，讓 agent 學會搜索、複用、組合現有組件

其他值得挖的：

• find-animation-opportunities — 找值得加動畫的地方
• optimize — Rendering / Assets / Loading / Motion Performance
• adapt — Responsive / Breakpoints
• clarify — Label / Microcopy / UX Messaging

核心思路： 不再用模糊 prompt（「高級一點」「參考 Linear」），而是把方法論直接交給 Agent。Model 負責寫代碼，Skills 負責定義什麼算「做好」。