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 细节的纠缠，实现快速交付和持续迭代。