TypeUI(Hermes Agent 设计技能)
为 Hermes Agent 接入 TypeUI MCP 服务器,在生成或改写 UI 时提供项目设计技能、品牌套件、UI 提示词与布局变体指导,避免 AI 产出脱离品牌与设计规范的界面。
同上,Hermes Agent 平台适配版本,同样接入远程 MCP 服务器。
这个 Skill 能做什么,适合哪些场景?
TypeUI 是 Bergside 开发的一个 AI 优先设计平台,本技能是它在 Hermes Agent 中的接入层。技能本身是一份 SKILL.md 指令文件,指导智能体优先调用 TypeUI 的远程 MCP 服务器(https://mcp.typeui.sh),读取项目的品牌套件(名称、Logo、字体、品牌色)与设计技能,再据此决定配色、字体、间距与组件风格。注意:该技能的安装与登录命令(hermes typeui install-mcp、hermes mcp login)是 Hermes 专有的;README 显示同一仓库也为 Codex、Claude、Cursor 等其他工具提供各自的插件包,但那是不同的打包,不是本技能文件本身。仓库的 CLI 与公共注册表以 MIT 许可开源,GitHub 仓库整体的许可证字段为 NOASSERTION。
它不做任何本地计算或代码生成,而是:(1)指示智能体在会话中优先使用 TypeUI MCP 工具;(2)在用户未指定时询问使用哪个 TypeUI 项目或设计技能;(3)通过 MCP 拉取项目设计技能、品牌套件(Logo、项目名、字体、品牌色 token)、UI 提示词库(覆盖常见界面区块与完整产品流程)和布局变体指导;(4)把品牌套件仅当作品牌参数,把设计技能当作 UI 风格、组件行为、视觉层次、间距与交互模式的唯一依据,再进行界面生成或重设计。
- 使用 Hermes Agent 且已在 TypeUI 建立项目的开发者,需要生成符合既有品牌规范的落地页
- 产品团队希望 AI 在改写仪表盘等界面时自动沿用项目的字体、品牌色与组件风格
- 设计师/前端需要在实现前对比同一区块(如定价区)的多个布局变体再择优
- 维护多品牌产品线的团队,希望智能体在改 UI 前先拉取对应项目的 TypeUI 设计上下文
这个 Skill 有哪些优点和局限?
- 提供结构化的项目级设计上下文:品牌套件 + 设计技能 + 提示词库 + 布局变体,而不只是零散提示词
- 指令清晰区分品牌参数与 UI 风格来源,减少智能体混用或越权改色的行为
- 基于远程 MCP 服务器,设计资源无需本地维护,可在会话内直接调用
- 仓库 CLI 与公共注册表 MIT 开源,并有活跃的多工具生态(Codex、Claude、Cursor 等各有插件)
- 深度绑定 Hermes Agent:安装/登录命令(hermes typeui install-mcp、hermes mcp login)在其他平台上不可直接使用,需要自行配置 MCP 服务器条目
- 核心资源依赖远程服务 https://mcp.typeui.sh,离线不可用,且托管服务可能涉及账号/费用(源材料未说明定价,仅有 Pro 版本提及)
- GitHub 仓库许可证字段为 NOASSERTION,与本技能 SKILL.md 标注的 MIT 及 README 所述 CLI/注册表 MIT 不完全一致,采用前需自行核实
- 源材料未提供测试套件、版本号或针对其他智能体平台验证本技能文件的证据
如何安装这个 Skill?
本技能位于仓库 plugins/hermes/typeui/typeui_hermes/skills/typeui/SKILL.md,属于包含 4 个技能的 monorepo 之一。若 TypeUI 工具尚未在 Hermes 会话中可用,按 SKILL.md 提供的命令安装并登录 MCP 服务器:hermes typeui install-mcp,然后 hermes mcp login typeui;智能体也可调用 typeui_install_mcp 写入 MCP 服务器条目。如何将 SKILL.md 文件夹放入具体 Agent Skills 目录,源材料未说明。若想使用仓库的 UI/UX 基础技能,README 提供了针对另一技能的命令:npx skills add https://github.com/bergside/typeui --skill typeui-fundamentals(注意这是 typeui-fundamentals,不是本技能)。
如何使用这个 Skill?
安装 MCP 后直接用自然语言触发,SKILL.md 给出的示例包括:'Use my TypeUI project and build a landing page.'、'Generate three pricing section variations with TypeUI.'、'Redesign this dashboard using my TypeUI design skill.'、'Pull the TypeUI context for this project before changing the UI.'。若请求未指明项目,智能体应先询问使用哪个 TypeUI 项目或设计技能,再应用上下文。
这个 Skill 与同类方案有什么区别?
源材料未点名同类竞品,但仓库自身即提供两种替代路径:面向其他工具(Codex、Claude、Cursor、Zed 等 20+ 平台)的独立 TypeUI 插件,以及可本地生成的 SKILL.md/DESIGN.md 设计技能文件(npx typeui.sh generate);若不使用 Hermes,应改用对应平台的插件包而非本技能文件。