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