不写一行代码，用Gemini+Qoder两小时上线个人网站

人人都能做网站的时代已经到来

在AI高速发展的今天，做一个个人网站的门槛已经降到了前所未有的低点。B站UP主邱杨Chris用亲身实践证明：不写任何一行代码，仅用一个多小时，就能通过AI工具完成一个功能完善、视觉精美的个人网站，并成功部署上线。

他使用的核心工具组合是：Gemini 3（Google最新爆火模型）负责生成前端代码，Qoder（AI编程工具）负责调试和部署。这套工作流展示了Vibe Coding（氛围编程）已经进化到了怎样的程度。

Vibe Coding（氛围编程）是由 AI 领域知名人物 Andrej Karpathy 在2025年初提出的概念。它描述的是一种全新的编程范式：开发者不再逐行编写代码，而是通过自然语言向 AI 描述自己想要的效果和"氛围"，由 AI 负责生成具体的代码实现。开发者的角色从"代码编写者"转变为"意图表达者和质量审核者"。这个概念之所以引发广泛讨论，是因为它从根本上改变了"谁能做软件"这个问题的答案——编程能力不再是瓶颈，清晰的需求表达和审美判断成为了核心竞争力。

个人网站展示

为什么每个人都需要一个个人网站？

在互联网时代，个人网站就是你的「电子名片」。无论你是学生、职场白领、工程师还是艺术创作者，都需要一个载体来集中展现你的作品和内容。

邱杨的个人网站主要包含三个部分：

个人介绍：姓名、Title（软件工程师和科技博主）、外部链接（GitHub、小红书、B站）、联系方式
内容创作：文章和视频的摘要展示，点击可跳转原文
项目展示：开源项目和产品，如OpenCrossGame、穿搭灵感AI应用等

网站还加入了动态光影效果——鼠标移动到面板上会有光影跟随，整体呈现科幻风格，视觉体验相当出色。

第一步：用Gemini 3生成前端代码

Gemini 3 是什么？

Gemini 3 是 Google DeepMind 于2025年推出的最新一代多模态大语言模型，属于 Gemini 系列的重大迭代。与前代相比，Gemini 3 在代码生成、图像理解与生成、长上下文处理等方面都有显著提升。它之所以在建站场景中表现突出，是因为它能够同时理解用户的自然语言描述、参考网站的视觉布局，并直接输出可运行的 HTML/CSS/JavaScript 代码。这种"看一眼就能仿写"的能力，本质上依赖于模型在海量开源网站代码和设计素材上的训练，使其具备了将视觉设计意图转化为前端代码的跨模态推理能力。

核心提示词策略

整个网站的前端代码完全由Gemini 3生成，关键在于如何与AI进行有效的交互。邱杨总结了几个关键的提示词策略：

1. 明确需求描述：告诉Gemini你要做一个个人网站，交代背景信息，说明要展现哪些内容模块。

2. 善用复刻能力：这是邱杨特别强调的一点——Gemini 3的网站复刻能力非常强。你可以找到喜欢的网站风格，把链接直接给Gemini，让它模仿生成类似效果，再在此基础上做细节调整。这种能力的背后，是 Gemini 3 强大的多模态理解——它不仅能"读懂"网页的源代码结构，还能从视觉层面理解页面的布局、配色和交互逻辑，然后将这些设计语言转化为全新的代码实现。

3. 迭代式优化：

背景质感不满意？告诉它「不要磨砂质感，要科幻风格」
图标不好看？找到更好的图标素材提供给它替换
交互细节？比如「鼠标移动到icon时显示对应平台名称」

Gemini生成科幻风格页面

关于图片生成

当需要特定风格的背景图时，邱杨会让Gemini调用图片生成能力来生成科幻风格的素材，实现文字与视觉的统一。Gemini 3 的多模态能力意味着它可以在同一个对话中既生成代码又生成图片，这种"一站式"的创作体验大大减少了在不同工具之间切换的摩擦成本。

第二步：用Qoder调试和部署

Qoder 是什么？

Qoder 是一款 AI 驱动的编程辅助工具，定位类似于 Cursor、Windsurf 等 AI IDE（集成开发环境）。它的核心价值在于提供了一个对非技术用户友好的界面，让用户可以通过对话方式完成代码调试、文件管理和项目部署等操作。与直接在 Gemini 网页端生成代码不同，Qoder 提供了完整的项目管理环境——你可以在其中预览网页效果、修改具体文件、运行本地服务器，以及执行 Git 和部署命令。它本质上充当了"AI 与实际开发环境之间的桥梁"，让不懂命令行操作的用户也能完成从代码到上线的最后一公里。

本地调试流程

Gemini生成的代码是一个完整的前端项目，但其中的链接和内容都是模板化的占位符。接下来需要在Qoder中完成个性化替换和调试。

具体操作流程：

将Gemini生成的代码复制粘贴到Qoder项目中
告诉Qoder「请在本地浏览器启动，我要调试」
通过提示词进行内容替换，例如：「我有三个创作系视频，对应链接是这些，请生成摘要并更新article and video部分」
指定交互细节：「点击摘要时跳转外部链接，注意开启新页面跳转」

Qoder中调试内容替换

Git Commit：版本管理的安全网

邱杨特别为非技术背景的观众解释了Git Commit的概念：它相当于给代码打一个「快照」。当你对某个版本满意时，就做一次commit保存下来。

Git 是由 Linux 之父 Linus Torvalds 于2005年创建的分布式版本控制系统，如今已成为软件开发行业的事实标准。每次 commit 实际上是将项目所有文件在当前时刻的完整状态记录下来，并附上一段描述信息。

这样做的好处是：即使后续修改把页面改得面目全非，你也可以随时回退到之前满意的版本。对于Vibe Coding来说，这个习惯尤为重要——因为 AI 每次生成的代码可能存在不可预测的变化（比如你只想改一个按钮颜色，AI 却顺手重构了整个页面布局），频繁 commit 就像在游戏中频繁存档一样，确保你随时可以"读档"回到任何一个满意的状态。这是人机协作开发中最重要的安全实践之一。

Git Commit版本管理

一句话完成部署上线

调试满意后，部署过程极其简单：直接告诉Qoder「把项目部署到Vercel」。

Vercel 是目前全球最流行的前端托管和部署平台之一，由 Next.js 框架的创建者 Guillermo Rauch 创立。它之所以成为零代码建站的理想选择，是因为它将传统上极其复杂的部署流程（购买服务器、配置环境、设置 HTTPS 证书、CDN 加速等）简化为了近乎一键的操作。Vercel 采用边缘网络（Edge Network）架构，会自动将你的网站分发到全球数十个节点，确保访问者无论身处何地都能快速加载。免费套餐对个人项目完全够用，包含每月100GB带宽和自动 HTTPS 加密。

你只需要：

在Vercel注册账号
让Qoder执行部署命令
部署完成后获得一个默认域名，即可访问

如果你有自己的域名，还可以通过DNS映射将自定义域名指向Vercel，让访问地址更加个性化。DNS（Domain Name System，域名系统）是互联网的"电话簿"，负责将人类可读的域名（如 example.com）翻译为计算机可识别的 IP 地址。具体操作是在你的域名注册商（如 Cloudflare、阿里云、GoDaddy 等）的管理面板中，添加一条 CNAME 记录，将你的域名指向 Vercel 提供的地址。这个过程通常只需要几分钟配置，但 DNS 记录的全球生效可能需要几分钟到48小时不等。拥有自定义域名不仅让网址更专业、更易记，也有助于建立个人品牌的长期数字资产。

完整工作流总结与思考

整个零代码建站流程可以概括为：

Gemini 3（创意+代码生成）→ Qoder（调试+个性化）→ Vercel（部署上线）

时间成本：约1-2小时
技术门槛：零代码基础即可
核心能力：清晰表达需求 + 审美判断 + 耐心迭代

这个案例的意义不仅在于做了一个网站，更在于展示了一种新的创作范式：你不需要会写代码，但你需要知道自己想要什么。AI负责实现，你负责决策和审美。正如邱杨在网站slogan中写的：「任何人都可以通过AI去构建个性化的生活。」

这种范式转变的深层含义值得我们思考：当代码生成被 AI 接管后，"会编程"这件事的定义正在被重新书写。未来的核心技能可能不再是掌握某种编程语言的语法，而是具备清晰的产品思维、良好的审美品味，以及与 AI 高效协作的沟通能力。

对于想要尝试的朋友，建议从模仿一个喜欢的网站风格开始，利用Gemini的复刻能力快速生成初版，再通过反复对话迭代到满意为止。技术门槛已经不再是障碍，真正的门槛是你愿不愿意花两个小时动手试一试。