零基础用AI搭建个人网站：30分钟从零到上线

前言

2026年，AI已经可以帮你完成80%的网站搭建工作。我见过太多零编程基础的人，30分钟做出一个像模像样的网站。

一、工具选择

v0.dev —— 设计转代码

Vercel出品，输入设计描述，输出React组件代码。适合做首页、落地页。

Cursor —— AI编辑器

在VS Code基础上深度集成AI，可以基于已有代码继续开发。

Claude —— 完整页面生成

200K上下文可以一次性理解整个项目结构，适合生成完整页面。

Bolt.new —— 全栈生成

输入一句话描述，直接生成完整Web应用并部署。

二、实战步骤

第1步：设计规划（5分钟）

用纸笔或Figma画一个简单草图。一个标准网站包括：

• 导航栏（Logo + 菜单 + 按钮）
• Hero区域（大标题 + 副标题 + CTA按钮）
• 特性展示（3-6个卡片）
• 页脚

第2步：用AI生成代码（15分钟）

打开v0.dev，输入：

设计一个AI工具导航网站的首页，风格为暗色赛博朋克主题。包含：导航栏、Hero区域、工具卡片网格、页脚。使用React + Tailwind。

AI会生成完整组件代码，你可以在预览中实时调整。

第3步：部署到Vercel（5分钟，免费）

1. 在vercel.com注册账号
2. 导入你的GitHub仓库
3. 自动部署，获得 https://你的项目.vercel.app 域名

第4步：绑定自定义域名（5分钟）

在域名注册商（如阿里云）添加DNS记录指向Vercel，即可使用你自己的域名。

三、进阶技巧

• 用Cursor迭代修改：部署后发现不满意？在Cursor中打开代码，用Cmd+K自然语言修改
• AI写内容：用Claude生成产品描述、博客文章、FAQ
• AI做图：用Midjourney生成网站插图
• AI做SEO：让AI帮你写meta标签、生成sitemap

四、成本

总成本：不到100元就能拥有一个专业网站。

2026年，不会写代码已经不是做网站的障碍。唯一需要的是审美和产品感。