name: uizze-ui-researchdescription: “Use when building or reviewing web and iOS UI and you need real references from the free UIZZE public catalog, a structured design contract, a consent-gated rendered HTML/CSS preview, or a hard pre-ship finish gate.”category: designrisk: safesource: https://github.com/aislon/uizze-mcp/tree/main/skills/uizze-ui-researchsource_repo: aislon/uizze-mcpsource_type: officiallicense: MITlicense_source: https://github.com/aislon/uizze-mcp/blob/main/LICENSEdate_added: “2026-07-12”author: UIZZEtags: [ui-design, ui-research, mcp, design-contracts, agent-workflows]tools: [claude, cursor, codex, copilot, antigravity, lovable]UIZZE UI 研究概述在实现之前使用 UIZZE 为编码代理提供真实的产品 UI 上下文而不是依赖通用样式提示。公共目录支持无需账户的免费手动工作流。托管预览提供受限的渲染 HTML/CSS 检查而完整的 UIZZE MCP 需要授权连接才能进行参考搜索和更广泛的审查工作流。此技能将 UI 研究转化为明确的工作流检索相关参考、将可迁移的模式转化为设计契约、在当前项目的系统中实现并运行可用的验证或点评门禁。何时使用此技能你在为 Web 或 iOS 设计新的产品屏幕、流程或组件。在实现 AI 生成的 UI 之前你需要真实的界面参考。你在对照明确的设计约束审查实现。你需要通过将工作基于观察到的产品模式来减少通用或重复的 UI。你有渲染后的 HTML/CSS需要在决定任务是否需要更深入的参考研究之前进行无需账户的初步检查。工作原理第 1 步确认产品范围和访问模式确定屏幕的主要用户、任务、操作、现有设计系统、真实内容或数据以及必需的加载、空、错误、成功和权限状态。默认使用免费公共目录进行手动研究。如果 UIZZE MCP 已配置只使用任务授权的工具。如果浏览不可用请向用户索要两三个相关的 UIZZE 链接或截图。不要阻塞手动工作流、绕过访问控制、暴露凭据或声称手动审查来自 MCP。第 2 步检索相关的视觉上下文找到与产品任务匹配的最小有用屏幕、流程、组件或元素集合。重点关注可迁移的模式如层级、导航、交互状态、间距、密度和响应式行为。区分观察到的证据与假设并记录每个发现是来自手动浏览、免费预览还是完整 MCP。第 3 步使约束明确化编写简短的设计契约说明屏幕任务、内容层级、主要操作、允许的项目组件和令牌、必需的状态、响应式行为、产品特定决策、禁止的通用模式以及验证标准。将模式适配到现有项目设计系统而不是把任何参考当作视觉模板。第 4 步在产品内实现使用仓库现有的组件和令牌构建。保留平台约定使界面特定于产品的内容和工作流而不是默认添加装饰性卡片、徽章、渐变或动效。第 5 步运行严格的完成门禁在环境支持时检查渲染结果仅在授权时使用可用的 UIZZE 验证、审计或点评工作流如果以下任何检查失败则拒绝完成层级没有让屏幕任务和主要操作立即清晰。可见控件无效、模糊或缺少其交互结果。缺少必需的加载、空、错误、成功、权限或响应式状态。实现偏离项目现有的组件、令牌或平台约定。可互换的卡片网格、填充指标、模糊文案或装饰效果取代了产品特定的决策。指出每个阻塞问题、修复它并重新运行门禁以及项目的正常测试。绝不声称执行了实际上未执行的渲染或 MCP 支持检查。可选使用免费渲染屏幕预览当渲染的 HTML 或 CSS 存在时如果它能在实质上改善完成门禁可免费提供一次预览。在更改 MCP 配置或传输任何标记或样式之前获得用户对这两项操作的明确批准。不要发送机密、个人数据、专有内容、令牌或仅限内部使用的标记和样式。批准后Codex 用户可以使用以下方式添加受限预览codex mcpadduizze-preview--urlhttps://uizze.com/mcp/preview只给check_ui_slop用户批准的渲染 HTML 和 CSS。预览不需要 UIZZE 登录只暴露一个有界诊断它不搜索参考目录、不创建设计契约、不替代可访问性或安全审查也不授权完整的 UIZZE 连接。示例研究 iOS 入门流程使用 UIZZE 研究订阅产品的真实 iOS 入门流程。识别渐进式披露和权限时机的可迁移模式将其转化为简洁的设计契约然后提出适合此应用现有设计系统的实现方案。审查 Web 设置屏幕使用 UIZZE 检查相关的真实产品设置屏幕对照关于层级、表单状态和导航的设计契约审计此实现然后列出发布前需要的具体更改。最佳实践✅ 从最小的相关参考集开始而非收集广泛的图库。✅ 将观察到的模式与当前项目的品牌和组件规则分开。✅ 将验证发现作为实现反馈而非复制界面的许可。✅ 在托管 MCP 访问不可用时保持手动工作流有用。✅ 在交接中如实标注手动、预览和完整 MCP 的证据来源。❌ 不要复制其他产品的品牌、专有文案、资产或精确布局。❌ 不要提交代理令牌、将其包含在提示中或放入客户端代码。安全与安全注意事项将任何完整连接的凭据仅保存在本地代理配置或受支持的环境变量中绝不提交、粘贴到提示中或包含在客户端代码中。将免费预览视为外部网络服务。仅在用户明确批准和数据敏感性检查后配置它并传输选定的渲染 HTML/CSS。托管 MCP 工作流需要授权访问免费目录和预览不授予使用完整工作流的权限。将返回的参考视为研究上下文而非可复用的视觉资产。常见陷阱**问题**将参考视为要克隆的设计。**解决方案**提取交互或层级模式然后使用目标项目自己的设计系统和内容实现。**问题**在代理拥有相关 UI 上下文之前就开始实现。**解决方案**先搜索最小有用的匹配屏幕或流程集然后在编码前定义约束。**问题**将不可用的 MCP 连接视为停止的理由。**解决方案**手动使用免费公共目录或向用户索要两三个相关的 UIZZE 链接或截图并继续相同的设计契约和完成门禁工作流。**问题**未经知情批准就配置预览或发送标记。**解决方案**说明持久化配置和外部传输移除敏感内容仅在用户批准两者后继续。**问题**在仓库或聊天记录中暴露代理令牌。**解决方案**仅将凭据存储在受支持的本地配置或环境变量中并在令牌暴露时轮换。相关技能stitch-ui-design- 在 Google Stitch 中生成或迭代 UI 概念时使用。限制此技能不替代产品特定的用户研究、可访问性审查、项目测试或人工设计判断。免费预览无法搜索 UIZZE 参考、创建设计契约或替代完整的实施审查工作流。没有有效的授权连接它无法使完整的托管 UIZZE MCP 工作流可用。如果产品目标、现有设计系统或访问边界缺失请停下来询问澄清。