内容
# dembrandt-skills
适用于 AI 代理的用户体验和设计系统技能。只需安装一次，您的代理就知道如何设计。
```bash
npx skills add dembrandt/dembrandt-skills --all
```
`--all` 会一次性安装所有技能。它们只会在需要时加载，因此拥有所有技能不会带来运行时成本。想要手动选择？删除 `--all` 以使用交互式选择器。添加 `--global` 以跨所有项目安装。
## 如何使用
技能只是您的代理读取的指令。您不需要运行它。代理会读取每个技能的描述，并在您的请求匹配时加载相应的技能。
1. 使用上述命令安装，然后启动新会话。技能会在会话启动时加载。
2. 用简单的语言提问。“什么样的布局适合订单列表？”或“这是否符合 WCAG AA？”会自行加载正确的技能。
3. 为了全面检查，请广泛提问（“检查此屏幕”，“根据此品牌构建 UI”），`dembrandt` 技能会运行整个流程。
无需特殊语法。您可以命名技能以强制使用它（“使用布局技能”），但通常不需要。运行 `npx skills list` 以查看已安装的技能。
## 连接引擎（可选）
大多数技能都是纯知识，可以独立工作。其中两个技能，`extract-design` 和 `generate-ui-from-brand`，会从实时网站读取真正的设计令牌。这需要 [`dembrandt`](https://npm.im/dembrandt) 引擎。作为 MCP 服务器连接它。无需事先安装，`npx`会在首次运行时获取它：
```json
{
"mcpServers": {
"dembrandt": {
"command": "npx",
"args": ["-y", "--package", "dembrandt", "dembrandt-mcp"]
}
}
}
```
将此内容添加到您的代理的 MCP 配置中。在 Claude Code 中，该存储库已经附带了 `.mcp.json`，因此在您使用该项目时，它会自动连接。更喜欢 CLI？`npx -y dembrandt https://stripe.com` 无需任何配置即可运行。
## 这是什么
涵盖良好 UI 基本知识的实用技能，包括层次结构、排版、易用性和交互模式。从跨越数百种产品和领域的实践中提炼而成：企业工具、SaaS、金融平台、电子商务、消费者应用等。通常驻留在高级设计师或顾问处的 UX 知识。
与 Claude Code 和任何支持 Open Agent Skills 格式的代理程序配合使用。
## 尝试
> “我只有一种品牌颜色：#133174。为我创建一个完整的 UI 调色板。”
> “我的字体大小感觉是随机的。建立一个适当的字体大小比例。”
> “检查此界面是否存在易用性问题。”
> “我们有按钮、输入框和徽章，看起来像是来自三个不同的产品。”
> “为 B2B SaaS 工具设计一个多步骤的引导流程。”
> “这是否符合 WCAG 2.2 AA？”
> “从 stripe.com 提取设计系统。” *（需要引擎，请参见[连接引擎（可选）](#连接引擎（可选）））*
## 技能
**品牌与视觉识别**
| 技能 | 涵盖内容 |
|---|---|
| `brand-visual-language` | 形状语言、图标样式、排版基调 |
| `color-mode-and-theme` | 浅色 vs 深色 vs 组合，何时提供主题选择器 |
| `algorithmic-color-palette` | 从品牌颜色中导出状态和品牌色灰色 |
**设计令牌与比例**
| 技能 | 涵盖内容 |
|---|---|
| `modular-scale-typography` | 基于比例的字体大小、最小尺寸、上下文感知用法 |
| `elevation-and-depth` | 阴影比例、边框半径、卡片和模态模式 |
| `button-states` | 六种状态：默认、悬停、激活、焦点、禁用、加载中 |
| `component-family-consistency` | 按钮、输入框、药丸：共享半径、颜色、高度 |
**布局与结构**
| 技能 | 涵盖内容 |
|---|---|
| `layout-paradigms-and-consistency` | 选择适合内容的布局范式；在屏幕之间重用页面骨架 |
| `gestalt-ui-organisation` | 分组相关控件：邻近性、相似性、共同区域 |
| `visual-emphasis-and-hierarchy` | 每个视图一个 CTA，颜色和大小作为强调 |
| `information-architecture` | 命名、心理模型、数据 UI、确认对话框 |
| `ui-context-and-scope` | 层次结构、面包屑、颜色区域、范围通信 |
| `responsive-paradigms` | 移动/平板/桌面：导航、章节、粘性行为 |
| `ui-density` | 匹配密度到平台和用户类型 |
| `sticky-and-fixed-elements` | 页头、底部工具栏、z-index 令牌 |
| `scroll-areas` | 避免内部滚动，仅限单轴，用户控制 |
**组件与交互**
| 技能 | 涵盖内容 |
|---|---|
| `real-world-metaphors` | 卡片、轮播、抽屉：何时使用以及如何使用 |
| `form-design` | 帮助文本、占位符、验证、提交状态 |
| `tab-navigation` | 标签类型、溢出处理、漫游 tabindex、ARIA tablist、URL 状态 |
| `modal-and-overlay-patterns` | 叠加层级、焦点陷阱、关闭规则、破坏性确认 |
| `data-display-and-selection` | 网格/列表/表格、大点击区域、批量操作 |
| `repeated-component-alignment` | 重复组件作为槽模型：等大小、固定锚点、钳位 + 恢复文本 |
| `operational-expert-tool-ui` | 面向日常 B2B 用户的密集、高工作流驱动的 UI |
| `coordinated-data-views` | 保持表格和可视化视图（地图、图表、图表）同步 |
| `domain-expert-configuration` | 以领域语言公开求解器/算法设置 |
| `global-toolbar-controls` | 货币、语言、地区：位置和排版 |
| `notifications-and-recovery` | 吐司、横幅、重试、撤销：始终有前进的路径 |
| `status-colors-and-errors` | 最小语义颜色、错误恢复、预防 |
**用户体验原则**
| 技能 | 涵盖内容 |
|---|---|
| `nielsen-usability-heuristics` | 10 条可用性原则，附带审查清单 |
| `wcag-accessibility` | WCAG 2.2 AA / EN 301 549：对比度、键盘、ARIA |
| `user-flows-and-guided-paths` | 向导、购买流程、引导序列 |
| `authentic-product-representation` | 真实内容和真实输出优于暂存的模拟和营销装饰 |
| `micro-interactions` | 动画图标、切换、显示、庆祝 |
| `loading-states-and-perceived-performance` | 加载动画、骨架屏和分阶段进入动画 |
| `motion-and-storytelling` | UI 中的迪士尼原则和电影语言 |
**技术基础**
| 技能 | 涵盖内容 |
|---|---|
| `semantic-html-and-seo` | HTML5、替代文本、Open Graph、渐进增强 |
| `performance-and-web-vitals` | 灯塔审计、LCP、CLS、INP、图像、字体、JavaScript 加载 |
**流程与编排**
| 技能 | 涵盖内容 |
|---|---|
| `extract-design` | 通过 Dembrandt CLI 或 MCP 从任何实时网站提取真实的设计令牌（需要 dembrandt ≥ 0.12.10） |
| `generate-ui-from-brand` | URL 或 DESIGN.md 到令牌到决策到 UI 规范（需要 dembrandt ≥ 0.12.10） |
| `dembrandt` | 全 6 阶段 UX 编排器：品牌、令牌、布局、组件、润色、辅助功能门控 |
## 生态系统
[dembrandt](https://github.com/dembrandt/dembrandt) 的一部分：引擎从任何 URL 提取品牌的真实设计令牌，这些技能为您的代理提供 UX 知识，以便有效使用它们。
## 许可证
MIT
