跳到组件列表
lucianLabs UX/UI Prompt

从按钮、图表到工作流界面,200 个界面组件;再加上做网站时随手就能用的 200 个动画:首屏、价格表、购物车、表单、仪表盘。滚动到眼前时会自己演示,也可以直接上手操作。看中了就把提示词或代码带走。

400 个深色 · 浅色附代码

npx skills add Seokwoooo/lucian-uxui

GitHub

201逐级点亮的自动化流程

202方块升起的等距数据图

203引线相连的产品标注点

204换分组就重新聚拢的气泡

205逐字起伏的波浪标志

206拖动就晃动的关系网

207双列流动的评价墙

208跟随光标放大的程序坞

209按国家自动分组的手机号输入

210参会者不断增加的直播报名卡

211边框发光的注册引导按钮

212下滑隐藏上滑回来的页头

213自动切换的功能介绍标签

214每格都活起来的便当格功能墙

215从气泡展开的客服聊天

216依次升起的首屏主视觉

217只留差异的套餐对比表

218滚动时吸附到底部的迷你播放器

219从点击处圆形扩散的深色模式

220选中句子弹出的引用分享提示

221吸顶购买栏与选项弹层

222带星标曲线的开源 Star 按钮

223叠起并缩小的吸顶卡片

224能溯源到出处的 AI 回答

225咬了一口的 Cookie 同意条

226光沿网格流动的首屏背景

227新订单不断涌入的实时表格

228光标光晕漫开的卡片描边

229自动打字的终端演示

230输入优惠码后重算的订单摘要

231滚动时立起的倾斜产品界面

232一次指纹完成的通行密钥登录

233示例语不断轮换的 AI 提示框

234逐个轮换的客户 Logo 墙

235把长文折成三行的 AI 摘要

236从正文底下露出的页脚

237逐行从遮罩里升起的标题

238用状态条展示的服务状态页

239可以直接试发的 API 示例

240填到免运费为止的购物车抽屉

241竖向滚动驱动的横向轨道

242跟随滚动的分类胶囊条

243翻面验证的安全徽章

244带你找到错误项的表单校验

245解码归位的乱码标题

246名次互换的条形竞速

247滚动铺满屏幕的介绍视频

248投票就上移的功能请求板

249随输入更新的搜索预览

250改动后落下的保存条

251滚动时依次浮现的功能卡片

252闪光展开的公告胶囊

253刚刚购买的提醒

254更改公开范围的分享窗口

255拖动换列的看板卡片

256数字涨满后揭开的加载页

257拖动宽度查看的响应式预览

258先模糊后清晰的照片

259文中展开的会员墙

260随滚动填色的句子

261用星级条筛选评价

262与列表联动的门店地图

263流光标题与思考中的文字

264能挑出邮箱笔误的输入框

265随截单时间递减的送达承诺

266每次混合都会换的配色板

267切换语言时替换的文案

268跟着 @ 弹出的成员列表

269照抄名称才能删除的确认框

270随光标散开的首屏 UI 碎片

271按类型筛选的更新动态

272按包管理器切换的安装命令

273点一行就展开的详情侧栏

274会变形成输入框的按钮

275跟着正文走的目录高亮

276照片跟随光标走的作品列表

277指针会抖动的网速表

278随人数变化的价格计算器

279选好时间就分开的预约按钮

280从噪点里浮现的 AI 生图

281荧光笔扫过的句子

282向两侧展开的照片

283退订前送上的挽留优惠

284逐步校验的域名连接

285从邀请到接受的成员列表

286逐级进入的移动端子菜单

287胶片式页面速度检测

288展开商品详情

289即时生效的显示设置面板

290先询问再弹窗的通知授权

291折叠长网址的缩短工具

292筛选后重新归位的画廊

293随选随比的商品对比栏

294随滚动组装起来的设备

295随咨询类型变化的表单

296滑动翻阅的首字母索引

297堆叠区块搭建页面

298撕下即领的优惠券

299接近上限变色的用量条

300逐个查询的域名搜索

301体积变小的图片优化

302页面上的反馈图钉

303字体搭配与字号比例

304搜索填写的收货地址

305实时计数的筛选抽屉

306环绕轨道的集成图标

307打字机轮换关键词

308网格与列表互相变形

309层叠退远的山景滚动

310文字透出影像的标题

311今日不再显示的活动弹窗

312对半拉开的幕布菜单

313随杯型变化的咖啡杯

314随目标变形的光标

315拖进回收站删除

316弹簧参数调校台

317行序飞移的排序列表

318滚动绘出的旅行路线

319跟随光标的极光背景

320硬币刮开的即开票

321幕布式页面转场

322滚动刷新的实时热搜

323跟随光标洒落的照片

324推入式页面堆栈

325代码透视镜

326翻格换位的华夫图

327故障风抖动标题

328从列表展开的详情卡

329随区块变色的背景

330长按跃迁的星空

331甩动旋转的抽奖转盘

332缩小吸顶的大标题

333滑动取消的录音

334掀开就开机的笔记本

335从进入方向覆盖的磁贴

336三级停靠的底部弹层

337自南向北的樱花地图

338翻滚的单词立方体

339拖动吸附的卡片轮播

340穿过钥匙孔的镜头

341随光标连线的星座网

342解带开盖的礼物盒

343火箭回顶按钮

344弹跳落地的地图图钉

345转着看、拉开的饮料罐

346只在光标里显形的句子

347甩向角落的画中画视频

348旋转的环形文字徽章

349像素散开的照片切换

350锁梁抬起的挂锁开关

351随速度倾斜的卡片列表

352旋转的流场

353集章咖啡券

354变形跟随的巨型菜单

355显示保存状态的云朵

356放大镜下的腕表

357越靠近越粗的文字

358长按预览的消息

359分数与排名互换的斜率图

360散开又归位的文字

361百叶窗式翻转切换

362滚动鼓轮时间选择

363光标扩散的点阵波纹

364每天开一格的圣诞日历

365邀请好友前移排队序号

366扫过即预览的视频缩略图

367逐年变形的人口金字塔

368跟随句子的阅读聚焦

369扇形展开的照片堆

370随光线亮起的发展历程

371隆起的地形等高线图

372充满即升级的经验条

373五种下划线悬停效果

374逐季移动的应用增长气泡

375逐词弹出的动态字幕

376点按翻页的故事

377随文字切换的手机画面

378粒子汇聚成的文字

379越连越大的连续打卡火焰

380表情随动的满意度滑块

381放大就拆开的地图聚合

382沿波浪流动的文字

383波浪过渡的引导页

384无限续接的信息流

385点阵实时地球

386闪耀解锁的成就徽章

387拉轴筛选的平行坐标

388逐词对焦的名言

389横向展开的照片面板

390章节号滚动的阅读页

391随月份重织的弦图

392手绘风格重点标注

393按设备适配的下载区

394随滚动交错的文字跑马灯

395换年就位移的气温山脊图

396点击才显示的剧透遮罩

397波浪翻转的拼块图

398拖点重拟合的回归线

399逐月重排的评论词云

400光标联动的多张小图

001液态玻璃按钮

002磁吸箭头按钮

003长按删除

004进度下载按钮

005纸飞机发送按钮

006墨迹涟漪订阅按钮

007播放暂停形变

008复制转对勾按钮

009文字滚动按钮

010分体操作按钮

011扇形悬浮按钮

012书签丝带

013拉伸开关

014待办清单

015套餐单选卡片

016星级评分

017倾斜气泡滑块

018滚动数量步进器

019兴趣标签多选

020商品颜色选择

021昼夜天空开关

022爱心爆裂点赞

023展开式通知设置

024价格分布范围筛选

025描边浮动标签输入

0266 位验证码输入

027展开式顶栏搜索

028自增高回复输入框

029彩色标签输入

030日期范围日历

031自定义选择列表

032拖拽上传

033标题就地编辑

034机场自动补全

035转账金额输入

036密码强度计

037账户切换菜单

038右键上下文菜单

039滑动胶囊标签

040展开式侧边栏

041带凹槽的底部标签栏

042分步向导

043会拉伸的页码

044常见问题折叠面板

045从按钮扩散的全屏菜单

046命令面板

047周期分段控件

048跟随滑动的下划线标签

049分层视差的编辑卡片

050随光倾斜的新闻卡片

051飞入购物车的商品卡片

052可翻转的会员卡

053滑动挑选的卡片堆

054关注资料卡

055抽出黑胶的播放器

056月付与年付切换卡片

057点头像切换的评价轮播

058阅读进度文章卡片

059出席回执活动卡片

060昼夜对比滑块

061从缩略图展开的灯箱

062登录卡片反馈

063逐题提问的注册表单

064信封寄出的登录链接

065数字配对设备审批

066社交登录按钮组

067解锁倒计时

068读到底才能同意的条款

069头像裁剪编辑器

070层叠堆起的轻提示

071滑动删除与撤销提示条

072可折叠的行内提示

073滚动公告横幅

074通知铃铛与下拉面板

075上传进度面板

076滑行跟随的气泡提示

077选择回应的浮层

078滑动回复的聊天

079从骨架屏绽放的帖子

080轨道汇聚的同步加载动画

081支付圆环画完打勾

082图标填充的安装进度

083从排队到进度的进度条

084随声音起伏的点状加载

085下拉刷新

086流式输出的 AI 回答

087小卡车跑动的配送阶段

088吞掉纸张的空文件夹

089会纠正错字的 404

090插头重新插上的错误组件

091离线堆积后发出的消息

092帮你放宽筛选的空结果

093全部完成后的庆祝

094拖动时间的天气天空

095会变形的柱状图

096划过就分色的股价曲线

097去掉项后重新分配的环形图

098逐位滚动的实时指标

099跑过一圈的活动圆环

100对折翻牌的计时器

101分栏工作区

102嵌套文件树

103面包屑路径

104画布小地图

105工作室平面图

106剧场座位图

107换乘路线选择

108时区会议重叠

109每周空闲时间涂选

110日程冲突解决

111任务时长编辑

112节奏步进音序器

113像素图标工作台

114矢量路径钢笔

115渐变色标

116贝塞尔缓动曲线

117间距测量器

118字体样张

119多层阴影

120联动圆角

121网格布局搭建

122图层堆叠顺序

123颜色混合模式

124颜色对比检查

125吸附对齐参考线

126Markdown 双面笔记

127改动片段审阅

128文档查找替换

129可折叠代码块

130CSV 字段映射

131同行人信息录入

132条件分支搭建

133双向单位换算

134按份额分摊账单

135按份数缩放食谱

136信封地址排版

137卡号分组练习

138文档遮盖编辑

139页边批注

140所选文字格式

141快捷键组合录制

142译文短语配对

143会计算的单元格

144列顺序编辑

145逐词修改转写

146JSON 值树编辑

147正则匹配试验

148引文格式排版

149冲突句合并

150文本行清理台

151每周贡献方格图

152可下钻的面积图

153从访问到购买的通路

154能力叠加雷达图

155点选实验的散点图

156揪出离群的箱线图

157服务分层用量图

158连接增减的瀑布图

159每日蜡烛图

160暴露流失的转化漏斗

161周留存客户网格

162变量相关矩阵

163实绩与目标子弹图

164重新分箱的直方图

165预测置信区间带

166日志流错误筛选

167请求耗时跨度分解

168请求耗时瀑布图

169数据表关系图

170故障区间放大时间轴

171预算内资源分配

172盘口深度阶梯图

173测量罗盘校准

174风向玫瑰图

175统一尺度的对比轨道

176版本胶片条

177操作历史分支

178批量选择操作台

179剪贴板便签架

180审批签署栏

181工作量分配器

182排队叫号器

183排序投票单

184角色权限矩阵

185密钥轮换保险库

186设备配对雷达

187入场券核验

188金丝雀发布

189环境晋级门禁

190定时发件箱

191事件回放磁带

192三通道调音台

193呼吸节拍引导

194音频循环区间

195视频章节轨道

196协作控制权交接

197界面引导聚光灯

198网络路径诊断

199完整性校验和

200折叠结算收据

·

在 Agent 里调用

使用方法

这样带走它

  1. 先看,再上手。组件进入视野后会循环播放一段操作演示。你直接点它、或用键盘进入时演示会停下,松手一会儿后从头再来。
  2. 复制提示词会带上组件的完整可运行代码和接入说明。粘到项目里的 AI 工具,补上插入位置即可。
  3. 下载代码文件会把同一个组件存成独立 HTML,自带深色/浅色主题令牌,打开就能看。
  4. 语言、主题、自动演示都在顶部按钮里切换,选择会在下次访问时保留。

交给 AI Agent 完成

安装 lucian-uxui 技能后,Claude Code、Codex 等编码 Agent 能在这个素材库里找到合适的组件,并搬进你的项目。

用一句话说需求
「用 lucian-uxui 技能给页面加上套餐切换和 FAQ」
按编号挑
「用 lucian-uxui 技能加上 056 号组件」
直接调用
Claude Code /lucian-uxui(插件形式 /lucian-uxui:lucian-uxui)· Codex $lucian-uxui

开发备注 · 每个组件的样式和脚本都收在 .ux 和 .uNNN 前缀里。颜色只使用 --ux-* 令牌,接到项目主题变量上即可。