界面截图视觉偏差与质量校验
将以下提示词粘贴到你的 AI 对话框中:
请根据 https://skillhub.cn/install/skillhub.md,安装 @user_fccf428b/china-design-ui-visual-validator。
技能介绍
要解决的问题
界面截图常被直接放进营销页、商品详情、官网和演示稿,但截图里的文字层级、按钮状态、图表网格、品牌色、间距、裁切和响应式表现,往往没有经过系统校验。这些问题不只是“看起来不舒服”,还可能造成信息误读、品牌不一致、合规风险和返工。界面截图视觉偏差与质量校验 把这个环节拆成可检查的工作流,而不是只给一句审美建议。
核心能力与关键步骤
这个 Skill 面向品牌、电商与产品设计团队,覆盖营销素材、商品视觉、网页、界面、图表和演示设计中的截图校验。开始前会先确认设计目标、受众、渠道、尺寸、品牌规范、文案、数据、素材、交付格式和技术约束;信息不足时列出缺口和影响,不会替用户补写价格、时间、案例、资质、平台规则、经营结果或外部发布内容。
执行流程包括:
- 明确业务目标、使用对象、成功标准和停止条件
- 整理与截图视觉偏差、质量校验相关的事实、数据、素材和约束
- 将任务拆成可检查模块,确定优先级、负责人和依赖
- 在原能力边界内执行视觉校验,重点关注 UI 测试、设计系统一致性和可访问性验证
- 生成设计规范与制作包,并列出事实依据、风险、缺口和人工确认项
- 按目标、事实、可执行性、合规和交付完整性做发布前复核
交付物与质量门槛
交付物包括目标与范围卡、执行步骤或模板、设计规范与制作包,以及事实证据、风险、缺失信息和人工确认清单。输出会区分事实、推断、建议和待确认信息,每条建议都需要落到负责人、动作、时间或检查标准。若硬门槛不满足,会输出 暂不可交付,并说明需要补充的信息、责任人和下一步动作。
适用边界
不使用无授权图片、字体、肖像、商标或竞品素材,不把本地文档或建议冒充已执行的平台操作,不读取或输出密钥、Token、密码和无关个人信息。涉及真实发送、发布、付费、删除、权限或生产变更时,必须由用户明确授权。
使用场景
- 品牌团队完成官网落地页后,对营销素材中的界面截图进行文字层级、间距与品牌色校验,确保截图呈现与品牌规范一致
- 电商团队准备商品详情页时,检查界面截图中按钮状态、图表网格与文案对齐,避免因视觉偏差导致用户误解商品信息
- 产品设计团队输出演示文档前,校验界面截图在投影和移动端的显示效果,确认字体层级、对比度与可读性符合要求
- 市场团队制作活动海报时,核对界面截图中的数据标签、品牌标识位置,确保截图在海报中不出现拉伸或裁切错误
适合人员
- 品牌设计师,需要确保营销素材中的界面截图符合品牌视觉规范,避免因视觉偏差影响品牌形象
- 电商视觉设计师,需要校验商品页界面截图的按钮、图表与文案呈现,减少用户因视觉误解产生的咨询和退单
- 产品经理,需要检查演示文档中的界面截图质量,确保截图能准确传达产品功能和交互逻辑
- 设计团队负责人,需要把控团队输出的界面截图质量,建立可复用的截图校验流程和标准