▚Vibe Coding 导航
codenav.cc

一小时上线你的产品

免费选型器 + 免费能力库 + 付费成品模板：像配电脑一样组装你的开工提示词； 不想从零搭，就直接买一套接好登录/支付的 Ship 模板。

7 套技术栈选型
8 种Vibe 能力
13 套设计风格
国内可用支付宝直付
免费 · 第 ① 步

选模板 · 技术栈选型器

粗略选两下就行，不用太严谨——推荐的都是被大型开源项目验证过的架子。好架子 = 好 Context = AI 飞轮：AI 见得多的结构越写越顺；烂的开始，走起来只会越来越烂。

① 做哪个平台？
② 更在意什么？（可选，至多 2 个）

↑ 选一下平台，立刻给你推荐

免费 · 第 ② 步

挑风格 · 设计风格风格详情页（大图 + 完整提示词）→

悬停卡片直接看该风格的真实页面效果，点击打开完整 Demo；选中就加入清单，也可以自己描述风格。

✍️ 自定义风格Describe your own

现有风格不合口味？用你自己的话描述，AI 会照着发挥。

🎨 去风格详情页：大图预览 · 完整提示词 · 一键套用本站 →
免费 · 第 ③ 步

加能力 · Vibe Coding 能力库能力库详情页（含开源项目）→

最近大火的开源能力——手势追踪、3D 地球、物理动效……每张卡都是「开源项目验证过的玩法 → 直接可用的提示词」。

🤖

接入真实 AI 大模型

难度 · 低

把 DeepSeek / 通义千问等真实大模型接进产品，做问答 / 摘要 / 内容生成

deepseek + vercel/ai（AI SDK）
🔑 需自备 API Key申请与接入教程 →
🗄️

云数据库（Cloudflare D1）

难度 · 中

给产品加一个免费的云端数据库，存用户 / 订单 / 内容，本站同款方案

cloudflare D1 + drizzle-orm
看教程 →
🖐️

手势追踪控制

🌐 网页端难度 · 中

摄像头识别 21 个手部关键点，捏合/挥手直接操控页面元素

google-ai-edge/mediapipe
🌍

可旋转 3D 地球

🌐 网页端难度 · 低

自转地球 + 任意经纬度打点/飞线，拖拽交互

shuding/cobe（轻量）/ vasturiano/globe.gl（全能）
🧊

3D 场景与产品展示

🌐 网页端难度 · 中

滚动联动相机的 3D 展示页，加载 glTF 模型

pmndrs/react-three-fiber + drei
💬

AI 对话流式界面

难度 · 低

打字机流式输出的 AI 对话框，国内模型直连

vercel/ai（AI SDK）
🎱

物理动效

🌐 网页端难度 · 低

重力、碰撞、可抛掷的页面元素，手感极佳

liabru/matter-js
🎬

滚动叙事动效

🌐 网页端难度 · 中

滚动驱动的分镜叙事：钉住、视差、逐帧联动

greensock/GSAP（ScrollTrigger）/ motiondivision/motion
📊

数据大屏 & 中国地图

🌐 网页端难度 · 低

省市下钻的中国地图、飞线图、实时大屏

apache/echarts
🎭

人脸/姿态特效

🌐 网页端难度 · 中

人脸贴纸、表情驱动、全身姿态体感小游戏

google-ai-edge/mediapipe（Face/Pose Landmarker）
⚡ 去能力库详情页：明星开源项目 · 一键跑起来的启动指引 →
🧩 能力是免费的，时间是贵的——登录、支付、订单这些自己搭联调要 5-7 天，Ship 模板帮你把这一周完整省下来 →
第 ⑤ 步 · 上线

部署上线，让所有人访问到部署教程 →

产品跑起来之后的最后一步。两条路线都有手把手教程，每篇顶部还有「复制文档给 AI 部署」按钮——丢给你的 Agent，它替你跑完。

Vercel 部署

最简单：绑 GitHub 自动部署，十分钟上线，含国内 CNAME 优选方案

看教程 →Cloudflare Workers 部署

带登录/支付/数据库的完整产品：D1 免费数据库 + SaaS 国内优选（本站同款）

看教程 →