ui-design-guide 适用于哪些场景？

ui-design-guide 适用于：设计与创意。也可在 AgentHub 场景页查看配套 MCP 与 Skill。

在 Cursor / Claude Code 中配置 ui-design-guide 提示 connection closed 或 exit code 1？

通常由本地运行时环境缺失或命令路径未被 IDE 继承引起。排查步骤： 1. 确认已安装 Node.js 18+（支持 npx）或 Python 3.10+（支持 uvx）； 2. 尝试在终端运行 which npx 或 which uvx，把配置文件中的 "command" 字段改为完整绝对路径； 3. 修改 mcp.json 后，必须完全重载或重启客户端窗口。

提示 spawn npx ENOENT 或 command not found？

这是因为编辑器后台进程未加载完整的终端环境变量（PATH）。解决方案：在全局安装该包（如 npm install -g 包名），或在配置文件中将 command 设置为系统的实际路径（如 Windows 下的 C:\Program Files\nodejs\npx.cmd，Mac 下的 /usr/local/bin/npx）。

调用工具时响应超时或网络下载依赖失败？

国内环境下首次执行 npx 或拉取依赖时可能因网络受限而超时。建议将 npm 镜像源切换为国内高速镜像（npm config set registry https://registry.npmmirror.com），或在系统级开启开发代理工具。

在对话中描述任务，Agent 没有自动调用 ui-design-guide 规则？

请检查 SKILL.md 是否位于当前项目的 .cursor/skills/ui-design-guide/SKILL.md（Cursor）或 ~/.claude/skills/ui-design-guide/SKILL.md（Claude Code）。在输入提问时，可以显式提示 AI “请使用 ui-design-guide 规范来执行”，以提高智能体的规则匹配权重。

ui-design-guide Skill安装与使用教程

Q: ui-design-guide 是什么？

Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI. ui-design-guide 是一个Agent Skill，收录自 ClawHub。本页提供产品介绍、配置教程、安装命令与适用场景，支持 Trae、通义灵码、Cursor、Claude Code、VS Code 等。

Q: 如何安装 ui-design-guide？

AgentHubMCP · Skill

ui-design-guide Skill安装与使用教程 - AgentHub

按平台快速复制

选择你的平台查看安装方式

选择安装方式

点击「复制配置」直接粘贴到客户端

# 改 --ai 切换客户端：trae | lingma | workbuddy | kimi | qwen | cursor | claude-code | windsurf | cline | vscode | openclaw
curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai cursor -y

配置教程

打开 ui-design-guide 详情页，确认来源为 ClawHub，并阅读下方适用场景。
选择 Trae、通义灵码、WorkBuddy、Cursor、Claude Code 或通用 CLI，复制对应安装命令。
在终端执行命令，或将 SKILL.md 放到项目的 .trae/skills/、.lingma/skills/、.cursor/skills/ 等目录。
重载客户端窗口后，在对话中描述任务，Agent 会按 Skill description 自动匹配。

安装命令

以下安装命令与配置步骤已写入页面 HTML，搜索引擎与未启用 JavaScript 的浏览器均可直接读取。

通用 — Skills CLI（推荐）

AgentHub CLI（改 --ai）

# 改 --ai 切换客户端：trae | lingma | workbuddy | kimi | qwen | cursor | claude-code | windsurf | cline | vscode | openclaw
curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai cursor -y

API 一键下载

# 手动下载（Cursor 项目级示例）
mkdir -p .cursor/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .cursor/skills/ui-design-guide

Cursor

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai cursor -y

统一 Manifest

{
  "id": "io.clawhub.binggg/ui-design-guide",
  "type": "skill",
  "version": "1.18.51",
  "displayName": "ui-design-guide",
  "description": "Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.",
  "author": {
    "name": "binggg",
    "url": "https://clawhub.ai/binggg"
  },
  "homepage": "https://clawhub.ai/binggg/ui-design-guide",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "binggg/ui-design-guide",
        "version": "1.18.51",
        "runtimeHint": "clawhub install"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "openclaw",
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [
    "downloads:4726",
    "stars:0",
    "installs:63"
  ],
  "provenance": {
    "origin": "clawhub",
    "originalId": "binggg/ui-design-guide",
    "originalUrl": "https://clawhub.ai/binggg/ui-design-guide",
    "isOfficial": false,
    "status": "active"
  }
}

mkdir -p .cursor/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .cursor/skills/ui-design-guide

ClawHub CLI 安装后复制

# 在项目根目录执行 install
clawhub install binggg/ui-design-guide
mkdir -p .cursor/skills/ui-design-guide
cp -R ./skills/ui-design-guide/. .cursor/skills/ui-design-guide/

# 源：./skills/ui-design-guide/SKILL.md
# 目标：.cursor/skills/ui-design-guide/SKILL.md

Trae（字节跳动）

Trae 原生支持 Skill 规范：项目级配置在 .trae/skills/<技能名>/，全局在 ~/.trae/skills/
点击复制安装命令在项目根目录终端执行，自动拉取 SKILL.md 及相关依赖
重载 Trae 窗口后，在 AI 对话中描述需求即可自动激活该技能

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai trae -y

API 一键下载

mkdir -p .trae/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .trae/skills/ui-design-guide

用户级目录

mkdir -p ~/.trae/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.trae/skills/ui-design-guide

通义灵码（阿里）

通义灵码支持在项目 .lingma/skills/<技能名>/ 或用户全局目录 ~/.lingma/skills/ 识别技能
终端运行安装命令拉取 SKILL.md
打开通义灵码智能体（Agent）模式，对话即可自动按 description 匹配该技能

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai lingma -y

API 一键下载

mkdir -p .lingma/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .lingma/skills/ui-design-guide

用户级目录

mkdir -p ~/.lingma/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.lingma/skills/ui-design-guide

WorkBuddy / 腾讯云代码助手

腾讯云代码助手 / WorkBuddy 支持在 .workbuddy/skills/<技能名>/ 或 .codebuddy/skills/ 读取技能
复制命令执行后下载 SKILL.md，客户端自动索引并加载
在 WorkBuddy 对话面板中即可直接调度技能指令

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai workbuddy -y

API 一键下载

mkdir -p .workbuddy/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .workbuddy/skills/ui-design-guide

用户级目录

mkdir -p ~/.workbuddy/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.workbuddy/skills/ui-design-guide

Claude Code

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai claude-code --global -y

API 一键下载

mkdir -p ~/.claude/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.claude/skills/ui-design-guide

ClawHub CLI 安装后复制

clawhub install binggg/ui-design-guide
mkdir -p ~/.claude/skills/ui-design-guide
cp -R ./skills/ui-design-guide/. ~/.claude/skills/ui-design-guide/

# 源：./skills/ui-design-guide/SKILL.md
# 目标：~/.claude/skills/ui-design-guide/SKILL.md
# https://clawhub.ai/binggg/ui-design-guide

Kimi Code（月之暗面）

Kimi Code 兼容标准 Agent Skills：项目技能位于 .agents/skills/<技能名>/，全局位于 ~/.agents/skills/
终端执行命令完成安装
在 Kimi Code CLI 或 Agent 对话中提出相应任务，AI 会自动按步骤规划与执行

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai kimi -y

API 一键下载

mkdir -p .agents/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .agents/skills/ui-design-guide

用户级目录

mkdir -p ~/.agents/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.agents/skills/ui-design-guide

通义千问（Qwen Code）

通义千问（Qwen Code）支持项目目录 .qwen/skills/<技能名>/ 与全局 ~/.qwen/skills/
终端执行命令将 SKILL.md 部署至目录
在 Qwen Agent 模式下直接发送任务提示词即可自动识别

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai qwen -y

API 一键下载

mkdir -p .qwen/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .qwen/skills/ui-design-guide

用户级目录

mkdir -p ~/.qwen/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.qwen/skills/ui-design-guide

Windsurf

Windsurf 支持在项目根目录 .windsurf/skills/<技能名>/ 或全局 ~/.codeium/windsurf/skills/ 放置技能
执行安装命令后刷新 Cascade 窗口
对话中 Cascade 会自动识别任务并按 SKILL.md 规范进行编码与重构

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai windsurf -y

API 一键下载

mkdir -p .windsurf/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .windsurf/skills/ui-design-guide

用户级目录

mkdir -p ~/.codeium/windsurf/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.codeium/windsurf/skills/ui-design-guide

Cline

Cline 支持标准 .agents/skills/<技能名>/ 目录结构
运行命令将技能写入项目
在 VS Code Cline 扩展中提问即可直接调用

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai cline -y

API 一键下载

mkdir -p .agents/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d .agents/skills/ui-design-guide

Cherry Studio

Cherry Studio 可作为自定义智能体或提示词使用该技能
复制指令获取 SKILL.md 文本内容
在 Cherry Studio → 助手管理中新建/编辑助手，将内容粘贴到「系统提示词」中保存启用

# 下载并提取 SKILL.md 指令内容
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -p /tmp/ui-design-guide.zip SKILL.md
# 复制上述输出，粘贴至 Cherry Studio → 助手设置 →「系统提示词」

VS Code / GitHub Copilot

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai vscode -y

API 一键下载

curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
mkdir -p .github/skills/ui-design-guide
unzip -o /tmp/ui-design-guide.zip -d .github/skills/ui-design-guide

OpenAI Codex

AgentHub CLI（改 --ai）

curl -fsSL "https://myagenthub.cn/cli/agenthub-skill.mjs" | node - init binggg/ui-design-guide --ai codex --global -y

API 一键下载

mkdir -p ~/.codex/skills/ui-design-guide
curl -sL "https://clawhub.ai/api/v1/download?slug=ui-design-guide&version=1.18.51" -o /tmp/ui-design-guide.zip
unzip -o /tmp/ui-design-guide.zip -d ~/.codex/skills/ui-design-guide

ClawHub CLI 安装后复制

clawhub install binggg/ui-design-guide
mkdir -p ~/.codex/skills/ui-design-guide
cp -R ./skills/ui-design-guide/. ~/.codex/skills/ui-design-guide/

# 源：./skills/ui-design-guide/SKILL.md
# 目标：~/.codex/skills/ui-design-guide/SKILL.md

OpenClaw — ClawHub CLI

# OpenClaw / ClawHub CLI（推荐）
# 在项目根或 OpenClaw 工作区目录执行
clawhub install binggg/ui-design-guide

# 安装后 SKILL.md 位于：
#   ./skills/ui-design-guide/SKILL.md
# （若已配置 OpenClaw 工作区，则在 <workspace>/skills/ui-design-guide/）

# 仅查看不安装
clawhub inspect binggg/ui-design-guide

ui-design-guide Skill安装与使用教程

产品介绍

适用场景

AgentHub Verified 可用性验证技术测试通过

按平台快速复制

配置教程

安装命令

通用 — Skills CLI（推荐）

AgentHub CLI（改 --ai）

API 一键下载

Cursor

AgentHub CLI（改 --ai）

常见报错排查与运行避坑 (Troubleshooting)FAQ

免安装模拟调用 (Playground)

选型与决策建议（为什么选它？）

使用方式

相关资源

polymarket-weather-trader

Tavily Search

API Gateway

Planning with files

gitlab-cli-skills

cloudbase

常搭配使用

MarkItDown MCP Server

飞书文档

高德地图

Bilibili

继续逛 AgentHub

统一 Manifest

API 一键下载

ClawHub CLI 安装后复制

Trae（字节跳动）

AgentHub CLI（改 --ai）

API 一键下载

用户级目录

通义灵码（阿里）

AgentHub CLI（改 --ai）

API 一键下载

用户级目录

WorkBuddy / 腾讯云代码助手

AgentHub CLI（改 --ai）

API 一键下载

用户级目录

Claude Code

AgentHub CLI（改 --ai）

API 一键下载

ClawHub CLI 安装后复制

Kimi Code（月之暗面）

AgentHub CLI（改 --ai）

API 一键下载

用户级目录

通义千问（Qwen Code）

AgentHub CLI（改 --ai）

API 一键下载

用户级目录

Windsurf

AgentHub CLI（改 --ai）

API 一键下载

用户级目录

Cline

AgentHub CLI（改 --ai）

API 一键下载

Cherry Studio

VS Code / GitHub Copilot

AgentHub CLI（改 --ai）

API 一键下载

OpenAI Codex

AgentHub CLI（改 --ai）

API 一键下载

ClawHub CLI 安装后复制

OpenClaw — ClawHub CLI