前言¶
PC 后台页面常见技术栈是 Umi4、React 18 与 Ant Design 5，但「能跑」和「与设计稿一致」往往是两件事：表格列宽、筛选区栅格、弹窗间距、缺省页文案，任何一处偏离都会在联调或验收时被拎出来。团队若已有成文的 UI 规范，却缺少能稳定对照规范写代码、做还原和走查的助手，审查仍主要靠人工肉眼比对截图或 Figma。
下面介绍 SkillHub 社区 Skill「审计skill-v1.1·1」（坐标 @user_acf40a6b/zifangsa，版本 1.0.1），其定位是围绕 llm-web 项目的 PC 端 UI 规范，辅助实现、还原或审查高保真页面与后台界面。
这是什么¶
「审计skill-v1.1·1」是社区来源（community）的 Agent Skill，分类为 design-media，发布者为 user_acf40a6b，页面标注作者所属为科恩实验室。Skill 采用通用 SKILL.md 格式，不需要 API Key（requires_api_key=false）。
它解决的核心问题：在已有设计输入（UI 稿、截图、Figma/PDF 参考等）的前提下，让 Agent 按既定 PC 后台规范落代码或做视觉与交互细节核对，而不是泛泛地「生成一个像后台的页面」。
核心功能¶
以下能力均来自 SkillHub 公开简介，未在资料中出现的细则不展开：
- 规范对齐：以 llm-web 项目 PC 端 UI 规范为审查与实现依据。
- 实现与还原：面向高保真页面、PC 后台、表格、表单、筛选区，以及按钮、输入框、下拉框、弹窗、抽屉、导航、标签、气泡、缺省页等常见组件。
- 审查：对照设计稿、截图或 Figma/PDF，检查布局、响应式与视觉细节是否符合规范。
- 技术栈语境：说明中明确覆盖 Umi4 / React18 / Ant Design5 场景，便于与常见中后台工程栈对齐。
英文触发说明（原文）：Use when implementing or reviewing high-fidelity PC admin UI, visual restoration, or design-spec compliance from screenshots, Figma, PDF, or design references.
安装与启用¶
SkillHub 页面提供两种常见路径：把安装提示词交给 AI，或使用 CLI / Zip。安装时须把 Skill 落到当前 Agent 能识别的 skills 目录，否则不会生效。
方式一：通过 AI 按官方文档安装¶
在对话中发送（SkillHub 页面提供的安装 prompt）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_acf40a6b/zifangsa`。
Agent 会按 SkillHub 安装说明 检查 skillhub CLI、选择安装目录并执行安装。
方式二：skillhub CLI¶
先确认 CLI 是否已安装：
command -v skillhub && skillhub --version
未安装时，可按官方文档执行完整安装或仅安装 CLI（节选）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
安装 Skill 时必须使用 --dir 指向当前环境的 skills 目录。官方文档给出的部分路径如下：
| 环境 | skills 目录（摘自官方安装文档） |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下的 .agents/skills/ |
示例（将 <skills 目录> 换成上表对应路径）：
skillhub install user_acf40a6b/zifangsa --dir <skills 目录>
也可在 SkillHub 技能页使用「下载 Zip 包安装」后，按所用 Agent 的 Skill 加载方式放入对应目录。Cursor、Codex CLI、Claude Code 的差异主要体现在 skills 目录位置；具体是否需重启或刷新 Agent，以各客户端当前文档为准，本 Skill 公开资料未单独说明。
典型用法¶
公开资料未附带逐步教程，可按下述可复现方式使用（与简介中的 when 条件一致）：
- 安装并启用 Skill 后，在任务描述中附上设计输入：Figma 链接、PDF、截图或现有页面路径。
- 实现：说明技术栈为 Umi4 + React 18 + Ant Design 5，要求按 llm-web PC 端规范实现列表页（含筛选区、表格、操作按钮）或表单页（含校验、弹窗/抽屉）。
- 审查：提供已实现代码或预览截图，要求对照设计稿检查间距、字号、组件状态（禁用、加载、空数据）及响应式断点是否符合规范。
- 还原：以设计稿为唯一视觉标准，要求逐块对齐导航、标签、气泡提示与缺省页等细节。
对话中可直接引用 Skill 坐标 @user_acf40a6b/zifangsa，便于 Agent 加载对应 SKILL.md 规则。
适用场景与注意¶
适合谁
- 维护 llm-web 或同类 PC 后台、已采用 Ant Design 5 的团队。
- 需要从截图/Figma/PDF 做视觉还原或上线前 UI 合规走查的前端与全栈开发者。
限制与注意
- 规范绑定在 llm-web PC 端 UI 规范；若项目规范不同，需自行判断是否仍适用，或仅在审查清单上做裁剪。
- Skill 聚焦 PC 后台与高保真还原，公开简介未承诺移动端或其它设计体系。
- SkillHub 页面显示科恩实验室、云鼎实验室安全扫描为「安全，无风险」；Skill 仍为社区来源，安装前可在技能页查看报告与版本历史（当前展示 v1.0.1，约五个月前更新）。
- 统计信息以 SkillHub 为准：约 1.4 千次下载（抓取元数据为 1394 次下载），评分字段在元数据中为 100000；安装次数在元数据中记录为 0，可能与统计口径有关，不作能力背书。
结尾¶
「审计skill-v1.1·1」把 llm-web PC 端 UI 规范写进 Agent Skill，适合在实现、还原与审查 Ant Design 后台界面时作为固定对照系。需要安装或查看概述时，可使用官方入口：
- API / 包地址：https://api.skillhub.cn/user_acf40a6b/zifangsa
- SkillHub 技能页：https://www.skillhub.cn/skills/user_acf40a6b/zifangsa
