用途
ui-research 是一个研究优先的 UI/UX 设计工作流技能。它用于在任何前端视觉工作之前，先调研真实产品中已有的解决方案，使设计结果建立在已上线产品的实践之上，而不是凭空生成的通用 AI 风格输出。该技能被定位为高质量 UI 工作的强制性前置步骤，适用于创建新 UI 组件、设计落地页、构建仪表盘或后台界面、开发移动应用界面，以及任何视觉或前端工作。
主要能力
该技能提供一套分阶段的研究流程，并配套来源选择指南、质量检查清单和输出模板。
五阶段研究流程：
- 定义：在检索前明确要构建的对象（组件、页面、流程）、平台（Web、iOS、Android、桌面）、行业（SaaS、电商、金融科技等）、期望感受（专业、活泼、极简、大胆）以及约束（既有品牌、技术栈、时间线）。
- 调研：每个 UI 任务至少检索三类来源——真实产品（最重要，如 Mobbin、UI Sources、Refero）、精选画廊（如 Land-book、Awwwards、Godly）、组件模式（如 shadcn/ui、Collect UI、Dribbble）。技能还按任务类型给出检索词建议，例如仪表盘可搜索“analytics dashboard”“admin panel”“SaaS dashboard”；落地页可搜索“[行业] landing page”“hero section”“pricing page”；移动应用可搜索“[应用类型] iOS”“mobile [feature]”“[竞品] app”；电商可搜索“product page”“checkout flow”“cart design”；认证流程可搜索“login screen”“onboarding”“signup form”；设置可搜索“settings page”“profile settings”“preferences”。
- 收集：保存 5–10 个有共鸣的案例，并记录来源 URL、有效之处、重复模式、独特之处以及如何迁移到自己的项目。
- 分析：进行模式识别，归纳布局（网格、间距、层级）、颜色（配色趋势、对比度）、字体（字体、级差、字重）、组件（按钮、卡片、表单）、交互（悬停、过渡、反馈）。同时提供质量检查清单，包括是否找到 3 个以上真实已上线产品（而非概念稿）、是否识别重复模式、是否记录独特差异点、是否考虑可访问性、是否检查移动端响应式。
- 设计简报：在实现前记录灵感来源及各自可采纳之处、要遵循的关键模式（布局、颜色、字体、组件）、差异化点与品牌个性、技术方案（组件库、动画方案、响应式策略）。
来源选择指南：
按项目类型划分——SaaS 应用首选 Mobbin、UI Sources，辅助 Land-book、shadcn/ui；落地页首选 Land-book、Godly，辅助 Awwwards、One Page Love；移动应用首选 Mobbin、Screenlane，辅助 Pttrns、Apple HIG；电商首选 Baymard、Awwwards，辅助 Mobbin、UI Sources；仪表盘首选 Dribbble、UI Sources，辅助 Ant Design、Tremor；作品集首选 Awwwards、One Page Love，辅助 Godly 和个人站点。
按平台划分——iOS 需要 Apple HIG、Mobbin（iOS 筛选）；Android 需要 Material 3、Mobbin（Android 筛选）；Web 需要 Awwwards、Land-book、shadcn/ui；桌面需要 Fluent 2 及平台特定应用；跨平台则需要综合以上并寻找共性。
避免“AI 感”：
技能列出应避免的通用 AI 模式，包括蓝紫色渐变背景、一切完美对称、通用 blob 或波浪装饰、Undraw 风格插画、“笔记本样机 hero”布局、未改动的默认配色、千篇一律的卡片网格、过度使用的玻璃拟态、默认米白或灰白页面背景、标题内斜体强调词、编号“01 / 02 / 03”分节标签、等宽字体小标题、到处都是胶囊形按钮。同时给出让人工设计显得更像人做的元素：带有性格的自定义配色、有意为之的不对称、独特的字体组合、真实摄影或定制插画、有性格的微交互、微妙的有机形状、品牌专属细节、经过思考的空状态、有性格的文案。质量信号对比表从颜色、布局、图片、文案、动画、细节六个方面对比通用 AI 与人工打磨：通用 AI 使用默认蓝色、完美网格、素材图、Lorem ipsum、标准淡入、无细节；人工打磨使用自定义品牌配色、有意的变化、定制或精选图像、真实且有个性的文本、有目的的动效、悬停状态与微交互。
研究工具：
浏览器扩展方面提到 Muzli（设计灵感流）、Panda（新闻与灵感面板）、Stylify Me（提取站点颜色与字体）；截图工具方面提到 Full Page Screen Capture（整页截图）、Awesome Screenshot（标注并保存）；组织工具方面提到 Figma（制作情绪板）、Notion（记录研究）、Eagle（视觉书签管理）、Pinterest（快速收集）。
研究输出模板：
技能提供 markdown 模板，包含上下文（构建对象、平台、约束）、灵感（5–10 个来源，每个记录公司或站点名、URL、截图、有效之处、可采纳内容）、模式分析（布局、颜色、字体、组件）、设计方向（必须要有、锦上添花、应避免）、技术栈（组件、样式、动画）。
使用方式
在开始任何 UI 工作前使用该技能，按五阶段流程执行，并在动手实现前产出一份研究简报。简报模板见上文输出模板。技能还提供一个快速开始清单：是否定义要构建的对象、是否检索 3 个以上灵感来源、是否收集 5 个以上相关案例、是否识别重复模式、是否记录独特差异点、是否创建简要设计方向、是否检查“AI 感”红旗、是否规划人工质感元素。
与其他技能的衔接
完成研究后可继续使用以下技能：视觉实现用 frontend-enhancer；设计系统搭建用 generic-design-system；UX 流程设计用 generic-ux-designer；动画工作用 ui-animation；品牌一致性用 brand-identity。技能还引用共享参考文件：UI Inspiration Sources（完整来源列表与 URL）、Design Patterns（视觉设计 token）。
限制与暂未提供的信息
该技能本身是一个流程与方法指南，不包含具体产品设计成品。资料中只给出来源名称与检索建议，未提供各来源的具体 URL、配额或付费信息。资料未说明该技能的安装命令、依赖环境、版本号或兼容的工具平台。技能中提到的后续技能名称与共享参考文档路径均以原文为准，其具体内容与可用性暂未提供。