web-interface-design
✓在設計或審查 Web UI、實現表單/按鈕/輸入、修復視覺層次結構問題、創建顏色系統、構建佈局,或者當界面感覺混亂、難以閱讀或用戶不知道該單擊什麼時使用。
SKILL.md
Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
| Font sizes, line spacing, heading hierarchy, vertical rhythm | references/typography.md | | Input fields, validation, checkboxes, radios, selects, textareas | references/forms-and-inputs.md | | Button hierarchy, sizing, states, CTAs, ghost buttons | references/buttons.md |
在設計或審查 Web UI、實現表單/按鈕/輸入、修復視覺層次結構問題、創建顏色系統、構建佈局,或者當界面感覺混亂、難以閱讀或用戶不知道該單擊什麼時使用。 來源:ratacat/claude-skills。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 web-interface-design?
在設計或審查 Web UI、實現表單/按鈕/輸入、修復視覺層次結構問題、創建顏色系統、構建佈局,或者當界面感覺混亂、難以閱讀或用戶不知道該單擊什麼時使用。 來源:ratacat/claude-skills。
如何安裝 web-interface-design?
開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪?
https://github.com/ratacat/claude-skills
詳情
- 分類
- *創意媒體
- 來源
- skills.sh
- 收錄時間
- 2026-02-01