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来达成我们的目的。