web-design-mastery
✓基於重構 UI 原則的生產級 Web 應用程序 UI 設計。始終激活：登陸頁面、儀表板、身份驗證屏幕、英雄部分、卡片設計、按鈕設計、表單輸入、導航、佈局、間距決策、排版層次結構、顏色選擇、陰影、深度、空狀態、背景裝飾。提供設計工作流程、視覺層次結構、間距系統（4px 網格）、字體比例、HSL 顏色系統、陰影標高、最後潤色。土耳其語：sayfa tasarımı、UI/UX、前端 tasarım、web tasarım、güzel arayüz、現代 tasarım、card tasarımı、buton stili、form tasarımı、renk Palati、tipografi。中文：漂亮的界面、時尚的設計、優質的感覺、視覺層次、空白、調色板、排版比例。
SKILL.md
Production-grade UI design principles from Refactoring UI by Adam Wathan & Steve Schoger.
| 1 | 4 | Micro gaps | | 2 | 8 | Tight, within components | | 3 | 12 | Related elements | | 4 | 16 | Section padding | | 6 | 24 | Between sections | | 8 | 32 | Major separation | | 12 | 48 | Large gaps | | 16 | 64 | Hero spacing | | 24 | 96 | Maximum separation |
| 12 | Labels, meta, fine print | | 14 | Body text, default | | 16 | Emphasis, subheadings | | 18 | Section headings | | 20 | Card titles | | 24 | Page section titles | | 30 | Page headings | | 36 | Hero subheading | | 48 | Hero heading | | 60-72 | Display text |
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 web-design-mastery？
基於重構 UI 原則的生產級 Web 應用程序 UI 設計。始終激活：登陸頁面、儀表板、身份驗證屏幕、英雄部分、卡片設計、按鈕設計、表單輸入、導航、佈局、間距決策、排版層次結構、顏色選擇、陰影、深度、空狀態、背景裝飾。提供設計工作流程、視覺層次結構、間距系統（4px 網格）、字體比例、HSL 顏色系統、陰影標高、最後潤色。土耳其語：sayfa tasarımı、UI/UX、前端 tasarım、web tasarım、güzel arayüz、現代 tasarım、card tasarımı、buton stili、form tasarımı、renk Palati、tipografi。中文：漂亮的界面、時尚的設計、優質的感覺、視覺層次、空白、調色板、排版比例。 來源：anilcancakir/my-claude-code。
如何安裝 web-design-mastery？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/anilcancakir/my-claude-code
詳情
- 分類
- *創意媒體
- 來源
- skills.sh
- 收錄時間
- 2026-02-01