乐于分享
好东西不私藏

不会代码的我,用AI Agent 30分钟搭了一个完整网站:只需要3步

不会代码的我,用AI Agent 30分钟搭了一个完整网站:只需要3步

导读:我想做一个个人作品集网站。不会代码,不懂设计,预算为零。找外包要几千块,学代码要几个月。最后我用AI Agent,花了30分钟,说了3句话,搞定了。全文约2000字,附完整Prompt模板。

作者: RJ创意屋

发布时间: 2026-06-05


一、你是不是也这样

你想做一个网站。

可能是个人作品集。

可能是产品落地页。

可能是一个活动报名页面。

但你不会写代码。

你打开某宝搜"网站外包",报价3000起。

你打开B站搜"HTML教程",第一集还没看完就困了。

你打开Wix/秀米,拖了半天,做出来的东西像2005年的QQ空间。

然后你放弃了。

"算了,等我会编程了再说。"

但现在,这个借口已经不存在了。

因为AI Agent可以把你的自然语言,直接变成可访问的网站。

不是模板,不是拖拽,是定制化代码。


二、什么是AI Agent搭网站

简单说,就是你说人话,AI写代码

你给AI Agent一段自然语言描述:

"我要一个个人作品集网站,深色背景,左侧放头像和简介,右侧放作品网格,点击作品弹出详情。"

AI Agent会:

  • • 写出完整的HTML/CSS/JavaScript代码
  • • 设计布局和配色
  • • 添加交互效果
  • • 给你一个可点击的预览

你只需要描述,它负责实现。

我用的是Claude Code + v0的组合。

你也可以用Cursor、GitHub Copilot、或者国内的AI编程工具。

原理一样:自然语言→代码→网站。


三、我实测了30分钟,这是完整时间线

00:00-05:00:描述需求

我打开Claude Code,输入了一段Prompt:

"我要一个个人作品集网站。要求:

  • • 深色背景,科技蓝强调色
  • • 顶部导航栏:首页、作品、关于、联系
  • • 首页:大标题+副标题+CTA按钮
  • • 作品页:网格布局,6个项目卡片,每张卡片有图片、标题、标签
  • • 关于页:左侧头像,右侧文字介绍
  • • 联系页:表单(姓名、邮箱、留言)
  • • 风格:简洁、现代、有点酷"

05:00-10:00:AI生成初版

Claude Code开始工作。

生成HTML结构、CSS样式、JavaScript交互。

10分钟后,一个基础网站框架出来了。

10:00-20:00:迭代调整

我看了一眼预览,提修改意见:

"卡片hover效果太生硬,加个平滑过渡。"

"联系表单的按钮颜色改成和导航栏一致。"

"作品页加上分类筛选功能。"

AI逐条修改,每改完一条给我新预览。

20:00-25:00:微调细节

换了一张更合适的头像。

调整了标题字体大小。

加了一个简单的加载动画。

25:00-30:00:部署上线

用Vercel一键部署。

复制链接,粘贴到浏览器。

网站活了。


四、3步上手,你也可以

看完我的过程,你可能觉得"好复杂"。

其实核心就3步。

Step 1:说清楚你要什么

这是最关键的一步。

AI能做多好,取决于你说得多清楚。

一个好的需求描述,包含4个要素:

       
                                           
要素示例
类型个人作品集/产品落地页/活动页面
结构几个页面、每个页面有什么模块
风格简约/科技/复古/活泼/商务
配色深色背景+蓝色强调/白色+橙色/具体色值
       
     

Prompt模板(直接复制修改):

我要一个[类型]网站。
要求:
- 整体风格:[风格描述]
- 配色:[主色+强调色]
- 页面结构:
  1. [页面1]:[内容描述]
  2. [页面2]:[内容描述]
- 交互:[需要的交互效果]
- 参考:[如果有喜欢的网站,贴链接]

说越清楚,AI做得越准。

Step 2:看预览,提修改

AI生成初版后,不要急着满意或否定。

先看,再想,再说。

看整体布局是否顺眼。

想哪些地方不对、哪里需要加、哪里需要减。

然后用最直白的语言告诉AI:

"标题太大了,缩小20%。"

"这个按钮点完没反应,加一个跳转。"

"配色太暗了,背景调亮一点。"

AI不怕你要求多,怕你说不清。

Step 3:一键部署,拿到链接

网站调好了,怎么让别人访问?

最简单的方式:Vercel或Netlify。

把代码文件夹拖进去,5秒钟,给你一个https链接。

不需要买服务器,不需要配域名,不需要懂任何技术。

如果你想正式一点,花几十块买个域名,绑定上去。

全程不需要写一行代码。


五、但它不是万能的

说完优点,说边界。

AI Agent搭网站,有3个明确的天花板。

天花板一:复杂后端做不了

用户注册登录、支付系统、数据库管理——这些需要后端逻辑。

AI Agent可以生成前端页面,但复杂的后端还需要开发者介入。

天花板二:极致的设计感达不到

如果你要的是苹果官网级别的视觉设计,AI目前做不到。

AI能做出"好看"的,但做不出"惊艳"的。

天花板三:需求模糊时容易跑偏

如果你说"给我做一个酷一点的网站",AI会猜你的"酷"是什么。

可能猜对,可能猜错。

需求越具体,结果越精准。


六、结尾:创意的门槛,正在被抹平

30分钟,3句话,一个网站。

这在2年前是不可想象的。

那时候,做一个网站需要:

设计师出图、前端写代码、后端搭服务器、测试调Bug。

一个团队,几周时间。

现在,一个人,30分钟。

这不是技术的胜利。

是创意的胜利。

因为当"实现"不再是问题时,"想法"本身就变得值钱了。

你不需要会写代码。

你需要的是:知道你要什么,并且能说清楚。

AI负责执行,你负责思考。

这才是AI时代,普通人最大的机会。