跳到组件

面向 AI 原生应用的组件。

为智能体、对话、数据和日常应用界面准备的可交互构建模块。复制代码、把提示词交给你的编程智能体,或者让 MonstarX 直接把它做进你的应用。

  • 40个组件
  • 7个分组
  • React + Tailwind
  • 免费使用

提示词适用于

MonstarX · Claude Code · Cursor · Codex · Windsurf · Gemini CLI · VS Code · Lovable · 以及任何编程智能体

在编程智能体中使用
01

智能体屏幕

智能体替你操作网站:看它点击和输入,随时接管或批准有风险的一步,亲自做一遍来教它,或回放录像。

正在加载演示…

添加一个可以看助手替用户操作网站的屏幕:它的指针移动、点击和输入,旁边的列表显示每一步,提供“暂停”“接管”,涉及花钱的操作前先请求批准。再加一个亲自做一遍来教它的模式,以及可以回放和拖动进度的录像。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

02

思考过程

在智能体工作时展示它在做什么——步骤、推理、搜索和代码——完成后收起成一行。

正在加载演示…

给我应用里的助手加上思考过程:它工作时显示一个“思考中…”面板,逐条列出每个步骤,进行中的显示加载动画,完成的打勾并显示用时。点开面板可以查看推理内容、执行过的搜索和写下的代码;完成后收起成一行“思考了 6 秒”。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

03

工具标签

智能体回答时调用的工具,以标签显示运行、失败、重试和完成,点开即可查看输入和输出。

正在加载演示…

把助手回答时用到的工具显示成小标签:运行中显示加载图标,完成后显示工具名和耗时,失败时变红并显示错误,点击可以展开查看传入的内容和返回的结果。再提供一个可以折叠成“使用了 5 个工具”的时间线视图。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

04

任务行

智能体运行中任务的实时状态:排队、带进度的运行中、可重试的失败、已完成——以胶囊或列表呈现。

正在加载演示…

加一个任务列表,显示智能体正在做的事:每个任务一行,显示状态(排队中、带进度环的运行中、带“重试”按钮的失败、打勾的已完成),一个简短的数量(比如“12 张发票”),以及一个展开子步骤的箭头。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

05

功能计划

智能体执行的计划,以带进度的清单呈现:每个功能的状态、涵盖的内容,以及测试是否通过。

正在加载演示…

加一张功能计划卡片:列出正在构建的功能清单,并配一条进度条(“已完成 3/5”)。每个功能显示待办、进行中或已完成,点开显示一行说明,并带一个“测试通过”或“测试未通过”的小标签。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

06

请求队列

智能体忙碌时发出的请求在输入框上方的托盘里排队:可以调整顺序、编辑、删除或设为下一个。

正在加载演示…

让用户在助手工作时也能继续发送请求:显示它正在处理的请求和进度,新的请求放进输入框上方的队列里,可以调整顺序、编辑、删除或设为下一个,并提供暂停队列的按钮。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

07

图像生成网格

根据提示词生成图像:一批批图像从噪点中逐渐显现并显示实时进度,之后可以生成变体、放大、收藏或下载。

正在加载演示…

加一个图像生成器:提示词输入框,可选风格和画幅,点“生成”一次生成四张,每张都显示生成进度。生成好的图像可以生成变体、放大、收藏或下载;之前生成的批次保留在下方。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

08

流式回答

逐字写出的回答,带可预览来源的编号引用、复制或评价的操作,以及追问建议。

正在加载演示…

让助手的回答在闪烁的光标后逐词流式出现,带编号引用:鼠标悬停时显示来源标题、网站和一段摘录;下面放一排操作(复制、重新生成、点赞、点踩),以及两三个可以点击继续追问的问题。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

09

上下文卡片

AI 回答前找到的段落:来源、相关度和匹配的词,可以固定或排除,回答也随之变化。

正在加载演示…

当助手根据我们的文档回答时,把它用到的段落显示成卡片:每张卡片有来源和页码、相关度分数、高亮的匹配词,以及固定和排除按钮,回答中按编号引用每张卡片。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

10

审批卡片

智能体行动前逐一提出的问题,以及需要你点头才能执行的操作的授权卡片。

正在加载演示…

在助手执行重要操作前显示审批卡片:一次一个地问几个问题(单选、多选或简短回答),带“跳过”“继续”和“1/3”计数。对有风险的操作,显示一张卡片,清楚说明会发生什么,并提供“批准”“编辑”和“拒绝”。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

11

推荐卡片

带置信度仪表、依据和风险以及备选方案的 AI 推荐,可以是卡片,也可以是对比表。

正在加载演示…

添加一张推荐卡片:显示助手推荐的选项和置信度仪表(例如“82% · 高”)、附来源的理由、主要风险、什么情况会改变它的判断、它考虑过的其他选项及各自的置信度,以及一个执行按钮。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

12

语音智能体光球

会呼吸、聆听、思考和说话的光球,带实时字幕、静音和点按打断,也可以是紧凑的通话栏。

正在加载演示…

给我的应用加一个语音助手:一个发光的球,用户点一下就能说话,它会显示正在听、正在思考和正在说话,带实时字幕、静音按钮,说话时点一下即可打断,还有一个带计时器和挂断按钮的小通话栏。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

13

预览上的评论

钉在实时预览上的评论串:在任意位置放置图钉、回复、标记已解决并可撤销,还可以显示全部评论串的列表。

正在加载演示…

让大家能在我的应用预览上评论:点“评论”按钮后,在任意位置点击就会放下一个带此人头像的图钉,并打开一个大家都能回复的评论串。评论串可以标记为已解决(可撤销)并隐藏,有新回复时会提示,还会列在侧边面板里,分“未解决”和“已解决”两个标签页。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

14

提示词输入栏

用户和智能体对话的输入框:@ 添加来源,/ 调用命令,模型菜单、附件和语音输入。

正在加载演示…

给我的应用加一个提示词输入框:随输入自动变高,输入“@”打开文件和数据来源列表、选中后作为标签附上,输入“/”打开命令列表;并提供添加文件、选择模型、语音输入和发送的按钮——全部都能用键盘操作。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

15

模型选择器

选择模型和思考深度:速度和成本一目了然,带高级标识,思考强度从低到最高。

正在加载演示…

在提示词输入框旁加一个模型选择器:一个显示当前模型和思考强度的按钮,点开是模型列表,每个模型有简短说明、速度和成本指示,高级模型带标识;另加一个思考强度控件(低、中、高、最高),说明每档会消耗多少用量。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

16

语音输入波形

用说的代替打字:实时波形和计时,边说边出字,最后保留或取消。可以用演示语音,也可以用你自己的麦克风。

正在加载演示…

给我的文本框加上语音输入:点击麦克风按钮,文本框变成带计时器的实时波形,说话时文字随即出现(未确定的字显示为灰色),并提供保留或取消所说内容的按钮。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

17

选中文本操作

选中文字就出现 AI 工具栏:润色、缩短、更亲切、修正或翻译,然后在原处接受或放弃改写。

正在加载演示…

让用户在我的编辑器里选中文字时,旁边马上出现 AI 工具栏——润色、缩短、更亲切、修正拼写和翻译——然后在原处显示改写结果:旧文字划掉、新文字用绿色显示,并提供接受和放弃按钮。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

18

命令面板

一个搜索框就能找到任何内容、执行任何操作:模糊搜索、分组结果、范围筛选和第二步,全程可用键盘完成。

正在加载演示…

加一个按 ⌘K 打开的命令面板:一个搜索框,边输入边找到页面、记录和操作(能容忍错别字),结果分组显示、最近使用的排在最前,匹配的字母高亮,按 Enter 执行选中的项;什么都没找到时,显示友好的空状态并给出建议。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

19

差异表格

AI 的修改逐行扫过表格:每处改动都显示改前 → 改后,可按单元格、按行或全部接受或拒绝,没改的行也会说明原因。

正在加载演示…

当助手提议修改表格时,先展示再应用:每个改动的单元格把旧值划掉、新值用绿色显示,对它选择不改的行附上说明,并提供按单元格、按行或全部接受或拒绝的按钮,最后点“应用”。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

20

洞察卡片

会说话的数字:带可悬停迷你折线图或柱状图的指标卡片,以及数字背后的洞察。

正在加载演示…

在我的仪表盘上加一排指标卡片:每张显示一个数字、相比上周的变化(绿色或红色),以及一个悬停即可查看每天数值的小图表。下面再加一张洞察卡片,可以翻页查看这些数字意味着什么,每条都附一个建议的下一步。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

21

记录表格

CRM 风格的表格:搜索、可排序的列、标签、关系强度指示,以及支持批量操作的行选择。

正在加载演示…

加一个客户表格:可搜索,列可排序(名称、标签、月用量、最近订单,以及用四格柱条表示的关系强度),每行有复选框,选中行时出现批量操作栏。在手机上,第一列保持固定,其余列可以横向滚动。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

22

筛选表格

状态标签一点,实时表格就重新整理:数量随之更新,行平滑地移到新位置,新数据也在眼前不断到来。

正在加载演示…

加一个实时订单表格,上方放状态标签(全部、新订单、处理中、已发货、有问题),每个标签显示数量,点击即可筛选行。新订单出现在最上面,状态变化的行平滑移动;再加一个搜索框、一个暂停实时更新的按钮,以及按状态分组显示的选项。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

23

代码差异

智能体的代码改动,方便审查:合并视图或左右对照,词级高亮,折叠未改动的行,可在任何改动行上评论。

正在加载演示…

把智能体做的代码改动显示成可以审查的差异:逐个文件,删除的行标红、新增的行标绿,并高亮改动的词,未改动的代码折叠起来,每个文件有“已查看”复选框,可以在任何改动行上评论,还能在合并视图和左右对照之间切换。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

24

日志流

实时日志查看器,支持按级别筛选、搜索、自动跟随和复制——也可以是一个实时输出构建过程、还能输入命令的终端。

正在加载演示…

给我的应用后台加一个实时日志查看器:日志行带着时间、级别和来源不断流入;每个级别都有带数量的开关,可以显示或隐藏;搜索框会高亮匹配内容;在我向上滚动之前一直跟随最新一行(之后显示“新日志”按钮);还能暂停、展开某一行的详情并复制日志行。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

25

流程图画布

画在点阵画布上的自动化流程——触发器、条件和动作——用 + 随处添加步骤,测试运行时点亮所走的路径。

正在加载演示…

加一个自动化构建器:在点阵画布上画出流程,从触发器开始,按“是/否”条件分支,再执行动作。每条连线上都有 +,可从菜单添加步骤;步骤可以改名或删除;画布可以平移和缩放;点“测试运行”时,每个步骤运行时都会高亮。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

26

看板

在各阶段之间移动卡片的列——用鼠标、手指或键盘都行——带数量上限和快速添加。

正在加载演示…

加一个看板:每个阶段一列,卡片可以用鼠标或手指在列之间拖动,也能用键盘移动(空格拿起、方向键移动、空格放下);每列显示数量和上限,底部有一个快速“添加卡片”。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

27

实时光标与在线状态

谁在这里、在做什么:带状态的头像、带名字且平滑移动的光标、他人的选区和插入点,以及跟随模式。

正在加载演示…

显示此刻还有谁在这个文档里:一排叠放的头像,带有在线或空闲的小圆点;每个人的光标用各自的颜色标出名字;显示他们选中或正在输入的内容;有人加入或离开时给出提示;点击头像就能跟随这个人。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

28

版本时间线

所有保存过的版本都在一条时间线上:用差异对比或前后对比滑块查看改动,确认清楚后恢复任意版本,还能撤销。

正在加载演示…

加一个版本历史:按天分组的已保存版本时间线,标出每个版本的作者和当前版本。选中一个版本会显示改了什么(或页面改动前后的对比);点“恢复”会先请求确认,当前版本仍保留在历史中,而且可以撤销。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

30

新手引导清单

带进度环的设置向导:下一步连同操作按钮一起展开,可以跳过,向导可以隐藏再调出。

正在加载演示…

为新用户加一个设置清单:用进度环显示“已完成 2/5”,按顺序列出步骤和各自所需时间,下一步默认展开,带一个直接完成它的按钮和“稍后再说”;全部完成时庆祝一下,并且可以隐藏清单、之后再调出来。另外做一个放在屏幕角落的小启动按钮版本。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

31

设置表单

知道改了什么的设置页:标出改过的字段,保存栏显示未保存数量,可放弃更改,有校验,支持 ⌘S。

正在加载演示…

加一个分区的设置页(店铺信息、配送、通知):标出我改过的每个字段,显示保存栏,上面有未保存更改的数量和“保存”“放弃”按钮;保存前校验字段并跳到第一个问题,保存成功后提示,也可以用 Ctrl+S 或 ⌘S 保存。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

32

步骤条/向导

把长表单拆成短步骤:当前位置、已完成的步骤、前进前的检查、带编辑链接的确认页和完成页。

正在加载演示…

把申请表做成分步向导:用步骤条显示我在哪一步、哪些已完成;每一步在前进前检查并给出清楚的提示,返回时不丢失任何内容;最后是带各步骤“编辑”链接的确认页,提交后显示完成页。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

33

数据导入映射

把表格的列对应到你的字段:带置信度的建议、示例值、必填字段和冲突提示,然后导入。

正在加载演示…

有人上传表格后,显示一步把列对应到我的字段:每列显示几个示例值、建议的字段和匹配的置信度,可以方便地修改或跳过这一列;缺少必填字段或两列对应到同一字段时给出警告;“导入”按钮显示进度和结果摘要。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

34

文件拖放与附件

拖入、选择或粘贴文件:预览、逐个显示进度、清楚说明为什么拒收、重试,消息会等上传完成。

正在加载演示…

加上文件上传:一个可以把文件拖进来、点击选择或直接粘贴图片的区域,每个文件都有预览和进度条;文件太大或格式不对时给出清楚的提示,上传失败时有“重试”按钮;消息框里的附件必须上传完才能发送消息。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

35

权限对话框

先问再做:说明应用或 AI 智能体想做什么,逐项解释权限,可选权限可以关闭,还能记住这次选择。

正在加载演示…

加一个权限对话框,在其他应用连接或助手代我做事之前弹出:用简单的话列出具体请求了什么,可选部分可以关闭,显示操作预览(比如邮件内容和收件人),提供“仅允许这一次”和“始终允许”,并有“记住这个选择”选项。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

36

预约时段选择器

选日期和时间:日期条或月历,上午和下午的时段,已约满的时间,以及确认页。

正在加载演示…

加一个预约选择器:用未来两周的日期条(或月历)选日期,空闲时段按上午和下午分组,已约满的显示为灰色;可以选择时长并显示时区,再加一个带“确认”按钮的摘要,确认后变成带“添加到日历”的确认页。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

37

价格表

月付/年付切换,突出热门方案,所选方案一路带到结账,还有完整的对比表。

正在加载演示…

加一个价格区:三个方案并排,用“月付/年付”切换并显示年付能省多少,突出最受欢迎的方案;每个方案都有“选择”按钮,把方案和价格带到结账栏;再加一张对比各方案包含内容的表格。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

38

消息提示堆栈

会堆叠的简短通知:悬停展开、滑动关闭,显示耗时任务的进度,并提供撤销。

正在加载演示…

加上消息提示(toast):它们在角落里堆叠,悬停时展开,几秒后自动关闭(悬停时暂停),可以滑动关闭,类型包括成功、带“重试”的错误、加载完成后变为成功,以及带“撤销”的通知。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

39

通知收件箱

带未读数的铃铛打开收件箱:全部、未读、提及三个标签,就地操作,全部标为已读,新通知实时到达。

正在加载演示…

在顶栏加一个通知铃铛,带红色未读数。点开是收件箱,有“全部”“未读”“提及”标签,通知按今天、昨天和更早分组;每条通知都能直接操作(批准、回复),用一个小圆点标记已读或未读,还有“全部标为已读”,新通知到达时滑入显示。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

40

空状态

没有内容时的界面:首次使用、搜索无结果、加载失败和离线,每种都给出下一步。

正在加载演示…

为我的列表设计空状态:友好的首次使用页面,有添加第一项和试用示例数据的按钮;“无结果”提示写出搜索词并提供清除筛选;错误页面有“重试”和详情;离线横幅保留最后保存的数据并自动重试。

粘贴到 MonstarX,或直接用它新建项目。

用这条提示词打开一个新项目。第一次用 MonstarX?免费注册,提示词会一直为你保留。

在你的编程智能体中使用。

把 MonstarX UI 连接到 Claude Code、Cursor、Codex 或任何 MCP 客户端,你的智能体就能搜索全部 40 个组件,读取它们的规格和代码,并按你自己的技术栈把它们做进应用。免费、只读、无需登录。

MCP 服务器地址https://monstarx.com/ui/mcp

在终端中运行:

claude mcp add --transport http monstarx-ui https://monstarx.com/ui/mcp

或者,让每个项目都能用:

claude mcp add --transport http --scope user monstarx-ui https://monstarx.com/ui/mcp
  • “用 monstarx-ui 找一个能展示智能体正在做什么的组件,把它做进我们的聊天界面。”
  • “在智能体发送邮件之前,加上 monstarx-ui 的审批卡片,用我们的设计系统。”
  • “从 monstarx-ui 获取定价表,并接上我们的 Stripe 套餐。”

你的智能体能得到什么

  • search_components按需求查找组件:“approval”“agent progress”“pricing”。
  • list_components全部 40 个组件,按分组列出。
  • get_component源代码、依赖、变体、安装命令和完整的构建规格。
  • get_prompt给编程智能体的构建规格,或 16 种语言的 MonstarX 提示词。
  • get_guidelines设计规则,让组件贴合你的技术栈和品牌,而不是原样粘贴。

另有资源(ui://components/{id}、ui://guidelines)和提示(add-component, find-component)。

或者用 shadcn CLI 安装

每个组件都是一个 shadcn 注册表条目。在使用 shadcn/ui 的项目中,一条命令即可写入文件并安装 lucide-react:

npx shadcn@latest add https://monstarx.com/ui/r/approval-card.json
注册表索引(JSON)

新组件,直接发到你的邮箱。

智能体界面、语音、图表、应用模块:每一批新组件连同提示词和代码,上线当天就发给你。

只发新组件,绝不发垃圾邮件。隐私政策

想要整个应用,而不只是零件?

用一句话描述它。MonstarX 会规划、用这样的组件构建、在真实浏览器里测试,并发布到你的域名。