重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
web-interface-design by ratacat/claude-skills
npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design设计的目的是区分主次。用户应能立即识别出重要内容。优秀的界面设计是隐形的——用户能在不察觉界面的情况下达成目标。
本技能负责编排特定领域的参考文件。仅阅读任务所需内容。
| 任务 | 加载参考 |
|---|---|
| 字体大小、行间距、标题层级、垂直节奏 | references/typography.md |
| 输入字段、验证、复选框、单选按钮、下拉选择、文本域 | references/forms-and-inputs.md |
| 按钮层级、尺寸、状态、行动号召、幽灵按钮 | references/buttons.md |
| 配色方案、深色模式、色调/深浅、状态颜色 | references/color-systems.md |
| 导航、卡片、标签页、手风琴、模态框、表格、提示框 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
references/ui-components.md |
| 网格、间距比例、响应式模式、留白 | references/layout-and-spacing.md |
| 焦点技术、层级原则、行动金字塔 | references/visual-hierarchy.md |
| 对比度、焦点状态、屏幕阅读器、WCAG | references/accessibility.md |
| CSS 实现模式、变量、常见样式 | references/css-patterns.md |
问题是什么?
├─ 文本难以阅读,间距感觉不对 → typography.md
├─ 表单效果不佳,验证问题 → forms-and-inputs.md
├─ 用户不知道点击什么 → buttons.md 或 visual-hierarchy.md
├─ 颜色看起来不对,深色模式异常 → color-systems.md
├─ 需要导航/卡片/标签页/模态框/表格 → ui-components.md
├─ 间距不一致,布局拥挤 → layout-and-spacing.md
├─ 所有元素都在争夺注意力 → visual-hierarchy.md
├─ 无障碍审计或对比度问题 → accessibility.md
└─ 需要 CSS 实现 → css-patterns.md
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
| 层级 | 用途 | 处理方式 |
|---|---|---|
| 主要 | 主要操作(每个视图仅一个) | 实心填充,高对比度 |
| 次要 | 替代操作 | 描边或浅色填充 |
| 三级 | 次要操作 | 纯文本或幽灵按钮 |
每周安装数
65
代码仓库
GitHub 星标数
25
首次出现
Jan 21, 2026
安全审计
安装于
opencode56
gemini-cli54
codex50
cursor48
github-copilot47
claude-code44
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.
| Task | Load Reference |
|---|---|
| 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 |
| Color palettes, dark mode, tints/shades, state colors | references/color-systems.md |
| Navigation, cards, tabs, accordions, modals, tables, toasts | references/ui-components.md |
| Grids, spacing scales, responsive patterns, whitespace | references/layout-and-spacing.md |
| Focus techniques, hierarchy principles, action pyramid | references/visual-hierarchy.md |
| Contrast ratios, focus states, screen readers, WCAG | references/accessibility.md |
| CSS implementation patterns, variables, common styles | references/css-patterns.md |
What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
| Level | Use For | Treatment |
|---|---|---|
| Primary | Main action (ONE per view) | Solid fill, high contrast |
| Secondary | Alternative actions | Outlined or subtle fill |
| Tertiary | Minor actions | Text-only or ghost |
Weekly Installs
65
Repository
GitHub Stars
25
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode56
gemini-cli54
codex50
cursor48
github-copilot47
claude-code44
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
53,200 周安装