前言¶
页面已经能跑通，但颜色、字号、间距和组件样式常常对不齐：改一处牵一片，设计稿和实现之间也缺少统一的检查清单。靠肉眼逐屏比对费时，单靠通用对话又容易漏掉「一致性」和「规范」这类结构化问题。
下面介绍 SkillHub 社区 Skill frontend-design-expert（坐标 @user_7fecb76a/frontend-design-expert）。它把审查重点放在页面统一性、美观性评估和设计优化建议上，适合在已有界面材料的前提下，让 Agent 按 Skill 里的流程做设计向的检视，而不是替代你写业务逻辑或部署。
这是什么¶
frontend-design-expert 是 SkillHub 上的社区 Skill（design-media 分类），当前版本 1.0.2，由发布者 user_7fecb76a 维护。官方简介将其定位为「前端页面设计专家」：提供页面统一性审查、美观性评估和设计优化建议；适用于页面设计审查、样式一致性检查、视觉优化、设计规范制定。
在 SkillHub 页面可见：评分 100000，下载 1435 次；元数据标签 requires_api_key=false，安装后无需额外配置 API Key。
- 官方 API 入口：https://api.skillhub.cn/user_7fecb76a/frontend-design-expert
- SkillHub 展示页：https://www.skillhub.cn/skills/user_7fecb76a/frontend-design-expert
核心功能¶
以下能力均来自官方简介与 SkillHub 页面描述，不展开未在资料中出现的细则：
- 页面统一性审查：检查视觉与样式是否在页面内保持一致（如组件形态、间距节奏、色彩与字体使用是否协调）。
- 美观性评估：从设计质量角度给出观感与层次方面的评价方向。
- 设计优化建议：在审查基础上提出可落地的改进建议（官方表述为「设计优化建议」，具体输出格式以安装后的
SKILL.md为准）。 - 设计规范制定：在需要沉淀团队规则时，可借助 Skill 引导规范条目与检查维度。
Skill 在 Agent 符合触发条件时自动参与对话；你无需单独调用 HTTP 接口。
安装与启用¶
SkillHub 提供两种常见方式：用 CLI 安装到当前 Agent 的 skills 目录，或把官方提示词发给 AI 由其按安装文档操作。
1. 安装 SkillHub CLI（若尚未安装）¶
先确认本机是否已有 skillhub：
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
2. 安装 frontend-design-expert¶
安装技能时必须用 --dir 指向当前 Agent 实际读取的 skills 目录，否则默认会装到 ./skills/，Agent 可能识别不到。
skillhub install @user_7fecb76a/frontend-design-expert --dir <skills 目录>
常用客户端路径（摘自 SkillHub 安装文档，以你本机环境为准）：
| 客户端 | skills 目录示例 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
安装完成后，按你所用客户端的要求重启或刷新 Agent，使新 Skill 被加载。
3. 通过对话让 AI 安装¶
SkillHub 页面给出的可复制提示词为：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_7fecb76a/frontend-design-expert`。
将上述内容发给支持 Skill 的 Agent，并确保安装目录指向当前环境的 skills 路径。
典型用法¶
官方资料未提供单独的「审查样例仓库」；可复现的流程如下。
- 按上一节完成安装，确认 Agent 已加载
@user_7fecb76a/frontend-design-expert。 - 在对话中说明目标：例如「审查当前页面的样式一致性」「评估视觉层次并给优化建议」「帮忙整理一版设计检查清单」——与官方列出的适用方向一致即可。
- 附上 Agent 能处理的材料：页面截图、相关 HTML/CSS 片段，或设计稿说明（具体支持形式以 Skill 内
SKILL.md的read_when/ 说明为准）。 - 根据 Skill 输出的审查项与建议，在本地改样式或更新设计规范文档。
若需确认 Skill 的触发语句与输出结构，安装后在 skills 目录下打开该 Skill 的 SKILL.md 阅读即可。
适用场景与注意¶
适合谁
- 前端或全栈开发者在联调 UI 时，需要结构化地查颜色、字体、间距、组件一致性。
- 需要在发版前做一轮「设计向」自检，或起草团队设计规范检查项的同学。
使用上注意
- 资料将其归类为 design-media，定位是设计审查与建议，官方简介未涵盖后端逻辑、性能调优、SEO 等主题；这类需求应选用其他 Skill 或工具链。
- SkillHub 统计中的「安装」次数可能与各客户端本地目录安装方式不一致；以你本机 skills 目录是否出现该 Skill 为准。
- 版本以 SkillHub 页面标注的 v1.0.2 为准；升级可用
skillhub对应更新命令（参见 https://skillhub.cn/install/skillhub.md 第三节）。
结尾¶
frontend-design-expert 把「页面统一性、美观性、优化与规范」收敛成可安装的 Agent Skill，适合在已有界面上下文里做设计审查。安装与坐标以 SkillHub 为准：
- https://www.skillhub.cn/skills/user_7fecb76a/frontend-design-expert
- https://api.skillhub.cn/user_7fecb76a/frontend-design-expert
