Dembrandt UX 技能库

这个 Agent 能做什么，适合哪些场景？

这是一个面向 AI 代理的 Open Agent Skills 技能集合，覆盖品牌视觉、设计令牌、布局、组件、UX 原则和技术基础。安装后，代理会按提示加载匹配的技能；宽泛的界面评审请求可触发 dembrandt 技能所述的完整 UX 流程。仓库列出 45 项技能，其中 43 项安装后即可使用，extract-design 和 generate-ui-from-brand 等现场网站相关功能需要 Dembrandt 引擎。用户可用 npx skills 安装，也可在 Claude Code 中通过插件市场安装；README 还明确列出 Cursor、Codex 和 GitHub Copilot。它提供的是供其他代理调用的技能与可选 MCP 接口，不是独立的托管应用。

代理依据用户提示匹配技能，例如 nielsen-usability-heuristics 用于可用性评审、wcag-accessibility 用于 WCAG 2.2 AA 检查、algorithmic-color-palette 根据品牌色生成调色板。其他技能涵盖类型比例、响应式布局、表单、标签导航、模态框、加载状态及 Web 性能。dembrandt 技能描述了六阶段 UX 编排流程；extract-design 可通过 Dembrandt CLI 或 MCP 从实时网站提取设计令牌，generate-ui-from-brand 可从 URL 或 DESIGN.md 生成令牌、设计决策和 UI 规格。clone-website 用于依据页面捕获与计算样式重建页面，目标可为 Figma、Penpot 或代码。

1. 需要为 B2B SaaS 产品统一按钮、输入框和徽标样式的设计系统团队。
2. 希望在提交前检查界面对比度、键盘操作和 ARIA 的前端开发者。
3. 只有品牌主色、需要推导完整 UI 调色板的产品设计师。
4. 为多步骤 onboarding 或购买流程设计引导路径的产品团队。
5. 需要从 Stripe 等实时网站提取设计令牌、且能安装 Dembrandt 引擎的设计工程师。

如何安装或部署这个 Agent？

在终端安装全部技能：

npx skills add dembrandt/dembrandt-skills --all

--global 可将技能安装到每个项目。Claude Code 用户也可在 Claude Code 中添加市场并安装插件：

/plugin marketplace add dembrandt/dembrandt-skills
/plugin install dembrandt@dembrandt

若要启用读取实时网站的功能，安装 Node.js 18 或更高版本，并添加 Dembrandt MCP 配置：

{
  "mcpServers": {
    "dembrandt": {
      "command": "npx",
      "args": ["-y", "dembrandt", "mcp"]
    }
  }
}

首次提取前还需运行：

npx dembrandt install-browser

如何使用这个 Agent？

打开 UI 文件后，用自然语言向代理提出任务，例如：

Review this interface for usability issues.

也可以提出更具体的设计请求，例如“Does this pass WCAG 2.2 AA?”。提取实时网站设计系统时，可要求提取某个网站；这需要已配置 Dembrandt MCP 或 CLI，并完成浏览器安装。

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

常见问题