前言¶
在 PC 管理后台或企业级 Web 系统开发中，高保真设计稿往往与代码实现存在偏差：组件样式不一致、响应式布局错位、Ant Design 版本差异导致视觉细节偏差等。人工逐项对照设计稿排查耗时且容易遗漏。下面介绍审计skill-v1.1，用于从设计稿到实现的 UI 审查与还原。
是什么¶
审计skill-v1.1 是一个基于 llm-web 项目的 PC 端 UI 规范进行 UI 审查和还原的 Skill。它由社区开发者 @user_acf40a6b 维护，归类为 dev-programming，可以对照设计稿（截图、Figma、PDF）、检查已实现页面的样式与布局是否符合规范，并辅助实现符合规范的 UI 组件。
核心功能¶
- 按照指定规范审查高保真 PC 端页面：检查实现是否与 llm-web PC 端 UI 规范一致
- 输出审查点与差异建议：指出样式、布局、组件细节上的偏差
- 辅助实现符合规范的 UI：生成或优化 PC 端页面代码，覆盖常见组件与场景
- 支持多设计来源：截图、Figma 设计稿、PDF 设计参考、设计稿截图等
- 覆盖组件类型：表格、表单、筛选区、按钮、输入框、下拉框、弹窗、抽屉、导航、标签、气泡、缺省页等
- 框架与规范适配：Umi4、React 18、Ant Design 5 等技术栈的 UI 审查与还原
- 响应式与视觉细节检查：检查布局是否响应式、视觉细节（间距、颜色、字体）是否对齐规范
安装与启用¶
SkillHub 地址：https://api.skillhub.cn/user_acf40a6b/asdadsadasdasd
在支持 SkillHub 的环境中，可通过官方地址安装此 Skill，启用后即可在设计稿或代码页面中调用。
典型用法¶
- 在代码仓库中打开一个 PC 管理后台页面，让审计skill-v1.1 按规范审查当前页面，获取差异列表与优化建议
- 将 Figma 设计稿或设计稿截图上传给审计skill-v1.1，让其在已有代码基础上补充或修正组件，使其符合 llm-web PC 端 UI 规范
- 针对某个组件（如表单、表格、弹窗）单独审查，要求审计skill-v1.1 对照规范检查其样式与交互细节
适用场景与注意¶
- 适合需要严格遵循 llm-web PC 端 UI 规范的 PC 管理后台、企业级 Web 系统
- 可用于设计稿到代码的还原验收，也可用于已有代码的 UI 审查
- 需注意：规范本身由 llm-web 项目定义，使用前应确认当前项目使用的规范版本是否一致
结尾¶
审计skill-v1.1 可作为 UI 审查与还原的辅助工具，帮助在开发流程中减少视觉偏差，提升实现与设计的一致性。官方地址：https://api.skillhub.cn/user_acf40a6b/asdadsadasdasd
