close
Refcat

从需求简报到真实流程,就在你的工具里。

为借助 AI 智能体构建产品的产品设计师和开发者打造。描述你正在设计的内容,找到已上线产品的真实流程,并导入 Figma、Chrome,或通过 MCP 带进 Claude Code 和 Cursor。每个界面都保留来源。

免费开始 · 无需信用卡 · 本周导出到 Figma 的流程:24 个 · 本月新增应用:47万 个
Refcat UI 参考库
YOUR STARTING POINT

Not sure where to start? Pick what you're designing.

Start with one task. Find a real flow, compare its steps and save a reference for your project.

  1. 1Open a flow that matches your task
  2. 2Compare the steps, not just the look
  3. 3Save the useful reference to a folder
Find my first reference

Start on Free. No credit card required.

TumblrWithings Health MateNibbleHow We FeelWealthsimpleCulture TripHopperParamount+SlowlyMonzomonday.comOpenTableWolt DeliverySkyscannerCleoHouzzMessengerJumpropeRaribleSnapchatTaskRabbitInsight TimerRetroGooglePerplexityDropboxMeta QuestZillowStravaYouTube StudioEndelClubhouseThe Wall Street JournalFabulousTimeTreeBleacher ReportadidasGrubhubMacroFactorTrelloShopArtifactKitchen StoriesGrouponInstagramBeat PassengerNYT CookingfoodpandaTastyTinderOpendoorZoomLifesumGoogle ChromeBuzzFeedFeeldSonosNeo FinancialLimeAlan MindClassPassYahoo FinanceLystUber EatsNeverthinkFiverrTargetStarbucksDeezerGOATSubstackGoogle NewsSwiggyUnder ArmourYouTube MusicBeReal.GoDaddy StudioZocdocSmartThingsAirtaskerPeerspaceMarriott BonvoyDuolingoAmazon ShoppingWealthsimple InvestTradingViewCitizenHQ TriviaTubiBehanceShazamFitbitCourseraScootAffirmBest BuyLemon8ThumbtackZARACornershop
工作原理

向你的设计智能体提出需求。几秒内获得有据可依的方向。

从新用户引导到支付,Refcat 帮你找到真实产品的设计模式,让下一个设计决策更轻松。
Uber 应用“新用户引导”流程中的真实界面
功能

为真实产品工作打造的设计智能体

向智能体提出需求,查看其方向背后的真实设计模式,再把工作带入 Figma 或你常用的 IDE。
导出到 FIGMA

沿用智能体有据可依的方向,将完整流程即时导入 Figma。

从 Refcat 导出到 Figma 画框的真实应用流程
你的文件夹

让智能体找到的设计模式井然有序,随时与团队共享。

用于整理已保存界面和流程的 Refcat 文件夹
筛选

断点、应用或流程。为智能体提供恰当的设计上下文。

按平台、应用和流程筛选目录
图片转代码

借助可靠的视觉上下文,将真实应用截图转换为代码。

真实应用截图与据此生成的代码并排展示
笔记

在智能体的方向旁记录决策与上下文。

附在 Airbnb 参考界面上的笔记
CLAUDE CODE 集成

把智能体方向背后的真实产品上下文交给 Claude。

通过 MCP 使用 Refcat 参考的 Claude Code
资源库快照

真实上线的产品,汇集在一个资源库

界面
339.1万
流程
106.2万
应用、网站和品牌
47万

查看资源库 ·

就在你的工具里

让真实界面进入智能体的上下文。

Claude Code、Cursor 和 Claude Desktop 凭记忆生成界面。通过 MCP,Refcat 把已上线产品的真实界面交给它们,每个都附带来源。

示例会话
refcat mcp
你

找三个突出年度方案的真实付费墙,并添加到“Pricing v2”项目中。

refcat

search_screens "付费墙,年度方案优先"

└ 3 个结果 · 每个都含应用、平台、流程和截取日期

refcat

get_screen ×3 → add_screen ×3 → 项目“Pricing v2”

智能体

完成。三个已上线的付费墙已连同来源加入你的项目,没有任何虚构内容。

你
  • 23 个工具,一个密钥

    get_screen 把界面本身交给智能体:图片和布局结构。search_screens、get_app_flows、get_email_html 和 export_design_system 负责其余部分。在账户中创建密钥,将一段 JSON 粘贴到客户端即可。

  • 每个界面都有出处

    每条结果都附带应用、平台、流程和截取日期,让智能体基于真实产品而非猜测给出方向。

  • Studio 品牌套件

    你的配色和字体应用到每个生成的界面,品牌套件不限数量,另有 10 个 MCP 密钥,每分钟 300 次请求,供全队使用。

  • 两分钟配置 MCP
    了解 Studio
TESTIMONIALSOnce you try it, you won't research UI the old way again.
I love not having to download apps, create accounts, and test everything manually just to understand the UI.
Gugel@gugeldev
I was genuinely surprised. Congratulations on the quality and care for users!
Rafael Coelho@coelho_lab_
So much fun. I spent hours looking through the references.
渡邉一輝(かじき@kzkwt7b
The folders feature finally made me use the references I collect.
Nathan Oliveira@NathanDev_
BERJAYA
BERJAYA
BERJAYA
BERJAYA
价格

有了真实上下文,你的设计智能体会更聪明。

浏览真实的产品流程,再选择你的工作所需的参考、导出和 AI 额度。

Free$0.00/月
浏览并保存真实产品参考
每个应用前 2 个流程完整可看 + 每周 10 个热门流程
50 个已保存参考 · 3 个项目
每月 5 次浏览器到 Figma 导出
1 个 MCP 密钥(Claude Code 或 Cursor)· 每分钟 30 次请求
1 个席位
免费开始无需信用卡
最受欢迎
Pro$10.00/月
适合每周都在设计的设计师
无限保存参考
每个席位每月 20 次导出
Figma 和设计系统导出
完整流程历史
每月 100 个 AI 界面(团队共享)
1 个品牌套件 · 3 个 MCP 密钥,每分钟 120 次请求
包含 2 个席位
升级到 Pro
随时取消
Studio$39.00/月
无限品牌套件,全团队共享 MCP
无限品牌套件:每个生成界面都用你的配色和字体
10 个 MCP 密钥,每分钟 300 次请求,全团队共用
无限导出及 Pro 的所有功能
包含 6 个席位
每月 500 个 AI 界面(团队共享)
升级到 Studio随时取消
USD · 可能需缴纳税费。请在结账时确认金额和币种。

关于 Refcat 的常见问题

套餐、导出与取消订阅。

别再从空白画布开始设计。把需求交给你的智能体。