Vibe Coding:第一句提示词,从空文件夹开始创建项目

0 阅读6分钟

提示词

“我将在此文件夹下创建一个全栈项目。后台使用docker运行的wordpress(包含数据库),前端用React+Tailwind建设的PWA(MVP,非真实生产产品)。具体功能是每个用户可以定义要学习的科目及每天要花费的目标时间,然后可以记录每天学习的科目的时间。默认取今天,可以选之前的日期补录。还需要有曲线显示每天的完成度和实际时间,曲线可以自行设定起始结束时间,有默认的3个月,1个月,1周三种情况可以选,默认在1周。曲线可以切换科目。不同用户可以有不同科目,自行设定。根据这些描述,帮我创建一个说明文档,简单说明这些需求并做好整理,同时对项目架构也做一些说明。先不要写代码,如果有不确定的问题再来问我。” 前面这一段就是我使用 Copilot 创建项目时的第一段提示词。这是基于一个完全空的文件进行的。 我这个提示词未必是最好的,也不一定是最高效的,但是它真实可用。当然,如果有其他的 AI 辅助,可能会有更好的效果,因为在管理项目和生成项目上,Copilot 并没有特别出色的评价。 这一段话关键在于最后我告诉它:

  1. 先不要写代码,先做计划。
  2. 如果有不确定的问题,要他来问我。 这样,它在设计项目结构的时候,就会进一步地向我提出很多问题。我针对这些问题进行回答,交互了两次之后,它已经获得了足够的信息,然后这个时候就可以让它去生成文档和代码。

内容分解

在这个项目里面,我没有预选做任何工程化的处理,没有什么AI必须读取的文件、必须遵守的规则,纯粹就是从零开始用自然语言在指挥。 在这个提示词里面,我明确了:

  1. 前端用什么技术
  2. 后端用什么技术
  3. 前端的具体功能 通过一些粗略的项目描述,我让他帮我生成需求文档,然后后面再根据这个需求开始创建代码。

开始项目前的思考 通过提示词可以看到,虽然说 AI 现在生成代码的能力非常强,但在使用 AI 生成代码之前,我们还是要做相当多的工作。 前端具体的功能需求我们就不多说,因为每一个项目都不一样,有的时候需求也并不来源于我们自己。但是在有了需求之后,如何把它分解、设计成可以实现的架构,这是非常重要的。 我这个项目并不是真实的项目,而是一个需要“快速”实现的 MVP。 所以后端架构我使用了 WordPress,配合它的插件,可以提供很多强大且好用的功能,包括用户管理、数据库交互等等。还有一个最开始没想到的惊喜,就是 SEO。我做的是一个工具类网站,一般不太好做 SEO,因为这类网站主要是让别人使用,页面里很难有什么关键词。一般情况下,我们需要在工具网站上附加一个博客页面,链接文章来做 SEO 优化。而 WordPress 本身就是一个博客平台,这是它原生自带的优势,所以用起来非常方便。 之所以没有用 Node.js 等其他模式,就是因为这些功能即便都已经很成熟了,也还需要单独去生成代码。生成之后,要保证没有问题,后续的测试和验证也相当麻烦,这非常不利于快速搭建 MVP。 前端我选择了网页的形态,一是为了快速实现,二是为了节约成本。我没有选择手机上的原生应用。毕竟不同手机的应用开发各不相同,开发时还会有苹果账号限制以及成本等问题。 在这种情况下,React 和 Tailwind 就是一个比较成熟的方案。这里面比较特别的是,我选择了 PWA(Progressive Web Apps,渐进式网络应用)的方式。它可以安装到手机上,像普通应用一样运行,但本质仍然是一个网页。PWA的好处在于非常自由灵活,可以提供接近原生的用户体验,但无论是发布还是更新,都不需要通过平台的审核和验证,这对快速迭代实现 MVP(最小可行性产品)非常有效。

关键因素总结

我总结了用 Vibe Coding 开发项目时的几个关键因素:

  1. 先做好架构设计和技术选型 在思考的过程中,同样可以用 AI 辅助。但如果什么都不思考,直接上来就让 AI 手写代码,很容易就会搞得一团糟。
  2. 根据不同的项目目标选择技术和架构 如果是为了快速实现,可以选择 WordPress 做后端。但 WordPress 本身比较重,在安全和便捷性方面也一直存在一些问题。如果是真正的长期项目,还是要考虑使用 Node.js 或其他的后端框架,或者在已有的项目框架上进行修改和模块增加。
  3. 让 AI 明确每一步的任务 项目管理文件虽然可以提升效率,但没有这些也并不是说就不能做项目。关键是要让 AI 明确它每一步要做的事情。让它自己列出行动计划和方案,经过我们确认没有问题后再让它去实现,而不能让它一上来就直接开始生成具体代码。

附录:后续的需求交互

Copilot 问了我两次确认需求,确认的问题和我的回答如下: “图表库:Chart.js 还是 Recharts?Recharts 状态管理:Context API 还是 Redux?Redux 日期库:date-fns 还是 Day.js?只需要精确到日期,确定一个就好。 时间记录方式:是否需要计时器功能?不需要 科目颜色:预设还是自定义?在数据库里定义 数据展示细节:超过100%如何显示等 超过100%显示100%。不可以输入负值 记住以上答案,需要更新到文档里的就更新,其它的在生成相应模块时会再有详细描述。暂时不要生成代码。”

“同一科目多次记录 - 是否允许累加?不允许,每次修改每天指定科目的时间即可 预定义颜色方案 - 需要多少种颜色?如何分配?不用预定义,直接用一个颜色选择器让用户选择。 WordPress插件 - 自定义插件还是用默认功能?自定义插件,docker化时需要考虑进去 部署需求 - 开发/生产环境划分 不用考虑,只部署当前本地开发环境,作为MVP”