本篇文章面向不具备编程基础读者,旨在通过一篇文章让你彻底了解如何通过 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 对各领域的影响是持乐观积极态度的,它确实创造了很多不可能。
如果你确实对此非常感兴趣,我建议你简单了解观看一些编程和设计相关的教程视频,有了一些基本概念和框架化思路,一定事半功倍。