不懂代码，通过 AI 编程，3 天从零搭建一个完整的网站实践总结

本篇文章面向不具备编程基础的读者，旨在通过一篇文章让你彻底了解：如何通过 AI 编程，从零到一搭建一个完整可行的商业项目。

首发于微信公众号：针眼画师

我将以一个艺术头像生成网站为例，详细讲解 AI 编程到底可以帮助到什么程度，以及我们需要具备哪些基础能力。你可以访问 FaceShot 查看 Demo

项目说明

累计用时：3 天（一个端午假期）
花费额度：500 Credit，Windsurf 相当于 100 RMB
工具：Windsurf
完成度：简单可用，登录注册、艺术图生成、模型接入、支付等完备

个人说明

UI 设计：熟悉
前端编程：只略懂 HTML、CSS，了解一些框架名词，其他一窍不通
后端 / 数据库等：基本一窍不通
优势：产品经理，有思路了写文档比较快
其他：之前搭建过更复杂的项目，这个项目实际比较简单

一、我需要准备什么？

1. 一台电脑

PC / Mac 都可以，内存尽量大（16G 以上），因为在开发过程中我们需要频繁预览、查看页面效果。

2. 选择 AI 编程软件

就是开发者常提到的 IDE。我向你推荐以下工具，选其一即可：

Windsurf：适合对编程不太了解的小白用户，我常用，本文也以此进行介绍
Cursor：目前最火的 AI 编程工具
Trae：字节开发的 AI 编程工具
V0：Vercel 公司开发的线上 AI 编程工具；在最开始我用其做过几个页面，现在不怎么用了

还有其他工具，就不赘述了。工具只是为了方便使用，看个人喜好和价格接受度，其他区别不大。代码完整性本质上是由所选 AI 模型决定的。

二、产品设计

2.1 功能清单

一个产品由大大小小许多功能组成。通过对产品定位和用户需求的理解，结合实现成本与难易度，我们可以将功能按照「必要」「重要」「次要」的维度，写一个简易功能清单：

注册登录：P0，计划用第三方 Clerk 注册登录服务，免去该部分开发
图像绘制：P0，接入第三方 AI 大模型，配合提示词实现多种艺术风格
支付：P2，接入 Stripe 支付系统，用于价格管理、支付
高级绘制能力：P3，使用户可以控制艺术图的尺寸比例、是否透明背景等

（仅为示例，实际不会这么简单，有遗漏也正常，开发过程中可以补上）

2.2 界面设计

一个商业化项目应该注重用户体验，尤其是 UI 界面和功能交互应该保持一定水准，不应该完全交由 AI 解决。因此我建议主要页面和重点功能尽量自主完成整体思考和设计。如果你懂设计，这部分就不必看了。

宏观来看，设计你需要思考以下几方面：

页面规划

需要哪些重要页面，根据产品定位、发展阶段和功能来定。以本项目为例，核心是要提供给用户一个「上传原图 → 选择风格 → AI 绘制艺术头像」的产品。因此初步规划的页面包含：

首页：用于产品展示和介绍
创作页：用于承载核心功能
图库页：用于保存已经绘制完成的艺术头像

页面布局

合理的布局可以事半功倍。一般来说，页面主要是「上下布局」或「左右分栏」布局，这需要结合当前内容承载量和未来规划功能。这里我选择混用两种布局形式：首页采用上下布局，核心创作页采用左右分栏布局。

设计细节

我向你推荐 Figma UI 设计工具，社区内有许多设计资源免费使用。如果有能力，我建议你使用 Auto Layout 或 Grid 方式设计，也可以使用一些标准的组件库，便于后期开发时 AI 理解。

shadcn/ui、Radix UI 等组件库都强力推荐。

三、提示词（Prompt）

当你思路清晰，且准备好所有设计资源后，打开 Windsurf 软件，正式进入项目开发环节。

提示词相当于你对 AI 约定一些规则，使其每次执行任务前都参考你的规则，防止跑偏，也提高效率。我们可以理解为 3 种类型。

3.1 全局提示词

软件层约定，打开任何项目都会遵守该提示词。

这里我写得比较简单：

请用中文与我交流

3.2 项目提示词

非常重要的部分，帮助 AI 理解你当前、后续想要干什么，以及怎么干。

这部分尽量写得覆盖全面、表达清晰、简明扼要。最好使用 Markdown 语法来写，对 AI 解读更有帮助。

【简单说明】

技术架构层面：规范了 AI 编程时要注意的点。这里只做简单说明，不清楚的可以复制给 AI，理解其概念和优缺点。

前端框架：Next.js，对小项目独立开发比较推荐，未来接入 Vercel 比较友好
UI 组件库：shadcn/ui，让 AI 直接调用相关组件，既可以提升开发效率，也可以保持页面视觉一致性
样式系统：Tailwind CSS，使项目开发视觉保持一致性，便于后期适配深色模式或调整主题色
登录系统：复杂系统，基于功能优先级评估，以及为了减少开发量，我选择接入第三方登录系统（Clerk），提升效率
支付系统：复杂系统，且为了支付合规，接入第三方支付系统
部署平台：我没有数据库和服务器，为了快速部署上线，推荐 Vercel、Netlify 等
代码规范：做一些简单要求，主要也是为了后续 AI 方便调试、解决问题
移动端适配：这里简单提一些，后续开发完成后，可以再针对性地做一遍适配
其他：根据你的需求撰写即可；专业开发可能会约定得更完善

核心流程层面：你可以把一些重要的流程简单叙述，比如 AI 生图流程。

但不一定要追求完美提示词，可以在期间慢慢优化。不过我这个只写了一次，就不再动了。这些 AI 工具都有记忆功能，随着开发推进，AI 会自动记忆一些关键环节。Memories 有时会记忆出错，可以时不时维护一下。

3.3 任务提示词

这是我们的主要参与部分。我们通过撰写任务提示词，以对话的形式让 AI 执行对应的任务，后面会详细说明。

四、开始开发

4.1 对话框

我们和 AI 所有的交互都在一个小小的对话框中进行，我简单介绍下常用功能：

Website Preview：用于在本地预览页面，以便你可以点选特定区域，让 AI 快速定位目标位置
MCP：可以配置相关第三方 MCP，如 Figma MCP，帮助你获得更多的设计稿信息（如间距、字号、颜色等）
Write / Chat：一般用 Write，直接让 AI 帮你写所有的代码；Chat 就是类似 ChatGPT 一样的对话模式
AI 模型选择：这类工具一般都会接入很多 AI 大模型，这里我推荐 Claude 3.7 Sonnet，理解能力非常好，当然会消耗更多 token。当然未来也会出现更好的版本（比如 Gemini 2.5、DeepSeek R1）

4.2 说了这么多，第一步到底该怎么做？

其实很简单。当你项目提示词写得很完整时，第一句任务提示词可以很简单：

开始初始化项目

初始化完成后，接下来就需要频繁用提示词和 AI 对话，根据你的需求，依次开发各页面了。

五、提示词撰写技巧

5.1 先谈谈我对一些常见观点的理解

撰写提示词越清晰、越全面越好吗？

我认为不是这样的。全面清晰肯定是好的，但同样意味着你需要花费大量时间去思考逻辑、组织语言。我觉得达到一个均衡适度即可。

先别动手，先聊聊：我们表达一个相对清晰的任务或目标后，可以不马上进行开发，而是让 AI 先谈谈它的理解和想法。这样起到一个二次校验和丰富表达的作用；如果评估合适，你就直接告诉它：「开始吧~」

当然这种多一步的操作会额外消耗 token，但可以避免跑偏、无效开发，其实反而节省 token。

为了节省 token，我一次性布置一个全面任务

一次性描述复杂流程，一方面对我们自身能力要求高，另一方面长流程也容易导致 AI 逻辑混乱。

先讲目标，再分步骤：现在 AI 都具备较好的上下文能力，所以我们可以先谈一个大目标，然后分步下发任务。随着目前 AI 能力提高，很多情况下也会自行拆解任务，交由你确定后继续执行。

总的来说，还是要视情况而定。

我认为越强调要求，AI 越能满足

我觉得太多强制性要求很可能让 AI 放弃推理而机械生成。尽量避免「必须符合 xx」「一定要 xxx」类似词语。尤其是面对 BUG 时，这很容易限定 AI 的解决方向，导致陷入持续循环。

温和引导，开放性：通过期望引导 + 回合式优化来达成目的，比如使用温和引导语气，如「建议」「推荐」「更适合」这类词语。

5.2 提示词的一些撰写技巧

明确目标 + 关键限制 + 留出推理空间

每次任务提示词保留自由度，让 AI 辅助建模 / 设计。

复杂流程拆分开发

主要避免一次指令过于庞杂导致理解模糊、输出跑偏。可以将复杂任务拆成阶段性目标：「先列结构」→「再写每部分内容」→「最后优化逻辑」。每步之间可以插入 check-in 环节，例如：「你先讲讲你对这个需求的理解，再开始写」

补充必要信息或预设

虽然 AI 具备一定上下文能力，但要主要避免 AI 建模时使用错误假设或不完整前提。

比如对接第三方接口时，可以将相关的 API 接口文档地址补充进去
参考设计图时，可以将参考图片补充进去；如果是设计稿，可以用 MCP 调用更多参数
遇到复杂流程或特定部分，可以将特定代码片段、代码文件拖到窗口进行补充提示

关注实时开发进展

AI 一般会将自己的开发动作外显，你可以关注一下，避免偏移目标。这时候你可以果断中止，告诉它原因和你的困惑。

设计 / 开发一致性技巧

如果你使用 Figma 完成设计，那么通过描述详细功能点 + Figma 设计 MCP，可以实现 95% 以上的效果还原。

其实我平时写提示词并不完全遵守这些技巧，经常大白话——因为我觉得 AI 足够优秀的话完全能理解你的意图，没必要详细构思每次任务提示词（虽然这种啰嗦提示词无疑会带来更多 token 消耗）。即便如此，在遇到复杂问题时，还是要尽量优化、改善提示词。

5.3 一些小技巧

一次性说完某个模块任务或通用性任务

利用 Windsurf 按任务消耗 token 的规则，可以在一轮对话中完成大量任务，但仅消耗微量 token。

这种方法可以用在颜色系统适配、暗黑模式、国际化翻译等场景。

比如，该网站需要支持 9 种语言，我可以先让 AI 搭建多语言框架、适配简体中文文件包，然后一轮对话就完成其他所有语言的文件包创建、接入与翻译适配——多个语言适配可能仅消耗 1 Credit。

充分利用上下文

在使用 AI 时，应尽可能在单个对话中连续完成任务，充分利用 AI 的上下文记忆能力。当字符容量即将用满时再新建对话。因为每次新建对话后，AI 将缺乏前文上下文和记忆支持，往往需要重新梳理逻辑背景，不仅容易造成理解偏差，也会增加沟通成本与错误率，影响整体效率。

要注意，一般用满没有明显的标志，各模型也不尽相同，但一些特征可以帮助你判断：

模型开始遗忘前文细节：比如提到的名字、结构、规则，AI 开始出现「记不清」和答非所问的情况
AI 对已有内容重复总结：表现为反复确认你的意图，重新定义任务，前后矛盾
多轮推理和结构化写作能力明显下降：逐渐表达混乱
对话总字数过多：粗估单轮输入 2000 字左右，累计 10–15 轮高密度对话会接近上下文极限
工具开始卡了：感知层面变卡了

多模型辅助

虽然我推荐 Claude 3.7 模型开发，但除此之外，一些简单问题、杂项可以让免费模型参与解决，比如用 ChatGPT 辅助思考、文案创意等。

六、发布上线

当你完成所有开发后，可以将代码部署到 GitHub，并导入 Vercel 进行代码部署。如果部署失败，将失败代码或提示丢给 AI，让其修复解决即可。这里对于零基础用户也是比较复杂的部分，但与本篇主题无关，不在此赘述。

七、不止于此

看上去流程差不多了，但在具体细节中，还涉及到如何部署、处理数据交互等等非常多的细节问题。

因此我觉得 AI 编程确实对有编程基础的人来说是一大利器，但对于完全没有编程概念的人来说，用 AI 开发一个完整项目仍然是非常困难的事情——起码现阶段是这样。比如我，擅长界面设计部分，但对前端只有框架了解和 CSS 部分，对后端更是一窍不通，期间遇到很多问题，反复对话、调试甚至返工才解决。

但我对 AI 对各领域的影响是持乐观积极态度的，它确实创造了很多不可能。

如果你确实对此非常感兴趣，我建议你简单了解、观看一些编程和设计相关的教程视频。有了一些基本概念和框架化思路，一定事半功倍。