0 代码半天上线！我用 WorkBuddy 做了个 OPC 一人商业闭环官网，普通人也能直接复刻
0 代码半天上线！我用 WorkBuddy 做了个 OPC 一人商业闭环官网，普通人也能直接复刻

发布链接🔗https://mp.weixin.qq.com/s/6qbuz_SitlIRL_ZrjHfy-Q

大家好，这里是程序员晚枫。

我又用AI做了一个完整网站！全程0代码，普通人也能直接复刻

大家好，这里是程序员晚枫。

先放AI生成的网站直达链接：https://www.python-office.com/opc/

上个月我发了一篇文章，说我用WorkBuddy半天时间，全程没写一行代码，做了一个完整的商业科普网站。文章发出去之后，后台直接炸了，几千条留言全在问：

  • 真的不用写代码吗？我零基础也能做吗？
  • 你用的什么AI工具？怎么才能生成能直接运行的项目？
  • 能不能把你用的prompt分享出来？我也想做一个自己的网站！

于是这两周，我又用同一个AI工具，把那个网站全面升级了。
全程依然是0手写代码、0改bug、0调样式，所有开发工作全交给WorkBuddy完成。我只做了一件事：把我想做的内容，用大白话告诉AI。

今天就把完整的过程、核心技巧，还有能直接抄的prompt全部分享给你。看完这篇，哪怕你从来没写过一行代码，也能在1小时内做出属于自己的完整网站。

一、以前做网站有多难，现在用AI就有多简单

我自己是写了十几年代码的程序员，太清楚做一个网站的门槛有多高了。
以前你想做一个能上线的网站，至少要会：

  • 前端：HTML、CSS、JavaScript，还要懂Vue、React这些框架
  • 设计：会做图、会调配色、会排版
  • 部署：会搭服务器、会配Nginx、会解决各种环境问题
  • 运维：会处理bug、会优化性能、会做安全防护

哪怕是一个最简单的单页网站，一个资深前端也要花2-3天才能做完。对于零基础的普通人来说，这根本就是不可能完成的任务。

但现在有了WorkBuddy，一切都变了。
它不是那种只能生成零散代码片段的工具，而是能直接替你做完整个项目。
你不需要懂任何技术，不需要搭任何环境，只需要说清楚你想要什么，它就会自动：

  1. 搭建完整的项目骨架，配置好所有依赖
  2. 拆分组件，写好所有页面和交互
  3. 自动填充专业的内容文案
  4. 生成完整的打包部署步骤
  5. 甚至连不同平台的适配、常见bug的处理，它都提前帮你做好了

这次升级这个网站，我前后只花了不到3个小时。
其中2个小时是在整理我想放的内容，剩下1个小时，就是看着AI自动完成所有开发工作。

二、我是怎么用AI，1小时做出完整网站的

整个过程简单到离谱，一共就5步，零基础也能一步一步跟着做。

第一步：选对AI专家，效果直接翻倍

打开WorkBuddy之后，不要用通用对话，直接进入「专家中心」，选择「前端开发工程师」专家。
这个专家有10年以上全栈开发经验，精通现代Web技术和主流框架，做这种商业内容网站完全是降维打击。
做什么事就选对应领域的专家，效果比你自己跟通用AI磨半天好10倍。

第二步：写一份精准的需求prompt（可直接抄）

这是整个流程最核心的一步。需求写得越清晰、越具体，AI做出来的东西就越符合你的预期，根本不用反复改稿。
我这次升级网站用的完整prompt如下，大家可以根据自己的需求直接修改套用：

1
2
3
4
5
6
7
8
9
10
11
12
13
请使用 Vite + Vue3 + Tailwind CSS 开发一个静态内容官网，主题：
个人创业与AI工具使用指南官网

要求：
1. 全程用Vue3组件化开发，不要原生JavaScript，语法简洁规范
2. 风格：沉稳专业的科技风，深蓝色主色调，全局响应式，完美适配PC/手机
3. 页面结构包含：导航栏、首页Banner、核心内容模块、工具推荐、实操教程、常见问题、底部版权
4. 内容自动填充完整专业文案，围绕AI工具使用、个人效率提升、轻创业方法撰写
5. 项目工程完整：包含vite配置、路由基础结构、组件拆分清晰
6. 必须支持：npm install安装依赖→npm run dev本地运行→npm run build打包dist静态文件，可直接部署到任意静态托管平台
7. 交互只用Vue内置语法实现，不引入复杂第三方插件

最后输出完整项目文件结构 + 全部源码 + 详细部署打包步骤

给新手划3个写prompt的关键重点，照着写就不会踩坑：

  • 先定死技术栈，不给AI模糊选择，避免它生成你不熟悉的代码
  • 把页面结构一条一条列清楚，要什么不要什么写明白，AI就不会漏项
  • 把「可运行、可打包、可部署」作为核心底线写进去

第三步：一键启动，坐等AI完成所有工作

prompt写好之后，选一个本地空文件夹存放项目，然后点击「开始生成」就可以了。
接下来你什么都不用做，看着AI一步步干活就行。它会把整个开发任务拆解成标准化步骤，进度实时可见：

  • 搭建Vite+Vue3+Tailwind项目基础结构
  • 实现导航栏、Banner等核心组件
  • 填充所有页面的内容文案
  • 编写所有交互动画
  • 整合路由和全局样式，完成可运行验证

全程我连键盘都没碰一下，不到1个小时，一整个完整的前端项目就躺在我的文件夹里了。

第四步：本地验证，零报错直接跑通

项目生成完成后，打开终端执行两条命令：

1
2
npm install
npm run dev

依赖秒装，没有任何报错，控制台直接输出本地运行地址。
打开浏览器的那一刻我还是被惊艳到了：完整的页面布局、丝滑的过渡动画、完美的响应式适配，甚至很多细节比我预期的还要贴心。
比如PC端是完整表格，手机端自动变成卡片布局；导航栏点击一键平滑滚动；FAQ点击展开收起，逻辑简洁清晰。

第五步：5分钟打包部署，正式上线

本地验证没问题后，执行npm run build，不到10秒就生成了dist打包文件夹。
连部署步骤WorkBuddy都给我写得明明白白：

  • 腾讯云COS/阿里云OSS：开启静态网站托管，直接上传dist文件夹
  • Vercel/Netlify：直接拖拽dist目录，一键上线
  • 自用Nginx：把dist拷贝到/var/www/html/即可

我把文件传到服务器上，不到5分钟，这个网站就正式上线了。

三、AI做网站，到底强在哪里？

这次全程用AI开发网站的经历，让我最深刻的感受是：技术的门槛，真的被彻底打碎了。

以前，技术是一道墙，把绝大多数普通人挡在外面。你有再好的想法，只要不会写代码，就只能烂在肚子里。
但现在，AI把这道墙推倒了。
你不需要懂技术，不需要会写代码，只需要有一个清晰的想法，能把你的需求用大白话说清楚，AI就能帮你把想法变成现实。

而且AI做出来的东西，质量一点都不差。
它生成的代码符合行业规范，文件结构清晰，组件拆分合理，甚至比很多工作两三年的初级程序员写得还要好。
更重要的是，它的速度是人类的几十倍。以前要花几天才能做完的活，现在AI1个小时就能干完。

省下来的时间，你可以去打磨你的内容、优化你的产品、做更有价值的事。
这才是AI的真正意义：不是取代人类，而是把人类从重复、繁琐、无差别的劳动里解放出来，让我们专注于真正有创造力的事情。

四、最后

网站的链接我再放一次：https://www.python-office.com/opc/
这个网站是我用AI做出来的一个成果展示，里面的内容只是一个示例。
你完全可以用同样的方法，做一个属于你自己的网站：

  • 可以是你的个人作品集，展示你的技能和经验
  • 可以是你的博客，记录你的学习和成长
  • 可以是你的产品官网，推广你的产品和服务
  • 甚至可以是一个兴趣网站，分享你喜欢的东西

在这个AI时代，每个人都应该有一个属于自己的网站。
它是你在互联网上的名片，是你展示自己的窗口，也是你把想法变成现实的第一步。
而现在，有了WorkBuddy，这一切都变得无比简单。

快去试试吧。
你会发现，原来做一个网站，真的可以这么简单。
我是程序员晚枫，我们下篇文章再见。

🎓 AI 编程实战课程

想系统学习 AI 编程？程序员晚枫的 AI 编程实战课 帮你从零上手！