关于 typeui
typeui 是一项技能,可帮助 Hermes Agent 借助 TypeUI 项目上下文构建或改进界面。它应用项目设计技能、品牌套件、提示词库和布局指导;如有可用的 TypeUI MCP 工具,则优先使用。
主要功能
- 01项目专属设计技能
- 02包含品牌标识与样式令牌的品牌套件
- 03面向界面区块和产品流程的提示词
- 04布局变体指导
- 05使用 TypeUI MCP 工具的说明
适用场景
- 01使用 TypeUI 项目构建落地页
- 02生成定价区块的多种方案
- 03使用设计技能改版仪表盘
- 04修改界面前加载项目设计上下文
MCP 相关
此插件会安装 TypeUI 远程 MCP 服务,地址为 https://mcp.typeui.sh。Hermes Agent 可使用其工具,也可通过插件命令或 typeui_install_mcp 安装 MCP 配置。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ bergside/ typeui --skill typeui安装后在 Claude Code 中输入/typeui确认已加载。
详细介绍
TypeUI for Hermes Agent
当用户希望 Hermes Agent 借助 TypeUI 上下文构建、重新设计或优化 UI 时,使用此技能。
TypeUI 提供的内容
- 项目设计技能,确保视觉方向一致。
- 品牌套件,包含项目名称、徽标、字体和品牌色令牌。
- UI 提示词库,涵盖常见界面版块和完整产品流程。
- 布局变体指南,帮助在实现前生成更出色的方案。
如何使用 TypeUI
- 如果当前会话中有可用的 TypeUI MCP 工具,优先使用。
- 如果请求未指定 TypeUI 项目或设计技能,请询问用户要使用哪一个。
- 在选择颜色、字体、间距、组件风格或页面布局前,先应用所选项目的上下文。
- 品牌套件的值仅作为品牌参数:徽标、项目名称、字体和品牌色。
- 将设计技能视为 UI 样式、组件行为、视觉层次、间距和交互模式的依据。
MCP 服务
此插件包会安装 TypeUI 远程 MCP 服务:
https://mcp.typeui.sh
如果当前 Hermes 会话中没有可用的 TypeUI 工具,请使用插件命令安装 MCP 服务:
hermes typeui install-mcp
hermes mcp login typeui
Hermes Agent 也可以调用 typeui_install_mcp 来写入 TypeUI MCP 服务条目。
提示词示例
- 使用我的 TypeUI 项目构建一个落地页。
- 使用 TypeUI 生成三个定价版块变体。
- 使用我的 TypeUI 设计技能重新设计此仪表盘。
- 更改 UI 前,先获取此项目的 TypeUI 上下文。
评论
支持 Markdown