这个 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？
- Shell / 命令行
- 网络访问
- MCP Server
Hermes Agent (for hermes typeui install-mcp / hermes mcp login)TypeUI remote MCP server at https://mcp.typeui.sh
本技能位于仓库 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，不是本技能）。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/bergside/typeui.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/hermes/typeui/typeui_hermes/skills/typeui" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 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.
安装 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 有哪些优点和局限？
- 提供结构化的项目级设计上下文：品牌套件 + 设计技能 + 提示词库 + 布局变体，而不只是零散提示词
- 指令清晰区分品牌参数与 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 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| TypeUI（Hermes Agent 设计技能） 本页 | 59 · 推荐 | ★ 2k | 3 个月前 | NOASSERTION |
| TypeUI for Grok | 59 · 推荐 | ★ 2k | 3 个月前 | NOASSERTION |
| TypeUI（OpenClaw 版） | 59 · 推荐 | ★ 2k | 3 个月前 | NOASSERTION |
| Impeccable | 58 · 推荐 | ★ 81k | 12 天前 | Apache-2.0 |
| Apple Liquid Glass 设计技能 | 58 · 推荐 | ★ 273 | 3 个月前 | NOASSERTION |
源材料未点名同类竞品，但仓库自身即提供两种替代路径：面向其他工具（Codex、Claude、Cursor、Zed 等 20+ 平台）的独立 TypeUI 插件，以及可本地生成的 SKILL.md/DESIGN.md 设计技能文件（npx typeui.sh generate）；若不使用 Hermes，应改用对应平台的插件包而非本技能文件。
FollowSkills 如何评估这个 Skill？
同上，Hermes Agent 平台适配版本，同样接入远程 MCP 服务器。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
本条评估按 FSRS 1.0 标准完成，维度分不做换算，已进入按 FSRS 2.0 重新评估的复核队列。
查看完整评分方法 →