# UI Sift

> 设计、实现、评审或打磨简洁且交互精致的前端页面与组件。提供项目画像、视觉判断、精选组件检索、官方 skills/MCP 与源码发现、多库集成和证据验收。适用于新页面、后台、AI 对话、文档工作台、参考还原和局部 UI 改善；纯后端、仅修复业务逻辑或机械改字时不使用。

- Skill: `ciao1019/ui-sift` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add ciao1019/ui-sift`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ciao1019/ui-sift/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: Ciao1019 (https://skillmd.com/u/ciao1019)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ciao1019/ui-sift

---


# UI Sift

让界面安静、清楚、顺手，在关键操作上有恰到好处的反馈。精选资源是候选素材库；最终交付应具有统一的产品语言。

面向不同开发者与工程使用，不预设目录结构、包管理器、路由、图标或 UI 基座。新项目按产品需要建立体系，已有项目优先适配其实际约束。

## 按任务展开，而不是一次读完

先判断工作范围，选择下面的路径。沿用用户已有授权，常规设计与选型不添加审批节点。用户只要评审时不自动改代码。

| 任务 | 工作路径 | 按需读取 |
| --- | --- | --- |
| 局部修饰、单个组件 / 状态 | 找到原实现 → 保留约束 → 修改 → 定向验证 | 本文件；必要时读交互配方 |
| 新页面、明显重构 | 简报 → 视觉方向 → 选型 → 真实主流程 → 打磨 → 验证 | [工作流](references/workflows.md)、[视觉语言](references/visual-language.md) |
| 多页面、多库工作台 | 上述路径 + 共享能力归属 + 页面间状态连续性 | [组件契约](references/component-contracts.md)、[集成模式](references/integration-patterns.md) |
| 参考还原 | 拆结构 / 排版 / 密度 → 实现 → 同视口比较 → 修正差异 | [视觉语言](references/visual-language.md)、[布局与内容](references/layout-content.md) |
| UI 评审 | 实际主流程 → 记录影响最大的具体问题 → 在请求范围内交付 | [质量评审](references/quality-review.md) |

阶段完成凭可观察结果判断：约束可解释、主流程能完成、状态反馈真实、相关验证有证据。跨轮次任务可保存 [设计简报](templates/design-brief.md)；小任务不必生成文档。用户改变方向时更新受影响判断，保留仍适用的接线与验证。

## 先理解正在做什么

阅读项目约定、依赖、路由、主题 tokens 和目标页面的调用链。确认框架、版本、包管理器、基础组件、图标、动效运行时，以及需要保留的交互和数据接口。存在 `components.json` 时，检查 aliases、style、base library 和 registries。

先搜索本地已有组件与实际调用；“目录里有文件”“已接入业务”“只有演示”是不同证据。不要为视觉调整迁移框架、替换整套设计系统或顺手重构业务。

工程较大时可运行只读 `scripts/profile_project.py`。先选目标 package，monorepo 合并结果不能代替目标框架判断。扫描输出只是线索，继续读目标文件与调用链。

用几句话确定本次设计：**谁在使用 → 最重要的任务 → 信息层级 → 一个值得打磨的交互**。从上下文能判断的细节直接决定；只询问会改变实现方向的缺失信息，同时继续独立工作。

用户已有品牌、布局或参考图时，以它们为准。没有视觉基线时，选择符合产品内容的中性色层次、清晰排版和少量强调色；简洁可以温暖，也可以严谨，不绑定某套字体或黑白模板。

新页面先决定工作方式、信息密度、表现强度、动效强度。选一个能改善任务的细节：保留滚动位置、错误后恢复、触摸可达、工具结果可追溯等。具体判断读 [视觉语言](references/visual-language.md)，不要把“简洁”简化为删掉必要信息。

## 按任务挑组件

先选择一个主方案，再补足确实缺失的专项能力。小改动可以完全使用现有组件；新页面通常只需检查一至三个相关来源，无须遍历整个清单。

| 当前需要 | 优先查看 | 选择边界 |
| --- | --- | --- |
| AI 工具结果、选择与确认 | Tool UI | 数据 schema 与用户操作回执要接通 |
| 完整 AI 对话、流式消息、高亮 | assistant-ui；轻量界面可看 prompt-kit | 沿用已有 runtime 和 Markdown 管线 |
| 只读 Markdown、数学、引用 | Lobe UI Markdown | 不为只读文本引入编辑器 |
| 富文本编辑、批注、块操作 | Plate | 只加载需要的插件 |
| 文档预览、抽取校验、审核 | Extend UI | 普通上传不需要整套工作台 |
| 文件树、复杂应用组件 | Kibo UI、UI TripleD、Astryx | 比较能力、键盘交互和主题集成成本 |
| 思维导图 | mindmapcn | 静态层级图可沿用已有图表能力 |
| 选日期或日期范围 | 现有 Calendar / shadcn/ui | 真正日程管理才考虑 DayFlow |
| 多视图日程、拖拽排程 | DayFlow | 确认框架适配及 Core / Pro 边界 |
| 手写签名 | Cuicui Signature；文档流程可看 Extend | 需要触摸输入、清除与确认状态 |
| 克制的微交互 | moumenlab、GodUI、UI TripleD | 选能解释状态变化的效果 |
| 局部等待或活动强调 | Libraries.dev Beam / Orbs | 按真实任务状态启停 |
| 营销区块与应用布局 | Ruixen、Shadcn Studio；Variant 找方向 | 只取符合页面叙事的区块 |
| Vue / Nuxt 动效 | nxui | 不把 Vue 源码当成 React 组件 |
| Go templ 界面 | shadcn-templ | 它不是 React 的 shadcn/ui |
| 动态图标 | 现有图标体系；Heroicons Animated | 项目已有其他体系时保持一致 |

候选组件、来源与取舍见 [资源目录](references/catalog.md)。只有对应场景才读取相关条目。目录列出的“值得探索”是编辑建议，不等于已在用户项目验证。

## 用工具缩小候选范围

包内有 22 个来源、69 组组件候选、30 类需求意图。检索脚本先过滤框架和动效，再根据需求与已声明依赖排序。候选名称不是 npm export / registry ID，排序值不是审美评分。最终采用前按 [组件契约](references/component-contracts.md) 核对版本、基础库、业务能力、许可与范围。

在当前 skill 目录执行（Python 3.9+，标准库，无额外运行依赖）：

```bash
python3 scripts/profile_project.py /path/to/frontend-package > /tmp/frontend-profile.json
python3 scripts/recommend.py "文档审核，定位原文" --framework auto --profile /tmp/frontend-profile.json
python3 scripts/recommend.py "分享权限弹层" --framework react --no-new-dependencies
```

读取返回的理由、排除项和限制，选择一个主方案。复杂自然语言可用 `--intent` 明确意图；无命中时继续查现有能力和官方资料，不编造候选或硬套资源。脚本不理解完整业务，不代替设计判断。

具体参数、下载与验收命令见 [工具手册](references/tooling.md)。没有 Python 或现成工具时，手工完成同等判断即可。

## 获取官方知识，再获取代码

选定来源后读取 [官方接入与下载](references/acquisition.md) 中对应条目，核对最新组件页、安装文档、兼容版本及授权。

采用两条互补路径，不把 MCP、skill 和组件依赖混为一谈：

- **知识路径**：已可用的官方 skill / MCP → 官网链接的 skill、MCP、`llms.txt` 或 Markdown 文档 → 官方网页与仓库。Skill 负责用法，MCP 负责检索或获取；二者均不能代替组件本身。
- **代码路径**：项目已有实现 → 官方 registry / CLI / npm 包 → 官方仓库中的目标源码。没有 MCP 或 skill 时，主动获取所需源码和依赖，完成集成；不要停在“你可以自己下载”。

只读取、下载当前任务所需的官方 skill 及其实际引用文件。先检查内容，再按当前工具支持的方式使用；下载文件不代表当前会话已经动态注册该 skill。长期安装遵循用户已有授权和工具约定，不批量安装清单内所有 skills 或 MCP。

核对下载响应的内容类型和实际内容：返回首页 HTML、登录页或 404 的 `llms.txt` 不能当成知识索引。没找到官方入口应写“未确认”，而不是断言不支持，更不能猜包名、MCP 地址或 registry ID。

可用 `scripts/fetch_reference.py` 将已核实官方域名下的单份文本 / registry item 下载到任务缓存，取得 URL 与 hash。它不安装、不执行内容；源码检查、依赖处理、业务接线和验证仍由你完成。文档记录有 MCP 不等于当前已连接；下载了 skill 不等于宿主已加载。

网络或付费访问不可用时，使用本地可验证实现、已授权公开源码或更合适的替代；标明这一限制。不要绕过付费限制，也不要把截图称作可复制源码。

## 把素材变成产品的一部分

编码前简短说明选中的组件、用途和一项主要取舍，然后继续实现。不要把常规选型变成审批流程，也不必向用户列出所有候选。

- **视觉归一**：组件颜色、字号、圆角、边框、间距、阴影和焦点样式使用项目 tokens。沿用既有图标与动效运行时；静态小元素优先用现有原语或 CSS。
- **结构优先**：先改善内容顺序、对齐、行宽和密度，再增加装饰。列表不必全变成卡片，普通内容不必都有渐变、标题眉标和大面积空白。
- **真实交互**：用 props / 类型替换演示数据，连接真实事件、路由和 API。提交、取消、重试、复制、展开和筛选必须产生对应结果；演示数据只用于明确的原型或测试。
- **状态可解释**：空状态给下一步，失败保留用户输入，异步操作阻止重复提交。进度取自真实任务；不知道比例时呈现阶段或不定进度，不编造百分比。
- **动效有语义**：优先反馈按下、展开、切换、成功与内容到达。动画不应拖慢完成操作，不让多个持续特效争抢注意力；尊重 reduced motion，触摸和键盘不依赖 hover。
- **集成边界**：检查主题 Provider、全局 reset、portal、z-index、SSR / hydration、CSS 版本和基础组件 API。下载或 CLI 添加后检查 diff，保护用户现有改动，保留必要署名与许可。
- **成本可控**：编辑器、文档引擎、可视化和语法高亮按需加载；避免重复 Markdown 管线、日期库、图标库和动效运行时。

需要具体交互参数与场景组合时，读 [交互配方](references/interaction-recipes.md)。遇到多库集成和主题冲突时，读 [集成模式](references/integration-patterns.md)，按使用者的工程决定具体组合。

长内容、异步反馈、双栏转窄屏、输入法与焦点问题，按 [布局与内容](references/layout-content.md) 检查。先让主要操作成功一次，再打磨动效，避免所有按钮只有外观和空回调。

## 在实际页面上验收

运行与变更相关的项目现有 typecheck、lint、测试或构建，遵循仓库要求。能运行时，在桌面与窄屏实际操作主流程，并用截图检查层级、间距、溢出与遮挡；只看代码不能宣称视觉验收通过。

检查本次涉及的 loading、empty、error、disabled、hover、focus 状态，键盘操作、触摸、可访问名称和 reduced motion；项目支持明暗主题时都检查。长标题、中英文混排、无数据与较大数据量不能破坏布局。查看控制台错误，区分新增问题与已有问题。

最后做一次减法：去掉没有说明状态、支持任务或体现品牌的装饰。若关键操作难找、反馈失真或主题互相覆盖，先解决这些问题，再评价“好看”。

交付简述：改好了什么、采用什么来源及原因、实际完成的验证、仍存在的限制。未运行的检查如实说明，不以截图代替功能验证，也不以构建通过代替视觉检查。

多页面或复杂交付可以填写 [验收记录](templates/delivery-evidence.json)，用 `scripts/check_delivery.py` 检查要求覆盖和证据文件引用。这个工具不执行测试或理解截图；`evidence_record_complete` 只表示记录齐全。具体评审方式见 [质量评审](references/quality-review.md)。

## 调用示例

- “用 $ui-sift 打磨这个后台列表，保留现有 shadcn，交互简洁，不新增大依赖。”
- “用 $ui-sift 做文档审核页：预览、字段校验、定位原文，窄屏也能操作。”
- “用 $ui-sift 改善 AI 对话中的工具结果，先查项目已有能力，再选合适的官方组件。”

资料核验日期、Vibe-Skills 等来源的借鉴方式与实际验证范围见 [资料依据](references/research-notes.md)。维护 skill 时运行包内脚本测试；设计效果另用 [真实任务场景](evals/manual-scenarios.md) 评价，不能用测试数量替代。

本 skill 不依赖指定浏览器、付费服务或额外 skill；使用当前环境可用的读取、浏览和开发工具。源码、注册信息和文档会变化，入选组件以当前官方资料为准。