手搓了一个vibe coding平台，还能自动部署给公网链接？这波属于是给产品经理递刀子了

汪汪队犯大错
2 阅读7分钟

Hi～朋友们好呀。

我是 ztczll，一个热爱瞎鼓捣的项目经理。最近加班加麻了，每天都在跟产品经理 battle：“这个需求到底要不要做？做了用户真的买账吗？要不你先画个原型我看看？”……

等等，画原型？那不是还得等设计出图、前端开发，折腾好几天才能看到个能点的东西？

作为一个懒人，我实在忍不了。于是趁着周末，我手搓了一个叫 VoteKit 的平台。简单来说，它干了三件事：

  1. 让用户提交需求并投票，用脚（划掉）用票数决定优先级。
  2. 高票需求，一键触发 AI，自动生成带行业特色的网站源码（餐馆、学校、奶茶店……都行）。
  3. 生成完还不算完，系统直接自动构建、部署，丢给你一个能公网访问的 HTTPS 链接。

产品经理只需要把链接丢给客户：“您瞅瞅，这是不是您要的内味儿？”

360截图20260311165943.png

今天就厚着脸皮来聊聊这个项目的两个“骚操作”核心亮点，标题党一点说，这可能是给产品经理递的最锋利的一把刀（也可能是给开发同学摸鱼争取时间的绝佳借口）。

💡 亮点一：AI 生成不是“套模板”，我给 AI 喂了各行各业的“祖传代码”

现在很多 AI 生成代码的工具，你让它“做个官网”，它给你搞个“Hello World”级别的静态页面，或者一个千篇一律的 Bootstrap 样板房。这哪行？我要的是有灵魂的代码。

VoteKit 做了两件有点不一样的事：

1. 集成了 Cursor 的云端 Agent 和 Kiro 的 CLI 能力

我没有简单地调一个大模型 API 让它自由发挥（那样生成的东西太飘了）。我把 Cursor 那种能看懂整个项目的云端 Agent，和 Kiro 那种能稳定产出工程化代码的 CLI 能力，封装到了后台的 Forge 引擎里。

当用户点击“生成”时，系统会把需求描述扔给这个混合引擎。它不是零基础写代码，而是像一个资深程序员一样，理解上下文，然后调用合适的“工具”去生产。

2. 给 AI 配了“行业技能包”（Skill）

这是我觉得最有趣的部分。不同行业的官网，讲究可太多了：

  • 餐馆：要有精美的菜单、在线订座、招牌菜推荐。
  • 奶茶店：新品海报要显眼、加盟入口要直接、最近门店要能定位。
  • 学校：新闻动态要滚动、招生信息要置顶、校园风光要大图展示。

我为每个行业都预置了一个“技能包”（Skill）。这个技能包里，有该行业的典型页面结构、常用的 UI 组件，甚至是 SEO 关键词的写法。AI 生成时，会根据需求的分类（比如用户提交时选了“餐饮”标签），自动加载对应的技能包。、

根据用户选择的行业，加载对应的元模板：

- **餐饮食品** → `references/meta-templates/food-beverage.yaml`
- **文化旅游** → `references/meta-templates/culture-travel.yaml`
- **零售电商** → `references/meta-templates/retail-ecommerce-v2.yaml`
- **教育知识** → `references/meta-templates/education.yaml`
- **生活服务** → `references/meta-templates/life-service.yaml`
- **企业应用** → `references/meta-templates/enterprise.yaml`

### 元模板包含：

1. **技术栈配置**（tech_stack）：展示型/互动型的框架选择
2. **页面结构**（pages）：路径、sections、字段定义、变体
3. **数据模型**（data_models）：Prisma schema 字段 + 子分类变体
4. **API 路由**（api_routes）：RESTful 端点列表
5. **功能标签影响**（available_features）：每个标签的影响范围和依赖
6. **设计风格映射**（style_mappings）：颜色、字体、圆角、原型引用
7. **演示模式配置**（demo_mode）：mock 数据数量、seed 脚本

### 字段变体处理：

如果识别到子分类（如"新式茶饮"），自动应用对应变体：
- 预约表单添加：糖度选择、冰度选择
- 商品模型添加：sugar_options, ice_options 字段

如果识别到子分类（如"时尚服饰"），自动应用对应变体：
- 商品详情添加：尺码选择、颜色选择
- 商品模型添加：sizes, colors 字段

360截图20260311170016.png 所以，生成出来的代码，天生就带着那个行业的“基因”。不再是千篇一律的模板，而是可以直接拿去给客户演示的“准成品”。

微信图片_20260306154805_15099_132.png

这种“行业定制化”的生成，让原型不再是玩具，拿去忽悠（划掉）说服 stakeholders 的底气足了很多。

⚙️ 亮点二：代码生成了，还要用户自己跑？不存在的！Caddy+Jenkins+Docker Compose 一条龙送走

说实话，如果 AI 生成了一堆源码，然后让用户自己去 npm install、npm run dev，那体验基本就废了。绝大多数产品经理和业务同学，看到命令行窗口就头大。

我的目标是：点击生成，刷会儿手机，回来就能点开链接看到效果。

所以，我整了一套轻量级的自动化构建部署流水线，核心成员有三位：

  • Jenkins：像个勤劳的监工。它盯着 Git 仓库，一旦有 AI 生成的新源码推上来，立刻拉取代码，执行构建命令（npm run build）。
  • Docker Compose：构建产物（比如 dist 文件夹）会被打包进一个 Nginx 镜像里，然后用 docker-compose up 一键启动服务。每个原型都是独立的容器，环境隔离，互不打架。
  • Caddy：这是最骚的一步。Caddy 会自动为每个新启动的服务，分配一个像 restaurant-abc.votekit.demo 这样的子域名，并且自动申请和续签 HTTPS 证书！没错，打开就是一把绿色的小锁，安全感拉满。

整个流程全自动，像这样：

你点“生成” → AI 吭哧吭哧写代码 → 推送到 Git
    ↓
Jenkins 嗅到新代码 → 拉取 → 执行构建
    ↓
构建产物打包成 Docker 镜像 → docker-compose up
    ↓
Caddy 自动分配子域名 + HTTPS
    ↓
你的手机收到推送：“您的原型已就绪：https://awesome-restaurant.votekit.demo”

360截图20260311170130.png

用户根本不需要知道服务器、端口、域名是啥。只需要把那个以 https:// 开头的链接，优雅地甩到群里，然后深藏功与名。

🧱 项目技术栈一览（极简版）

  • 前端：Vue 3 + TypeScript + Vite + Element Plus（谁用谁知道，快就一个字）
  • 后端：Node.js + Koa + TypeScript + Knex（写起来挺顺手的）
  • 数据库：MySQL 8.0 + Redis
  • AI 服务：DeepSeek / Coze（可配置，想切哪个切哪个）
  • 核心引擎：Go（Forge Engine，负责和 AI 与构建流程打交道）
  • 部署流水线：Jenkins + Docker Compose + Caddy（这套组合拳打下来，真的很省心）

整个项目已经开源在 GitHub 上，完全前后端分离，想自己玩一把或者二次开发，都很方便。

🌟 如何上手体验？

你可以通过两种方式感受一下“手搓”的快乐：

  1. 本地跑起来：按照 快速开始 的指引，用 Docker Compose 一键启动所有服务，自己当管理员玩玩。
  2. 直接看源码：戳这里 👉 GitHub 仓库，给个 Star 不迷路。

🔮 最后，聊聊未来（和请求）

VoteKit 目前还是个“新生儿”，肯定有不少 bug 和考虑不周的地方。我接下来的计划是：

  • 塞更多行业技能包：电商、SaaS、企业官网……争取覆盖全宇宙。
  • 接入更多 AI 模型：让大家有更多选择，甚至可以对比哪家生成的“更香”。
  • 生成质量再卷一卷：通过检索历史优秀原型，让 AI 学会“借鉴”自己的优秀作业。

如果你觉得这个项目有点意思，或者对你有点用，麻烦在 GitHub 上给我点个 ⭐️ Star 吧！你的 Star 是我周末继续“手搓”下去的最大动力。也欢迎来提 Issue 或 PR，一起把这个给产品经理“递刀子”的平台做得更好！

GitHub 仓库：github.com/ztczll/vote…

如果这篇文章让你笑了一下，或者觉得有点东西，欢迎点赞、收藏、分享。咱们评论区见！

avatar
文章
阅读
粉丝