picasso-dev-ui

name	picasso-dev-ui
description	Use when Picasso 需求进入 UI 设计阶段，或需要优化 PC Web、微信小程序、移动端 App 的页面结构、视觉层级、交互路径、状态设计和端适配体验。

Picasso Dev UI

定位

picasso-dev-ui 是 Picasso 项目的三端 UI companion skill 和 UI 设计路由入口。

它不负责需求拆解、服务端方案或测试验收，而是只做三件事：

1. 输出可执行的 UI 交互设计规范
2. 指导 PC / 小程序 / App 的页面实现
3. 对现有页面做二次优化和体验提升

什么时候使用

以下场景必须调用本 skill：

• picasso-dev 进入 UI 设计阶段
• 用户要求页面优化、交互更顺手、视觉更统一
• 需求涉及 PC + 小程序 + App 任一端
• 已有页面需要做视觉、布局、状态或端适配优化
• 用户提供了原型、HTML、截图、线上页面，希望输出 UI 实施规范

必须先读取

1. ../../profiles/picasso/profile.yaml
2. ../../profiles/picasso/conventions.md
3. ../../shared/references/design/README.md
4. ../../shared/templates/UI交互设计模板.md
5. ../../shared/templates/页面接口验收总表模板.md
6. 当前需求目录中的：
   • manifest.json
   • 00-需求总览.md
   • *-需求文档.md
   • *-技术方案.md（如存在）
7. 用户提供的原型、HTML、截图、线上地址

路由规则

1. 先补设计底座

默认先判断当前运行端是否可识别 ui-ux-pro-max：

• 若可识别：优先让它输出风格方向、token、组件策略、动效与可访问性基线
• 若不可识别：回退到 Picasso 包内设计底座
• 默认不得把 frontend-design 或其他通用设计 skill 当成兜底替代

无论哪种情况，最终都继续调用：

• ../picasso-dev-design-system/SKILL.md

用于明确：

• 风格方向
• token 基线
• 组件层级
• 动效与反馈
• 可访问性与响应式

2. 再按平台补专项规则

根据需求平台按需继续读取：

• PC / H5：../picasso-dev-ui-web/SKILL.md
• iOS / SwiftUI：../picasso-dev-ui-ios/SKILL.md
• Android：../picasso-dev-ui-android/SKILL.md
• 微信小程序：../picasso-dev-ui-miniapp/SKILL.md

3. 验收或回归时补审查

页面实现、截图或本地页面可见后，继续调用：

• ../picasso-dev-ui-review/SKILL.md

核心原则

1. 不输出泛化后台页面

• 不直接套默认后台样式
• 不把三端页面简单做缩放复用
• 不只写字段，不写信息层级、状态、空态和异常态

2. 三端同源，不同形

• PC：强调信息密度、查询效率、批量操作
• 小程序：强调轻量路径、安全区、微信使用习惯
• App：强调单手操作、主操作区、分段表单和返回路径

3. 先设计基线，再交互闭环，再视觉强化

输出顺序固定为：

1. 页面目标
2. 风格方向与信息层级
3. token 与组件语义
4. 核心交互路径
5. 状态、反馈与异常处理
6. 动效与可访问性要求
7. 端差异说明

默认输出

必须产出：

• *-UI交互设计规范.md

按需补充：

• *-页面接口验收总表.md

至少覆盖：

1. 页面定位与目标用户
2. 风格方向与品牌 / 气质关键词
3. 三端范围矩阵
4. 页面结构与信息层级
5. 字段与组件映射
6. 操作路径
7. 状态、空态、加载态、错误态
8. 动效与反馈规则
9. 可访问性与响应式要求
10. PC / 小程序 / App 差异说明
11. 视觉与实现约束
12. 开发注意事项
13. 验收要点

最小上下文原则

1. 不全量加载所有设计参考
2. 只加载当前终端相关的 reference
3. 如果只是 PC 页面优化，不读取 iOS / Android / 小程序专项规范
4. 如果只是 UI 审查，不重复读取服务端规则

对开发线程的要求

若本 skill 已产出 *-UI交互设计规范.md：

• PC 前端实现必须回对规范
• 小程序线程必须回对规范
• App 线程必须回对规范
• UI 验收必须以该规范核对页面体验
• 产品验收必须在 UI 验收通过后，再核对业务口径与关键交互是否一致