VibeUI 开源 92 组件:VibeCoding 搭建产品页的终极提示词库
近期关于 Qoder 每天免费使用 200 次的活动吸引了大量关注,有朋友的疑问是:200 次能做出什么?今天我们就用一个全新的开源 Skill 来现场演示,看看项目完成之后还能剩下多少额度。
解决 Vibecoding 中的常见痛点
在日常使用 Vibecoding 开发产品时,以下几种情况经常让人头疼:
- 想快速设计一个 SaaS 落地页、产品发布页、Dashboard 应用或者移动端官网,却不知道如何向 AI 准确描述需求;
- 多个页面之间存在大量相同组件,但是每次都要重新生成,难以复用;
- 视觉效果不够理想,产品结构看起来松散混乱。
正是基于这些困扰,我们准备了一套专门为 VibeCoding 优化的提示词库——包含了 92 个精选 UI 组件提示词,划分为 15 个分类。你可以直接用它来驱动 VibeCoding,快速生成标准化、高质量的产品页面。
实际生成效果预览
下面三个完整页面,全部是使用这套 Skill 组合提示词直接生成的:
SaaS Landing Page —— 从导航栏到页脚,一个结构完整的 SaaS 产品页:

AI Product Launch —— 产品发布页面,视觉冲击力拉满:

WeChat Dashboard —— 后台管理界面同样可以轻松处理:

这些页面全程使用 VibeUI 的提示词模板拼合而成,不需要手动编写一行 CSS。
92 个组件覆盖的 15 大产品区块
| 分类 | 数量 | 典型用途 |
|---|---|---|
| Auth Forms 认证表单 | 6 | 登录、注册、魔术链接、多步流程 |
| Pricing 定价 | 8 | 三栏套餐、月/年切换、用量滑动、信用额度 |
| Features 功能亮点 | 8 | 图标网格、Bento 布局、选项卡、前后对比 |
| Hero Sections 首屏区域 | 8 | 分屏版式、视频背景、渐变动画、终端风格 |
| CTA Banners 行动号召 | 7 | 渐变横幅、底部吸底栏、邮件收集入口 |
| Stats Bars 数据统计 | 7 | 数字滚动效果、图标统计、Logo+数据组合 |
| Nav Bars 导航栏 | 8 | 极简导航、Mega Menu、浮动胶囊、透明导航 |
| Testimonials 用户口碑 | 8 | 卡片墙、滚动跑马灯、推文墙、Logo云 |
| Footer 页脚 | 5 | 多列站点地图、极简单行、大Logo、订阅优先 |
| FAQ 常见问题 | 5 | 手风琴展开、聊天气泡、搜索过滤、分类标签 |
| Dashboards 仪表盘 | 6 | 侧边栏、看板视图、三栏布局、空状态提示 |
| Onboarding 新手引导 | 4 | 任务清单、气泡指引、视频引导 |
| Blog 博客版块 | 4 | 杂志化布局、目录侧边栏、筛选卡片 |
| Contact 联系模块 | 3 | 分屏表单、渠道卡片、极简全页 |
| Bonus 附加组件 | 5 | 竞品对比表、公告条、Cookie 提示、404 页面、骨架屏 |
每个分类都提供了多种布局变体。例如 Hero 模块就有 8 种截然不同的风格,从基础的「居中文字+产品截图」到「终端代码动画」「浮动 UI 元素」,总有一种能匹配产品的品牌调性。
灵活的组合页面生成方案
这才是真正趁手的地方——除了单个组件提示词,还内置了 4 套完整的页面组合模板:
SaaS LandingPage:
nv-6+ hr-1+ ft-2+ st-2+ pr-2+ ts-1+ fq-1+ cta-1+ ft-1f
ProductLaunch:
nv-5+ hr-7+ hr-3+ ft-3+ bn-2+ cta-6+ ft-3f
DashboardApp:
nv-4+ ds-1+ ds-5+ ob-1+ ds-6
MobileAppWeb:
nv-8+ hr-6+ ft-7+ ts-2+ pr-6+ cta-3
只需要告诉 AI「帮我做一个 SaaS Landing Page」,它就会按照组合顺序依次生成导航栏、首屏、功能亮点、数据统计、定价、用户评价、FAQ、CTA 和页脚,一个完整的产品页面就诞生了。
智能截图匹配:设计稿即规范
这是整个工具中最让人惊喜的一个功能。
你只需给 AI 提供一张设计稿截图,再指定一个模板编号(如 hr-2),AI 便会自动读取截图中呈现的:
- 颜色方案
- 字体选择
- 间距比例
- 圆角大小
- 阴影风格
完全不需要手动编写一长串 design token,截图本身就是设计规范。
如果没有设计稿,也可以直接给出具体的设计参数:
Create a hero section as a split layout.
Use Inter font, #6366f1 primary color, 12px border-radius, soft shadows.
内置的可视化提示词浏览器
项目还附带了一个独立的 HTML 页面,打开之后可以浏览全部 92 条提示词,功能包括:
- 按分类标签快速切换
- 关键词搜索(支持编号、名称、描述)
- 点击卡片查看完整提示词
- 一键复制到剪贴板

项目跑完之后,剩余的额度依然相当可观:

利用这套 Skill,200 次调用足够你搭建好几个结构完整的商业产品页。过去你可能需要花大量对话去描述“Hero 应该是什么样的”“定价区怎么布局”,现在直接用一个编号就能搞定。
这套提示词模板 Skill,不止能提升 VibeCoding 的工作效率,还可以大幅降低沟通环节中消耗的 token 成本。把反复校准 UI 描述的时间省下来,集中精力打磨内容和业务逻辑——这也正是发起这个项目的初衷:让 VibeCoding 彻底摆脱 UI 细节的纠缠,实现快速交付和持续迭代。