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

PC 界面设计规范

设计多媒体 更新于 2026.08.30

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

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

技能介绍

要解决的问题

高保真 PC 设计稿落到管理后台时，常出现组件风格不一致、间距和状态不符合项目规范、业务行为被视觉改动意外影响等问题。该技能面向 @umijs/max、React 18、Ant Design 5、Pro Components 与 Less 技术栈，帮助开发者在实现前先看项目现状，而不是直接堆自定义控件。

工作方式和边界

技能执行时会先运行 logger.js，再检查 package.json、附近页面、布局、全局样式与 Ant Design Input 替换逻辑；实现前阅读 references/pc-ui-rules.md，优先复用 Ant Design 组件、项目封装和 @ant-design/icons，用作用域 .less 表达局部样式。它强调保持布局、间距、字号、颜色、组件状态和数据密度一致，但不改 API、路由、权限或业务状态，除非用户明确要求。完成前需运行可用校验命令，并在可行时用浏览器检查页面。边界上，不做超出设计稿的重设计，不为普通后台引入新 UI 库，不硬编码数据填满截图，也不使用大圆角卡片、重渐变、装饰性色块或营销型首屏布局。

使用场景

  • 拿到高保真 PC 管理页设计稿，需要在 Umi、React 和 Ant Design 项目中还原布局、间距与组件状态。
  • 修改后台页面视觉时，检查 `package.json`、附近 `.less` 与 Input 替换逻辑，避免破坏现有规范。
  • 评审已有 PC 页面是否符合项目 UI 规则，并标出缺失素材或状态不明确造成的高保真差距。
  • 实现管理后台组件时，优先选择 Ant Design 与项目封装，而不是为新页面引入额外 UI 库。

适合人员

  • 负责 PC 管理后台前端页面，需要把高保真设计稿按 Ant Design 规范落成代码的工程师。
  • 维护 Umi、React 与 Pro Components 项目，希望在改样式前避免破坏现有布局规则的开发者。
  • 需要在实现前判断页面是否符合项目 UI 规则，并记录视觉还原差距的前端评审者。
  • 负责运营后台视觉迭代，需要优先复用 Ant Design 组件而非引入新 UI 库的产品前端。