前言¶
页面能跑、功能也齐，但总觉得「看着怪」——间距不对、层次发虚、配色打架，又说不清是 UI 还是品牌表达的问题。自己翻设计规范成本高，让通用大模型给建议又容易泛泛而谈。下面介绍 SkillHub 上的社区 Skill「设计大师」，把 UI/UX、网页评价、美学与 VI、设计系统管理写进 Agent 的固定工作流，并在对话里用关键词自动唤起。
这是什么¶
「设计大师」（坐标 @user_ad872d55/design-master）是 SkillHub 分类 design-media 下的社区 Skill，当前版本 v2.2.0，由发布者 user_ad872d55 维护。官方简介定位为「央美博导·设计大师」，能力范围包括：UI/UX、网页设计评价标准、美学、VI、设计系统管理，并强调能诊断「页面看着怪」的根因。标签 requires_api_key=false，表示按 SkillHub 页面说明无需额外 API Key 即可使用。
核心功能¶
以下能力均来自 SkillHub 页面与已抓取元数据，不展开未在官方文案中出现的具体方法论或案例。
UI/UX 与网页评价
在涉及界面结构、交互与网页呈现时，Skill 会按内置的网页设计评价标准给出可操作的判断，而不是只给形容词。
美学与品牌 VI
覆盖配色、品牌调性与视觉识别相关讨论，适合在定稿前对齐「像不像自家品牌」这类问题。
设计系统管理
支持围绕设计系统、组件与主题一致性的对话，便于在多页面或多端迭代时保持同一套规则。
「页面看着怪」诊断
官方明确列出可诊断「页面看着怪」根因；适合把截图、URL 或组件描述交给 Agent，并要求按 Skill 流程做结构化点评。
触发词
在对话中出现下列主题时，Agent 应优先加载该 Skill：设计、品牌、UI、UX、配色、设计系统、诊断网页、网页评价、页面看着怪。
安装与启用¶
SkillHub 提供两种常见方式：把安装提示词发给当前 AI，或使用 skillhub CLI 安装到本机 Agent 的 skills 目录。
方式一：提示词安装（官方页面推荐）¶
将下面这句话发给支持 Skill 的 Agent（如 Cursor、Claude Code 等），并让其按 SkillHub 安装文档执行：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_ad872d55/design-master`。
方式二：SkillHub CLI¶
先确认是否已安装 CLI：
command -v skillhub && skillhub --version
若未安装，可按 SkillHub 文档执行完整安装（含 CLI 与默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安装本 Skill 时，必须用 --dir 指向当前 Agent 实际使用的 skills 目录；否则默认会装到 ./skills/，Agent 可能无法识别。SkillHub 文档给出的常用路径如下：
| 环境 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
示例（将 <skills 目录> 换成上表对应路径）：
skillhub install @user_ad872d55/design-master --dir <skills 目录>
SkillHub 页面还支持下载 Zip 包安装到本地 Agent；具体步骤以页面「下载 Zip 包安装」入口为准。安装或更新后，若 Agent 未自动加载新 Skill，按所用客户端说明重启或刷新会话。
典型用法¶
官方未在公开页面粘贴完整 SKILL.md 正文，下列用法均基于简介与触发词，可在本地复现。
1、网页观感诊断
输入中包含「页面看着怪」或「诊断网页」，并附上页面说明、关键模块列表或截图描述，要求列出可能根因（层次、对比、对齐、组件用法等）与修改优先级。
2、配色与品牌
对话里提到「配色」或「品牌」，说明行业、受众与现有主色，让 Agent 在 VI 约束下给出配色调整或禁忌说明。
3、设计系统与组件
触发「设计系统」或「UI」，描述现有 Token、组件库或主题切换需求，请 Agent 检查跨页面是否一致、哪些规则应写入设计系统文档。
4、UX 评审
使用「UX」或「网页评价」，给出用户任务路径（例如注册、下单），要求按网页设计评价标准做走查式反馈。
适用场景与注意¶
适合谁
前端与全栈在改版、落地页或后台 UI 时需要第二意见；产品与设计同学希望把评价标准固化到 Agent 对话里；需要在同一仓库里反复讨论 VI 与设计系统一致性的小团队。
限制
Skill 输出依赖你提供的上下文质量；未提供设计稿、规范链接或具体页面信息时，结论会偏泛。社区来源（community）的技能以 SkillHub 页面版本与更新说明为准，升级前可在 SkillHub 查看版本历史。
数据参考
SkillHub 抓取元数据显示评分 100000；页面展示约 2.3 万次下载（与抓取中的下载计数可能因统计口径不同而不完全一致，以 SkillHub 页面实时数据为准）。
结尾¶
「设计大师」把 UI/UX、网页评价、美学、VI 与设计系统管理收敛为一个可安装的 Agent Skill，并用明确触发词覆盖日常设计相关对话。若要在 Cursor 等环境中启用，优先按官方安装文档安装 @user_ad872d55/design-master。
- SkillHub 页面：https://www.skillhub.cn/skills/user_ad872d55/design-master
- API 坐标页：https://api.skillhub.cn/user_ad872d55/design-master
- 安装说明：https://skillhub.cn/install/skillhub.md
