Agent Skills
返回列表
PC 界面设计规格

PC 界面设计规格

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_acf40a6b/asdadsadasdasd。

技能介绍

解决的问题

当高保真 PC 稿进入既有后台项目时，常见风险不是“画得不准”，而是实现方式跑偏：自定义控件过多、样式脱离现有 token、输入框行为被项目插件替换、视觉还原时顺手改了路由或服务。

工作方式

  • 先检查项目约束：读取 package.json 与附近 src/pages、src/components、global.less，确认 @umijs/max、React 18、Ant Design 5、Pro Components、Less 的现有规则。
  • 优先复用项目原语：把设计翻译成 Ant Design 组件、项目封装和 @ant-design/icons，只在多页面重复出现时才沉淀共享 token。
  • 保持视觉与行为分离：对齐布局、间距、字号、颜色、组件状态与数据密度，但不擅自改变 API、权限、业务状态或路由。
  • 收尾验证：运行最小相关 format、build、类型检查；可行时本地起服务并在浏览器查看页面，同时说明已匹配的界面和因缺资源、状态不清造成的高保真缺口。

适用边界

该技能适合运维/管理后台的视觉还原与 UI 规范审查，不适合作为产品重设计工具。不要为普通后台引入新 UI 库，不要为了截图饱满而硬编码数据，也不要使用过大圆角、重渐变、装饰性色块或营销 hero 布局；涉及无关页面、路由、服务、模型或审计/日志行为时应保持不动。

使用场景

  • 拿到高保真 PC 后台稿后，用 Ant Design 5 和现有 Less 规则实现页面样式。
  • 审查既有管理页是否偏离项目间距、字号、颜色与 Ant Design 组件状态。
  • 在已有 Umi、React 18 项目中修复 Input 行为与自定义输入封装冲突。
  • 上线前检查视觉还原是否误改路由、权限、API 或无关业务状态。

适合人员

  • 维护 Umi + Ant Design 5 后台的前端工程师，希望按现有项目原语还原 PC 设计稿。
  • 负责管理端视觉验收的工程师，需要对照间距、字号、组件状态检查页面偏差。
  • 接手旧后台页面的前端开发，避免自定义控件过多和样式脱离现有 token。
  • 需要限制改动范围的产品实现工程师，只想改视觉壳而不碰 API、路由和权限。