不懂代码不会设计,AI帮我2天搞定公司官网

大家好!这里是正在用AI进行创业的落叶,很高兴在这里与你相遇。

我是谁?

一名普普通通的创业者, 没有过硬的人脉,没有资本的加持,不懂前后端开发,对设计更是一窍不通。

是不是像极了屏幕前的你

为什么开这个号?

不同于行业专家大牛们的成功故事和技术分享,我在这里只想和大家分享AI时代的普通人能做到什么, AI对于普通人来说,能产生怎样的提效和帮助

我相信这会更有启发,因为我能完成的事情,你们一定也做得到。

所以如果你不是普通人就不必往下看了因为我会嫉妒

这个号记录些什么?

  • 我对AI的理解与认知, 也欢迎各路人士的交流探讨
  • 我与AI "员工" 们的日常,如何让它们帮我把想法落地为产品的过程
  • 以及,在这个过程中踩过的坑

俗话说万事开头难,所以作为开篇,我选择一个相对简单的案例: 用AI"员工"们帮我2天打造一个公司官网

重点是简单

为什么从官网开始?

对于一个初创公司来说,官网也是一种门面,也是让人快速认识自己的途径。

更重要的是它还简单

在传统模式下,要么自己花费大量时间学习建站,要么以五位数级别的花销雇佣外包团队,对于资源有限的我来说,显然不是最优解。

主要是没钱

于是,我把目光投向了手边的AI"员工"们。


我的 AI 建站"流水线"

话不多说,先展示成果,这是公司官网地址: www.huanyuliuguang.cn/

具体的流程如下,这些用到的每个工具全网都有很多详细介绍,我就不在这里展开了,如果各位看官对某一个工具特别感兴趣,我也可以单独开一篇文章去介绍它。

1. 网站设计

负责"员工": MasterGo AI&DeepSeek R1

目标: 确定网站的整体视觉风格,并生成设计稿。

为什么用它:

之前在项目中用过蓝湖,MasterGo是蓝湖旗下的设计产品 (有免费额度),用起来相对习惯一些,感觉对于简单设计需求还比较好用。

目前似乎主流的设计工具都推出了AI功能,类似的还有Figma、Pixso等等,大家可根据自己的习惯选择工具使用。

过程:

  1. 梳理企业要展示的板块(即网站顶部导航) 和内容并给到DeepSeek,让它给你生成一份参考文档
  2. 如果没有什么灵感,也可以直接让DeepSeek帮你生成一个参考,再自己做修改
  3. 把参考文档"喂"给Mastergo AI生成设计初稿
  4. 再跟MasterGo AI沟通修改几轮,得到设计终稿。最终经过几十轮的沟通我还是觉得第一版最好 (并没有)

2. LOGO&素材

负责"员工": 即梦3.0&GPT 4o

目标: 官网所需的LOGO、图标、配图等视觉元素。

为什么用它们:

  • 即梦3.0-目前汉字生成领域的最强王者 (有免费额度)
  • GPT 4o-用嘴改图的顶尖选手 (需要魔法,有免费额度)

过程:

① 明确logo的类型 (纯文字、纯图案还是文字图案的结合、上下结构还是左右结构等)

② 打开即梦,把自己的想法告诉DeepSeek(即梦自带),并基于给出的优化版提示词,生成logo,选择自己相对满意的

Logo创作示例,这也是个需要多次抽卡的过程

③ 如果想对一些地方做小的调整 (如把背景调成透明),可以直接把图像丢给GPT 4o,告诉他如何修改

GPT-4o改图示例

④ 素材的生成同理,当然你也可以选择去Unsplash之类的网站去找无版权素材,但AI能更准确的创造你理想中的图 (而且这是一篇介绍AI工具的文章)

3. 需求文档

负责"员工": Gemini 2.5Pro/Claude 3.7 Sonnet/DeepSeek R1等

目标: 将设计稿和功能要求转化为清晰、结构化的需求文档,以便后续开发。

为什么用它:

几个大模型没有明显的优劣之分,生成的文档也各有千秋,基于个人喜好使用即可

过程:

  1. 在网上找一些比较标准的需求文档结构,作为参考示例给到AI"员工"
  2. 如果感觉有遗漏可以补充提示词再进行优化
  3. 可以多找几个AI员工对比他们生成的结果,选最符合自己要求的使用 (谁说小团队就不能搞赛马机制)

需求文档示例

4. 开发实现

负责"员工": Cursor

目标: 将设计稿和需求文档转化为实际可运行的网站代码。

为什么用它:

老牌 AI 编程工具 (需要魔法&付费),集成了最强的代码大模型Claude 3.7 SonnetGemini 2.5Pro

至于和Windsurf、Cline等其他工具或者插件相比谁更强,没有定论,看个人习惯就好。

字节的Trae海外版是免费的,也能用到Claude 3.7 Sonnet,但是时常要排队,个人觉得体验相对差了些。

如果没有魔法,建议用Trae的国内版,同样免费,还可以用到目前国内模型中编码最强的DeepSeek V3-0324。

过程:

把上面的设计图和需求文档"喂"给Cursor,3分钟就能生成一个可看的网页。

这里真的是不到3分钟,这也就是为什么你可能见过很多自媒体说,用AI编程工具几分钟就可以用嘴创建一个网站,指的应该就是这一步了。

所以我说用了2天真的很良心没有标题党对不对

5. 调试与迭代

负责"员工": 还是Cursor

目标: 修复BUG,优化体验。

为什么用它: 当然是谁写的谁改

过程:

在第四步生成的东西长这样:

初步生成的网页效果

和最终呈现还是有不小的区别。

所以我们需要按照最初的设计,不断告诉Cursor该如何优化它。

好在这一次的沟通整体比较顺利,最终达成了现在展现出来的模样。

负责任的说,调试消耗的时长会远远大于开发,对于复杂项目来说更是如此。

这也是为什么很多人看了自媒体宣传的几分钟可以用嘴生成一个产品,但是亲自体验以后很快被劝退的原因。

虽然我猜屏幕前的你甚至还没有体验过

6. 部署上线

负责"员工": Gemini 2.5Pro,执行员工:

目标: 将网站发布到公网,让大家可以访问。

为什么用它:

其实当下有很多一键部署的网站或工具,但毕竟这是公司官网,还是要挂到自己的域名下的。所以作为完全没有部署经验的小白,选择了当下综合能力最强的Gemini 2.5Pro(需要魔法) 作为指导专家。

过程:

大体来说,我在Gemini的指导下完成了这些操作:

购买云服务器------设置安全组规则------远程登录并安装环境------通过FTP上传文件------通过NPM设置地址和路径------解析域名------购买SSL证书并部署。

不需要理解每一步是什么意思,让AI详细告诉你在哪操作什么输入什么,必要的话让它解释给你听每一步是在干什么,遇到错误就直接贴给它问是怎么回事, 再根据它的解决方案去做。

当然这个过程还是很磨人的,AI在这里暂时也只能起到指导作用 (毕竟是完全从0部署到一个新的云服务器上)。

所以想省时间的朋友还是找个技术帮忙吧

磨人过程节选

Tips: 这里还需要提前购买域名并做好备案, 因为这一步不是在这两天做的, 就不展开介绍了


一些感想

其实从上面的过程中也能看到,即使公司网站是开发项目中相对简单的一个,完整的做出来也有不少步骤。

我不想为了博人眼球,就找一个类似做贪吃蛇小游戏这样的案例来告诉大家,AI现在一键就能完成很多事情,毕竟在真实的工作中,是很难有这种常规又独立的项目给你做的。

但我想让大家看到,在这个项目里AI参与了每一个流程, 而且真实的提升了很大的效率

想一想你所在的公司,做官网花了多少成本、人力和时间,性价比又如何?

AI还远没有达到能完全替代一项工作 的阶段,即便是AI能力较强的写文案、编程和设计等领域,也依然需要和它反复沟通;而当下火热的各类Agent,执行效果也远不及我们看到的宣传视频。

所以对AI"员工"们的熟悉程度非常重要, 了解每个AI的特长,就等于知道了怎样才能更好地榨干它们的价值找到合适的"员工"来为你打工。

事实上,无论是上面提到的Gemini,还是即梦、Cursor,都有不少进阶的玩法, 关于这些,我也会尝试在今后用案例的形式,做更多的分享。

当然如果做不出来可能也就断更了


写在最后

非常感谢能读到这里的朋友。

如果你对AI应用、AI创业,或者我正在做的事情感兴趣,欢迎关注、给我留言, 也期待看到更多的想法和交流~

相关推荐
0wioiw02 分钟前
深度学习(对抗)
人工智能·深度学习
工头阿乐11 分钟前
卷积神经网络(CNN)可视化网站汇总
人工智能·神经网络·cnn
带娃的IT创业者28 分钟前
《AI大模型应知应会100篇》第15篇:大模型训练资源需求:算力、数据与成本分析
人工智能
DUTBenjamin34 分钟前
计算机视觉6——相机基础
人工智能·计算机视觉
睡觉zzz1 小时前
React写ai聊天对话,如何实现聊天makedown输出转化
前端·人工智能·react.js
deephub1 小时前
PyTorch CUDA内存管理优化:深度理解GPU资源分配与缓存机制
人工智能·pytorch·python·深度学习·英伟达
菜小包1 小时前
通义万相 vs 豆包:AI领域文生图/文生视频全面对比
人工智能
Lx3521 小时前
📌《AI生成代码的边界测试:哪些场景人类仍需主导》
人工智能
Qiu的博客1 小时前
一文读懂 AI
人工智能·算法·开源
孔令飞1 小时前
Go 1.24 新方法:编写性能测试用例方法 testing.B.Loop 介绍
人工智能·云原生·go