前言¶
在 Cursor、Claude Code 等 Agent 里写界面，常见情况是：功能逻辑能跑通，但布局、间距、组件层次和整体观感偏离产品预期；或者已有页面能工作，却缺少统一的设计语言。纯靠通用对话提示，模型不一定会在「该写 UI 代码」时稳定进入设计模式，审美取向也不一致。
下面介绍 SkillHub 社区技能 UI设计Skill（坐标 @user_865e3592/ui-new）。它把「何时触发 UI 设计任务」和「参照哪些设计规范输出代码」写进 Skill 说明，让 Agent 在用户提出界面相关需求时优先走专业 UI 生成或优化路径。
这是什么¶
UI设计Skill 是 SkillHub 上分类为 design-media 的社区技能，发布者为 user_865e3592，当前版本 1.0.0。官方页面：SkillHub - UI设计Skill；API 元数据地址：https://api.skillhub.cn/user_865e3592/ui-new。
一句话定位：专业 UI 生成与现有界面优化。当对话涉及生成界面、改页面、做组件库或设计系统时，Agent 应加载该 Skill，并参考 Google Material Design、Apple Human Interface Guidelines（HIG）以及 Skill 描述中的「Pinterest 级别审美」取向，输出偏大气、简约、高级美学的 UI 代码。
标签 requires_api_key=false，表示按 SkillHub 元数据 不需要额外 API Key 即可使用。
核心功能¶
以下能力均来自 SkillHub 官方简介，未在资料中出现的细节不作延伸。
- 从零生成 UI：Web 界面、App 界面、Dashboard、Landing Page 等视觉与交互相关的页面与组件代码。
- 优化已有界面：在用户已有代码或布局基础上做视觉与交互层面的改进。
- 组件库与设计系统：创建或整理组件库、设计系统相关结构与样式约定。
- 触发范围较宽：除明确的设计需求外，口语化请求（如「帮我做个界面」「优化一下 UI」「设计一个页面」）也应在 Skill 规则下触发，避免 Agent 只改逻辑、不动界面。
安装与启用¶
SkillHub 推荐两种方式：向 Agent 发送安装提示词，或使用 skillhub CLI。安装前需确认 CLI 是否可用：
command -v skillhub && skillhub --version
若未安装，可按 SkillHub 安装文档 执行完整安装（示例）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
通过提示词安装（SkillHub 页面原文）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_865e3592/ui-new`。
通过 CLI 安装时，必须用 --dir 指向当前 Agent 识别的 skills 目录，否则默认会装到 ./skills/，Agent 可能无法加载。通用命令形式：
skillhub install user_865e3592/ui-new --dir <skills 目录>
常见客户端 skills 路径（摘自 SkillHub 安装文档）：
| 环境 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
安装后若 Agent 未立即识别新 Skill，按所用客户端说明重启或刷新 skills 配置。本 Skill 无需 配置 API Key。
典型用法¶
Skill 正文侧重 触发条件与设计取向，而非固定 CLI 子命令。可复现的用法是：在已安装 Skill 的 Agent 会话中，用自然语言描述界面目标；Agent 加载 @user_865e3592/ui-new 后按 Skill 要求输出 UI 代码。
示例请求（与官方简介中的触发场景一致）：
- 「为 SaaS 产品做一个 Dashboard，包含侧边栏、顶栏和三个数据卡片。」
- 「这是现有 Landing Page 的 React 代码，请优化排版和视觉层次，风格参考 Material Design。」
- 「帮我设计一套按钮、输入框、卡片的组件库，并给出 Tailwind 或 CSS 变量约定。」
- 「帮我做个界面」——在 Skill 规则下也应进入 UI 设计流程，而不是仅返回文字说明。
经过上面的步骤，Agent 应在生成或修改代码时对齐 Material Design、Apple HIG 及 Skill 声明的高级简约审美，而不是随意堆叠样式。
适用场景与注意¶
适合谁
- 需要在 Agent 里快速出 可运行 UI 代码 的前端、全栈或独立开发者。
- 希望 统一触发规则：只要话题落在界面、页面、组件库、设计系统上，就自动走 UI Skill，而不是依赖每次手动写长提示词。
- 不想为 UI Skill 单独申请第三方 API Key 的团队（
requires_api_key=false）。
限制与注意
- 输出质量仍取决于底层模型、项目栈（React/Vue/原生等）以及你提供的上下文；Skill 提供的是 规范与触发策略，不能替代设计评审与无障碍、性能等工程检查。
- 安装路径错误是常见坑：务必使用
--dir指向对应 Agent 的 skills 目录。 - SkillHub 页面展示的下载、评分等统计会随时间变化；撰写时以社区页与元数据为准。预抓取元数据示例：分类
design-media，评分 100000，下载 55193，安装 241（以你访问 SkillHub 时的页面为准）。
结尾¶
UI设计Skill 把 UI 生成、界面优化、组件库与设计系统等工作收敛到同一套 Agent Skill：明确触发话术、对齐 Material Design 与 Apple HIG，并强调高级简约的视觉输出。若你经常在编码 Agent 里做页面却得不到稳定的设计向结果，可以从 SkillHub 安装 @user_865e3592/ui-new 试一轮。
