UI Sift

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

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

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

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

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

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

先理解正在做什么

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

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

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

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

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

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

按任务挑组件

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

当前需要	优先查看	选择边界
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	项目已有其他体系时保持一致

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

用工具缩小候选范围

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

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

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 明确意图；无命中时继续查现有能力和官方资料，不编造候选或硬套资源。脚本不理解完整业务，不代替设计判断。

具体参数、下载与验收命令见 工具手册。没有 Python 或现成工具时，手工完成同等判断即可。

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

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

采用两条互补路径，不把 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 管线、日期库、图标库和动效运行时。

需要具体交互参数与场景组合时，读 交互配方。遇到多库集成和主题冲突时，读 集成模式，按使用者的工程决定具体组合。

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

在实际页面上验收

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

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

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

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

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

调用示例

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

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

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