Cursor下载

下载链接: https://www.cursor.com/

Hello World!

作为完全不会前端的人，首先需要让AI帮我们搭建一个HelloWorld界面

确定语言框架

首先要给AI框定好前端语言和框架，由于AI的物料大量来自网上的开源项目，所以越是受欢迎的开源项目AI越容易写出准确的代码。
问了下认识的人，给我推荐了以下组合

elecron+react+ant design

Promt

现在开始传输指令，按快捷键cmd + I 唤出 Cursor 的 COMPOSER功能，该功能可以联系上下文，接收指令，并在目录下创建多个文件进行代码编写。
因为是0基础，我甚至连前端代码怎么跑都不知道，所以给出以下指令

帮我在当前目录下初始化一个elecron+react+ant design项目,并编写好package.json.
elecron项目仅包含一个简单的helloWorld页面
生成完毕后,给我需要执行的命令

指令响应如下

注意：AI写的代码很多时候不是100%准确，需要反复调试修改，所以为了方便保存上下文，我们不用急着点击accapt保存代码结束当前回话，要不然代码跑不起来就很尴尬

根据提示我安装好nodejs，并在终端依次执行AI给的命令，试图跑起来这个项目。

但很遗憾，执行npm start时，终端上出现了一些保存，网页也是一片空板，因此我们把当前的问题继续作为指令发出

当我跑npm start时，终端报[0] Could not find a required file.
[0]   Name: index.js
[0]   Searched in: /Users/bytedance/ai/src。 同时页面中并没有hello world，应该如何解决

AI随即自动对代码作出了调整，注意，上图的代码都不用我们手动复制到项目中做调整，AI已自动更改，我们仅需点保存。

根据指令我们继续运行。

可惜页面上依然出现了报错，直接将报错复制到COMPOSER

ERROR in ./src/index.js 6:0-24
Module not found: Error: Can't resolve './App' in '/Users/bytedance/ai/src' 如何解决

AI随即给出了两种解决方案，并自动按照推荐的第一个方案完成了文件路径的修改

根据提示，再次运行项目，终于在页面上看到了我们需要的Hello World

结束语

最终目标是在自己几乎不用手动更改代码的前提下，纯用AI完成一个管理系统前端页面的搭建，并接入自己完成的后端接口完成整个项目。
本篇从开始下达第一个指令到最后呈现Hello World都没有看一行代码，关心点全在AI提示我们要在终端输的命令和最终呈现的结果，然后接着反馈。 这种合作关系非常像工作中产品经理和程序猿的关系，只不过今天，我是做为一个产品经理，不断的给AI提出需求，并且要求它修复BUG。
当然，可以想象，随着项目的复杂，AI的准确率会有所下降，要想快速完成项目的搭建，还是要在这个过程中学习些前端的知识，以便提供更准确的prompt来达成我们的目的。