Salin Product Ui Builder

---
name: salin-product-ui-builder
description: 设计、结构性重构或实现普通产品界面，包括 Web/App/小程序、SaaS 功能页、AI 工具、登录注册、表单、设置、工作台、官网与营销页。负责从用户任务、信息架构、视觉方向、design tokens、组件与适用状态落到真实前端。数据监控型 Dashboard 与交互图表改用 salin-dashboard-builder；页面目标已定且只处理 shadcn 工程时改用 salin-shadcn-ui；功能已完成后的只读审查、上线精修或韧性加固改用 salin-ui-quality-audit。
---

# Salin Product UI Builder

把界面当成用户完成任务的系统，而不是一组“好看的卡片”。先理解产品、用户和主操作，再选择一个清晰视觉方向并在现有项目中完整实现。

## 任务路由

| 用户目标 | 必读参考 |
|---|---|
| 从零设计普通产品页面 | [references/product-surfaces.md](references/product-surfaces.md) + [references/visual-directions.md](references/visual-directions.md) |
| 改造“不好看、太乱、像模板”的已有页面 | [references/redesign-playbook.md](references/redesign-playbook.md) + [references/visual-directions.md](references/visual-directions.md) |
| 登录、注册、验证码、移动端表单 | [references/product-surfaces.md](references/product-surfaces.md) + [references/engineering-quality.md](references/engineering-quality.md) |
| 在已有代码库中实现 | 先检查项目，再读 [references/engineering-quality.md](references/engineering-quality.md) |
| 完成前验收 | [references/qa-checklist.md](references/qa-checklist.md) |

同时命中多行时合并读取：实现任务仍需读取对应页面类型或改造参考，并在完成前读取 QA 清单。

边界按任务目的判断：数据监控、指标诊断、图表联动或独立导航侧栏交给 `salin-dashboard-builder`；历史记录、筛选面板、详情分栏等普通页面局部侧区仍由当前 skill 负责。页面目标、主流程或信息架构尚未确定时当前 skill 主责；页面已经确定且只涉及 shadcn CLI、组件源码、主题、variants 或底层交互行为时交给 `salin-shadcn-ui`。新建页面或改变主流程/结构由当前 skill 主责；功能已完成后的证据式审查、上线精修和极端条件加固交给 `salin-ui-quality-audit`。若项目同时满足多个条件，当前 skill 负责产品目标和页面结构，专项 skill 只负责明确模块。

## 核心流程

1. **确认目标**：明确页面用户、设备、主任务、主操作、业务约束和可观察的验收标准。非关键缺失可以标明假设后继续。
2. **检查现状**：已有项目先读 README、AGENTS/CLAUDE、依赖、路由、组件、样式、tokens、环境变量示例和 Git 状态；保留用户未提交修改。
3. **写设计读法**：用一句话说明“这是为谁、解决什么任务、采用什么视觉语言、主操作是什么”。
4. **组织体验**：先定信息架构、任务顺序、渐进披露和错误恢复，再画视觉层级。工具型产品优先操作效率，营销页面优先价值主张与转化。
5. **只选一个主方向**：从视觉参考中选择一个方向；新设计或用户允许重塑视觉时，再加入一个与产品内容有关的记忆点。不要混合三四种风格。
6. **建立系统契约**：定义语义色、字体角色、间距、圆角、阴影、密度、图标、动效和响应式规则。优先复用项目已有体系。
7. **实现真实界面**：沿用现有技术栈和组件；实现主流程以及任务适用的 loading、empty、error、disabled、success、权限、长内容和移动端状态，不虚构业务不存在的状态。
8. **真实验收**：运行项目已有格式化、lint、类型、测试或构建，并在浏览器中走关键流程；无法验证的项目明确说明。

## 设计原则

- 交互优先级是：完成任务、理解状态、识别层级、感受风格。
- SaaS、CRM、工作台和表单不使用营销页式大 Hero 挤压操作空间。
- 官网和品牌页可以更有表达，但首屏必须直接说明主体、价值和下一步。
- 结构负责层级，颜色负责状态；不要用十几张相同卡片代替信息架构。
- 一个页面使用一套中性色、一个主强调色、一套圆角逻辑、一套图标语言。
- 文案具体、主动、可操作；按钮优先“动词 + 对象”，避免“赋能、开启无限可能”等空话。
- 不默认使用紫蓝渐变、装饰光斑、泛滥玻璃、超大圆角、漂浮卡片或无意义动画。
- 触摸目标、键盘焦点、对比度、减少动画和语义 HTML 是基础，不是最后补丁。
- 用户要求实现时必须修改真实项目并验证，不能用伪代码、静态截图或概念稿替代。

## 输出契约

复杂设计任务先给一个短方案，然后继续执行：

```markdown
## UI 执行方案
- 设计读法：产品 / 用户 / 主任务 / 主操作
- 页面结构：入口 / 核心内容 / 次级内容 / 行动与反馈
- 视觉方向：主方向 / 记忆点 / 明确禁用套路
- 系统契约：颜色 / 字体 / 间距 / 圆角 / 密度 / 动效
- 完整状态：加载 / 空 / 错误 / 权限 / 极端内容 / 移动端
- 实现范围：修改内容 / 保持不动 / 验收标准
```

实现任务完成后汇报关键文件、验证结果、未验证内容和残余风险。只做设计建议时，不擅自扩张到数据库、接口或无关页面。

## 完成前检查

- 首屏能否说明当前页面、关键状态和下一步操作。
- 主操作是否明显，次级操作是否降权，危险操作是否有恢复或确认。
- 视觉方向是否由产品内容推导，而不是套热门模板。
- 是否复用已有组件、tokens、路由和交互惯例。
- 是否覆盖键盘、触摸、移动端、长文本、空、错、加载和权限状态。
- 是否检查真实界面，而不只依赖代码编译。