UXKIN

UXKIN：为 AI 编码 Agent 提供真实 UI 参考

通过 Claude、Claude Code、Cursor、Codex、GitHub Copilot 和任意 MCP 客户端，搜索真实 iOS 应用界面、完整用户流程和网站设计系统， 让 Agent 构建的 UI 看起来像真实产品，而不是 AI 的默认设计。

50 万多个真实界面 · 3 万多个 UI 元素 · 1.5 万多个网站设计系统，每个系统都附有 DESIGN.md

探索 UXKIN →

https://github.com/user-attachments/assets/bc320cda-4a43-4baa-bdb9-cfdaccef6e49

网站 · 文档 · Claude 目录 · 价格 · 支持

---

为什么选择 UXKIN

让编码 Agent 制作设置界面、付费墙或着陆页时，它会用最常见的设计填补所有空白：和其他产品一样的渐变、卡片网格和含糊文案。UXKIN 为它提供更好的参考：真实上线产品如何处理相同的界面或流程，以及真实网站实际采用的颜色、字体和组件。

快速开始

内容	适用对象	费用
no-ui-slop skill	防止 Agent 交付千篇一律、带有 AI 风格的 UI 的规则	免费，无需账号
build-ui skill	用于新页面、仪表盘、润色、简化和评审的分步工作流，最终会检查结果	免费，无需账号
ios-screens skill	原生风格的 iPhone 屏幕：导航、表单、动态字体、深色模式、权限	免费，无需账号
design-md skill	根据项目实际使用的内容编写 DESIGN.md，让每个新页面都保持一致	免费，无需账号
ui-from-screenshot skill	将截图或模型图转换为匹配的 UI，使用你自己的组件，然后并排比较	免费，无需账号
ui-states skill	构建 Agent 容易忽略的状态：空状态、加载、错误、离线、长内容	免费，无需账号
uxkin-research skill	介绍 Agent 如何在设计前查找和比较真实应用、流程和设计系统	搜索需要 UXKIN plan（skill 本身采用 MIT 许可）
UXKIN MCP server	Agent 在构建时搜索真实屏幕、用户旅程和设计系统	UXKIN plan
UI Check GitHub Action	在每个拉取请求中标记失效按钮、缺失状态、临时配色和无障碍基础问题	免费
AI Slop Detector	查看网站看起来有多像 AI 生成的，并了解需要更改的内容	免费
UXKIN for Figma	搜索 UXKIN，将屏幕和完整流程放到画布上，导入网站的颜色和字体	即将登陆 Figma Community

1. 安装免费技能

npx skills add uxkin/agent

这会安装全部七个技能；你也可以将它们复制到 Agent 的技能文件夹中：

• skills/no-ui-slop：介绍如何构建符合产品风格的 UI。可独立使用，无需账号；连接 UXKIN 服务后，还会告诉 Agent 何时查找真实参考。
• skills/uxkin-research：介绍如何在设计前进行研究：用日常语言搜索 UXKIN 库、打开完整用户旅程、比较多个应用并报告它们的共通之处。
• build-ui：为各种 UI 任务（新页面、仪表盘、润色、简化、评审）制定计划，最后在手机和桌面尺寸下渲染、修复并再次检查。
• ios-screens：使用 SwiftUI、UIKit、React Native、Expo 或 Flutter 构建原生 iPhone UI，并在大小尺寸的 iPhone 以及浅色和深色模式下进行检查。
• design-md：读取项目并编写（或更新）其 DESIGN.md，其中包含带用途的颜色、字体比例、间距、组件和供 Agent 使用的规则。
• ui-from-screenshot：使用你自己的组件，根据截图或模型图构建 UI，然后将结果与图片进行比较并修复差异。
• ui-states：查找并构建屏幕的所有状态（首次使用、空状态、加载、错误、离线、成功），并逐一检查。

所有技能都可以独立使用；连接 UXKIN 服务后，还可以查找真实屏幕、流程和设计系统。下方的插件包含 no-ui-slop 和 uxkin-research；其余五个通过上述命令安装（它们位于 .agents/skills 中）。

2. 连接 UXKIN MCP 服务

该服务托管于 https://uxkin.com/mcp（Streamable HTTP）。大多数应用都使用你的 UXKIN 账户登录：无需复制令牌。

应用	操作方法
Claude（网页、桌面、移动端）	在 Claude 的目录中打开 UXKIN，点击 Connect，登录并点击 Allow
Claude Code	运行 claude mcp add --scope user --transport http uxkin https://uxkin.com/mcp，然后依次选择 /mcp → uxkin → Authenticate
Cursor	在 uxkin.com/cursor-ui-design 一键安装，然后点击 uxkin 旁边的 Login
Codex	运行 codex mcp add uxkin --url https://uxkin.com/mcp，然后运行 codex mcp login uxkin（或安装 Codex 插件）
GitHub Copilot（VS Code）	打开命令面板 → MCP: Add Server → HTTP → https://uxkin.com/mcp，然后在提示时登录（指南）
Lovable、Bolt、Devin Desktop	使用上方的 URL 添加自定义 MCP 服务（Lovable、Bolt、Devin Desktop / Windsurf）
其他任何 MCP 客户端	添加 https://uxkin.com/mcp 并登录，或按照 uxkin.com/docs 中的设置说明操作

搜索需要 UXKIN 订阅方案（月度或终身）。 你可以随时在自己的账户中断开任何应用。

试试看

连接后，可以向你的 Agent 提出类似这样的问题：

• “使用 UXKIN 查找真实冥想应用中的引导流程，并告诉我它们有哪些共同点。”
• “使用 UXKIN 给我看看真实应用如何处理取消订阅，然后改进我的取消页面。”
• “在 UXKIN 上找一个简洁明亮的 SaaS 设计系统，并用那种风格制作我的落地页主视觉区域。”
• “制作付费墙之前，先在 UXKIN 上查找三个真实的付费墙，并说明你从每个付费墙中借鉴了哪些设计决策。”

工具

工具	返回内容
find_ui_references	真实 iOS 应用界面、用户旅程（多屏流程，例如引导流程或取消订阅）和网站
find_ui_materials	真实网站的设计系统：颜色及其用途、字体排版、组件，以及最匹配结果的完整 DESIGN.md
get_journey	一个用户旅程中的所有界面，按顺序排列
list_collections / get_collection	你在 uxkin.com 上保存到合集中的参考资料

所有工具均为只读。

它还提供现成的提示词，你的应用可以将它们显示为命令（在 Claude Code 中：/mcp__uxkin__research_flow 等）：

提示词	它会要求你的 Agent 执行的操作
research_flow	查看真实应用如何处理某个流程（引导流程、结账、付费墙……），并推荐一种方案
find_design_system	查找适合你的产品和风格的真实网站设计系统
review_my_ui	将项目中的界面与真实应用进行比较，并提出修改建议
build_from_collection	从你在 uxkin.com 上保存的参考资料开始

此仓库包含的内容

• no-ui-slop 和 uxkin-research 技能（skills）。另外五个技能需使用 npx skills add uxkin/agent 单独安装。
• UXKIN 插件，适用于 Claude（.claude-plugin）、 Cursor（.cursor-plugin）和 Codex （.codex-plugin）；Kiro power（POWER.md）、 Google Antigravity 插件（plugin.json）以及 Gemini CLI 扩展 （gemini-extension.json）：一次安装即可获得技能和 MCP 服务。
• MCP 服务列表（server.json），已发布到 官方 MCP Registry。
• UXKIN 自有设计系统（DESIGN.md）：UXKIN 会为其库中的每个网站导出一个 DESIGN.md，而 UXKIN 本身也是基于其中一个构建的。将它交给你的 Agent，即可了解实际格式。
• UXKIN 的上架平台（DISTRIBUTION.md）：列出所有 注册表、应用商店和目录，以及各自的当前状态。
• 示例（examples）：适用于各应用的配置文件、可放入 AGENTS.md 或 CLAUDE.md 的项目说明、示例提示词，以及具体示例（删除账户、取消订阅、移动端 引导），展示 Agent 使用 UXKIN 后会有何不同。

将其用作 Claude 插件

安装一次即可添加技能和 UXKIN 服务。技能安装后即可使用；要搜索库，请连接服务（Claude 会打开 UXKIN 页面，你可以在此登录并点击 Allow）。在 Claude Code 中，输入 /mcp，选择 uxkin，然后选择 Authenticate。

在 Claude Code 中，你也可以直接从 GitHub 添加：

claude plugin marketplace add uxkin/agent
claude plugin install uxkin@uxkin

将其用作 Cursor 插件

安装后，在 Cursor 的 MCP 设置中点击 uxkin 旁边的 Login，登录 UXKIN 并点击 Allow。

将其用作 Codex 插件

codex plugin marketplace add uxkin/agent
codex plugin add uxkin@uxkin
codex mcp login uxkin

最后一条命令会打开 UXKIN 页面，你可以在此登录并点击 Allow。

将其用作 Google Antigravity 插件

git clone https://github.com/uxkin/agent uxkin
agy plugin install ./uxkin

然后输入 /mcp，选择 uxkin，再选择 Authenticate：系统会打开 UXKIN 页面，你可以在此 登录并点击 Allow。若只添加服务，请将 mcp_config.json 放入 ~/.gemini/config/mcp_config.json。

将其用作 Kiro power

在 Kiro 中，打开 Powers 面板 → Add Custom Power → Import power from GitHub，并输入 https://github.com/uxkin/agent。当 Kiro 要求对 uxkin 进行身份验证时，点击 Authenticate，登录 UXKIN 并点击 Allow。

将其用作 Gemini CLI 扩展

gemini extensions install https://github.com/uxkin/agent

然后启动 Gemini CLI 并输入 /mcp auth uxkin：系统会打开 UXKIN 页面，你可以在此登录并点击 Allow。

它会发送哪些内容

该技能在本地运行，不会发送任何内容。MCP 服务仅会收到 Agent 发送的搜索文本（例如“冥想应用的 引导流程”）、结果数量限制和你的登录信息，并从 uxkin.com 返回匹配的参考内容。它不会读取你的 代码、文件或对话。请参阅隐私政策。

文档与支持

• 文档：各应用的设置方法，以及每个工具会返回的内容。
• 指南：使用 Claude Code、Cursor、Codex、Copilot、Lovable、Bolt 等工具打造更出色的 UI。
• 支持，或发送邮件至 [email protected]。
• 联盟计划：你邀请来 UXKIN 的用户每次付款，你都能获得 30%。

贡献与安全

欢迎提交对技能、设置步骤和示例的修复：请参阅 CONTRIBUTING.md。如需报告安全问题，请参阅 SECURITY.md。

许可证

本仓库中的技能和文件采用 MIT 许可证。UXKIN 库本身（其中的屏幕、流程和设计系统）是托管服务，不属于本仓库：请参阅 条款。MIT 许可证适用于此处的代码和文本； 不授予使用 UXKIN 名称或徽标的权利。

已列入 Claude Market MCP 目录