本篇文章面向不具备编程基础读者，旨在通过一篇文章让你彻底了解如何通过 AI 编程，从零到一搭建一个完整可行的商业项目
首发于微信公众号：针眼画师
我将以一个艺术头像生成网站为例，来详细讲解 AI 编程到底可以帮助到什么程度，以及我们需要具备哪些基础的能力。
(faceshot 网站首页-Hero区域)
(faceshot 网站首页-创作区域)
项目说明
- 累计用时：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 模型决定的。
(windsurf)
(cursor)
二、产品设计
2.1 功能清单
一个产品由大大小小许多功能组成。通过对产品定位和用户需求的理解，结合实现成本与难易度，我们可以将功能按照“必要”、“重要”、“次要”的维度写一个简易功能清单：
-
注册登录：P0，计划用第三方 clerk 注册登录服务，免去该部分开发；
-
图像绘制：P0，接入第三方 AI 大模型，配合提示词实现多种艺术风格；
-
支付：P2，接入 stripe 支付系统，用于价格管理、支付；
-
高级绘制能力：P3，使用户可以控制艺术图的尺寸比例、是否透明背景等；
（仅为示例，实际不会这么简单，有遗漏也是正常，开发过程中可以补上）
2.2 界面设计
一个商业化项目应该注重用户体验，尤其是 UI 界面和功能交互应该保持一定水准，不应该完全交由 AI 解决，因此我建议主要页面和重点功能尽量去自主完成整体思考和设计。如果你懂设计，这部分就不必看了。
宏观看，设计你需要思考以下几方面：
页面规划
需要哪些重要页面。这个根据你产品定位、发展阶段和功能来定。以本项目为例，核心是要提供给用户一个上传原图-选择风格-AI绘制艺术头像的产品。因此初步规划的页面包含：
- 首页：用于产品展示和介绍；
- 创作页：用于承载核心功能；
- 图库页：用于保存已经绘制完成的艺术头像
页面布局
合理的布局，可以事半功倍。一般来说，页面主要是“上下布局”或“左右分栏”布局，这需要结合我们当前内容承载量和未来规划功能。这里我选择混用两种布局形式:
(首页-上下布局)
(核心页-左右分栏布局)
设计细节
我向你推荐 Figma UI设计工具，社区内有许多设计资源免费使用。如果有能力，我建议你使用 Auto-lay-out 或 Grid 方式设计，也可以使用一些标准的组件库，便于后期开发时易于 AI 理解。
shadcnUI、radixUI 组件库等都强力推荐。
三、提示词-Prompt
当你思路清晰，且准备好所有设计资源后，打开 Windsurf 软件，正式进入项目开发环节。
提示词相当于你对 AI 约定一些规则，使其每次执行任务前，都参考你的规则，防止跑偏，也提高效率。我们可以理解为 3 种类型。
3.1 全局提示词
软件层约定，打开任何项目，都会遵守该提示词。
这里我写的比较简单
Prompt “请用中文与我交流”
(全局提示词)
3.2 项目提示词
非常重要的部分，帮助 AI 理解你当前、后续想要干什么，以及怎么干。
这部分尽量写得覆盖全面、表达清晰、简明扼要。最好使用 Markdown 语法来写，对 AI 解读更有好。
(FaceShot 项目提示词)
【简单说明】
技术架构层面：规范了 AI 编程时要注意的点。这里只做简单说明，不清楚的可以复制给 AI 理解其概念和优缺点。
-
前端框架：Nextjs，对于小项目独立开发比较推荐，未来接入vercel比较友好；
-
UI组件库：shadUI，让 AI 直接调用相关组件，既可以提升开发效率，也可以保持页面视觉一致性；
-
样式系统：TailwindCSS，使项目开发视觉保持一致性，便于后期适配深色模式或调整主题色；
-
登录系统：复杂系统，基于功能优先级评估，以及为了减少开发量，，我选择接入第三方登录系统（Clerk），提升效率；
-
支付系统：复杂系统，且为了支付合规，接入第三方支付系统；
-
部署平台：我没有数据库和服务器，为了快速部署上线，我推荐 vercel 、Netlify等；
-
代码规范：做一些简单要求，主要也是为了后续 AI 方便调试解决问题；
-
移动端适配：这里简单提一些，后续开发完成后，可以再针对性的做一遍适配；
-
其他：根据你的需求撰写即可，如果专业开发可能会约定的更完善。
核心流程层面：你可以把一些重要的流程简单叙述下，比如 AI 生图流程。
但是不一定要追求完美提示词，可以在期间慢慢优化。不过我这个只写了一次，就不再动了。这些 AI 工具都有记忆功能，随着开发推进，AI 会自动记忆一些关键环节。
(Memories 有时会记忆出错，可以时不时的维护一下)
3.3 任务提示词
这是我们的主要参与部分，我们通过撰写任务提示词，以对话的形式来让 AI 执行对应对任务，后面会详细说明。
四、开始开发
4.1 对话框
我们和 AI 所有的交互都在一个小小的对话框中进行，我简单介绍下常用功能
(Windsurf 对话框)
-
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）
(Windsurf 模型选择)
4.2 说了这么多，第一步开始到底该怎么做？
其实很简单，当你项目提示词写的很完整时，第一句任务提示词可以很简单：
“开始初始化项目”
(faceshot 项目框架搭建完成)
初始化完成后，接下来就需要频繁用提示词和 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 调用更多参数；
(调用 MCP 获取设计稿详细参数)
- 遇到复杂流程或特定部分，可以将特定代码片段、代码文件拖到窗口进行补充提示；
(页面中某个特定组件优化)
关注实时开发进展
AI 一般会将自己的开发动作外显，你可以关注一下，避免偏移目标，这时候你可以果断中止，告诉他原因和你的困惑。
设计/开发一致性技巧
如果你使用figma完成设计，那么通过描述详细功能点+figma设计MCP可以实现 95% 以上的效果还原。
(MCP + 详细提示词)
...
其实我平时写提示词并不完全遵守这些技巧，经常大白话，因为我觉得 AI 足够优秀的话完全能理解你的意图，没必要详细构思每次任务提示词（虽然这种啰嗦提示词无疑会带来更多 token 消耗）。即便这样，在遇到复杂问题时，还是要尽量优化改善提示词。
5.3 一些小技巧
一次性说完某个模块任务或通用性任务
利用了 Windsurf 按任务消耗 token 的规则，可以在一轮对话中完成大量任务，但仅消耗微量 token。
这种方法可以用在颜色系统适配、暗黑模式、国际化翻译中等。
比如，该网站需要支持 9 种语言，我可以先让 AI 搭建多语言框架，适配简体中文文件包。然后一轮对话就完成其他所有语言的文件包创建、接入与翻译适配了。
(多个语言适配仅仅消耗 1 Credit)
充分利用上下文
在使用 AI 时，应尽可能在单个对话中连续完成任务，充分利用 AI 的上下文记忆能力。当字符容量即将用满时再新建对话。因为每次新建对话后，AI 将缺乏前文上下文和记忆支持，往往需要重新梳理逻辑背景，不仅容易造成理解偏差，也会增加沟通成本与错误率，影响整体效率。
要注意，一般用满没有明显的标志，各模型也不尽相同，但一些特征可以帮助你判断：
模型开始遗忘前文细节：比如提到的名字、结构、规则，AI 开始出现“记不清”和答非所问的情况；
AI 对已有内容重复总结：表现为反复确认你的意图，重新定义任务，前后矛盾；
多轮推理和结构化写作能力明显下降：逐渐表达混乱
字数重量过多：粗估单轮输入 2000 字左右，累计10~15轮高密度对话会接近上下文极限
工具开始卡了：感知层面变卡了
多模型辅助
虽然我推荐 Claude 3.7 模型开发，但除此外，一些简单问题、杂项可以让免费模型参与解决。
(Chat GPT 辅助思考、文案创意等)
六、发布上线
当你完成所有开发后，可以将代码部署到GitHub网站，并导入 vercel 中，通过vercel进行代码部署，如果部署失败，将失败代码或提示丢给 AI，让其修复解决即可。这里对于 0 基础用户也是比较复杂的部分，但与本篇主题无关，不在此赘述。
七、不止于此
看上去流程差不多了，但再具体细节中，还涉及到如何保持、处理数据交互等等非常多的细节问题。
因此我觉得 AI 编程确实对有编程基础的人来说，是一大利器，但对于完全没有编程概念的人来说，AI 开发一个完整项目仍然是一个非常困难的事情，起码现阶段是这样。比如我，擅长界面设计部分，但对前端只有框架了解和 CSS 部分，对后端更是一窍不通，期间遇到很多问题，反复对话调试甚至返工才解决。
但我对 AI 对各领域的影响是持乐观积极态度的，它确实创造了很多不可能。
如果你确实对此非常感兴趣，我建议你简单了解观看一些编程和设计相关的教程视频，有了一些基本概念和框架化思路，一定事半功倍。