mcpField
T
typeui

typeui

github.com/bergside设计与 UI2.2k304 次安装3 周前更新
代码仓库

关于 typeui

typeui 是一项技能,可帮助 Hermes Agent 借助 TypeUI 项目上下文构建或改进界面。它应用项目设计技能、品牌套件、提示词库和布局指导;如有可用的 TypeUI MCP 工具,则优先使用。

主要功能

  1. 01项目专属设计技能
  2. 02包含品牌标识与样式令牌的品牌套件
  3. 03面向界面区块和产品流程的提示词
  4. 04布局变体指导
  5. 05使用 TypeUI MCP 工具的说明

适用场景

  1. 01使用 TypeUI 项目构建落地页
  2. 02生成定价区块的多种方案
  3. 03使用设计技能改版仪表盘
  4. 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

  1. 如果当前会话中有可用的 TypeUI MCP 工具,优先使用。
  2. 如果请求未指定 TypeUI 项目或设计技能,请询问用户要使用哪一个。
  3. 在选择颜色、字体、间距、组件风格或页面布局前,先应用所选项目的上下文。
  4. 品牌套件的值仅作为品牌参数:徽标、项目名称、字体和品牌色。
  5. 将设计技能视为 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