AI编程实战,1小时开发一个AI导航网站
作者：微信文章AI时代所有应用都会重写！
AI时代所有应用都会重写！
AI时代所有应用都会重写！
创新工场董事长李开复，在前两天举行的“中国企业领袖年会”中讲到：
从PC到移动互联网时代，每个应用都被重写了一次，进入AI时代也会被重写，这个改变会在接下来的1-2年爆发。
无论对企业，还是个人，这都是一个巨大的机遇。
案例之前，先聊几句背景。
23年上半年，AI俱乐部创立之初，我们曾组织大家一起参与过一个项目：开发一个AI导航网站。
不少朋友一起参与其中，当时没用AI去开发，因为当时的AI生成的代码，加上人工整合，可能还没纯人工手动来的快。
大家讨论需求、分工合作，按计划人力搜集网站列表，整理页面的分类、图标、链接、关键信息等，大概一两周左右，网站才慢慢有了雏形。
最终因项目变现卡点，这个项目没有继续做下去。
之前要开发这样一个项目，有两个卡点：
1、你要参与进来，首先得有技术基础；
2、真正开发一个项目，确实挺费时间；
而现在，AI又发展了一年多，现在要开发一个AI导航网站，要多久呢？
答案揭晓：我一个人，一小时！
下图就是我用AI开发的AI导航网站，效率之高，让我这个已经好多年不写代码的退休开发人员，大为赞叹！
当然，这个1小时开发出来的网站，是不完美的。
比如网站的数据集的完整度和专业度、图标问题（缺失或者尺寸过大）、个别网址无法打开等，这些都需要慢慢再做优化。
重点是效率！
即便你完全不懂技术，也可跟着我的操作步骤，一步步快速实现你的网站开发。
接下来，我来分享下具体的操作。
首先，工具我们还是用Cursor。
下面是具体实操步骤：
1、新建项目文件夹
在你的电脑上，新建一个文件夹，比如叫 ai_nav，用于项目根目录（存放项目代码的目录）
2、打开文件夹和对话窗口
用Cursor打开这个文件夹，并用快捷键 Ctrl + i，打开Composer（Cursor的对话窗口，可直接用中文和提需求）
3、在Composer中告诉它需求。
假设我就是编程小白，完全不懂技术，当然也不知道开发这个都要用什么技术选型；
你可以和Cursor去说你的需求，并询问它用什么技术选型合适，让它帮你做决策；简单点的话，也可以直接告诉你的需求点，让它直接帮你实现。
我们这个案例相对简单，所以可以直接让向它提需求让它完成开发。
我的提示词如下：
请帮我开发一个“AI工具导航“网站，这个网站的功能如下：
1、这个网站主要用于展示目前主流的众多AI网站链接，目的是帮助用户快速找到自己期望的AI工具；
2、网站上的AI工具需要按照类别分组，便于用户查阅;
3、每个AI工具，均包含标题、网址、简介等信息；
4、在完成功能设计的基础上帮我实现出色的有苹果风格视觉设计；
大家看下这个提示词，有什么特点？
提示词重点：一定要尽量清晰，明确告诉它你的目标（一个AI工具导航网站），目标的具体要求（1、2、3、4），功能以及界面风格，都尽量描述清楚。在Composer对话框中，开始执行，可以看到，AI开始疯狂的输出代码。
执行完成，我们保存所有代码。
如下图所示，整个项目的主体框架已生成好。左侧区域是项目文件结构，中间是具体代码编辑区，右侧是对话框。
4、设置环境。
我们注意到，右侧中说明了使用方法，即：
1、克隆项目后运行 npm install 安装依赖
2、运行 npm start 启动开发服务器
3、在 src/data/tools.js 中添加更多AI工具数据
当然，我一看就知道这个项目是用的React框架，执行前需要安装Node.js，在命令行中使用npm命令下载所需依赖并启动项目。
但对小白来说，肯定完全不知道是什么意思！
没关系，哪里不懂问哪里，AI绝对就是我们的一位24小时在线的优秀员工。
比如直接问：npm install 如何执行？我是外行，这个完全不懂。
如下图所示，之后它就开始给你科普了，比如你需要先安装node.js，官方网站也提供了；执行命令需要先打开windows的cmd命令行，或者Mac的Terminal。
这些基本环境，一回生二回熟。
安装这些工具，也基本都是一路“下一步”，没有特别难的地方，这一步可以说已经是整个操作流程“最难”的环节了，搞定后就会一马平川。
nodejs官网：https://nodejs.org
5、尝试运行。
这里我认为你已经你已经搞定了第四步的开发环境。
我们打开cmd命令行，然后在项目的根目录下执行：npm start
它会开始执行，看到如下提示则说明服务启动成功。
我用浏览器，打开网址http://localhost:3001/，看到的确实如下界面。
因为Cursor只生成了代码，图片文件并不会直接生成，传统做法是自己手动下载图片，按代码要求命名，然后放在对应目录中。
如上图所示，看代码中的配置，你需要在根目录手动新建一个icons目录，然后加进去一个名为 chatpgt.png的图片，其他同理。
虽然开发完成了，但是明显还有问题：
1、导航的内容过少，况且都是国外网站，如何快速新增国内数据；
2、图片也没无法显示，手动一个个添加也麻烦；
我们继续让Cursor来搞定。
6、新增国内AI网站导航数据
在Composer中继续提需求，可以直接问：
请帮我多添加一些数据，只添加中国国内的AI工具，可以多添加几个分类，每个分类需要6条数据。
接下来，AI开始疯狂输出各类国内AI数据，我们熟悉的文心一言，通义千问等都来了，选择接受所有改动并保存。
数据如下图所示：
有了数据，界面整齐多了，不过图标还是没有。
7、让AI帮我们搞定图标
这么多图片文件，总不能我们自己一个个手动去下载吧。
之前我们早期做的导航网站，确实就是这么手动搞的，可想而知这是一个大工程。
这里我们继续让AI来处理。
在Composer中继续提需求，就用小白的方式直接问就好：
有没有办法帮我采集这些网站的图标，因为手动添加实在太麻烦了
Cursor真的是优秀员工，只要你把需求说清楚，它立马就开干，而且效率真的高啊，眼看一段自动下载网站图标的脚本就有写好了。
我们还是直接保存它所有的改动。
具体如何下载图标呢？它也已经说的很清楚了。
执行 npm run download-icons 命令即可，和刚才执行 npm start 一样，我们可以另开一个cmd命令行，直接执行。
命令行开始飞速执行，并下载各种图标。
这里需要说明的是，一些图标是无法顺利下载的，我们可以继续提示让它优化脚本，这里我告诉它遇到的问题，也让它做了两三次的优化。
最终我的做法是，让它增加一个默认图片，对于无法下载的图标，先采用默认图片，之后我们在人工个别处理。
我的提示词：
如果图片多次下载都失败，可以替换一个通用图标即可，方便开发人员后面手工替换，这个思路是否可行呢
我们看到，Cursor也很乐意这个方案，很快优化出了一版代码。
我们重新执行 npm run download-icons
最终生成的图片库如下。可以看到，还是有不少图标没有下载到，但这效率也已经很高了 ，而且因为有默认图片，页面展示也说得过去。
再次访问网站看到如下效果，其实整体页面效果已经不错了。
如果需要继续新增数据或者其他菜单功能，继续让Cursor工作就好了。
相较于之前开发一个网站，这样一个网站我只用了一小时左右，效率已经是翻了N倍。
当然，对于不懂技术的小白来讲，还需要你跟着指引，去做一些基础环境的工作，算是一个小小的门槛。这些认真点，你稍微下点功夫肯定是搞得定的。
你把这一套流程操作下来，0基础完成了一个网站开发，是不是省去了你巨大的技术学习成本！
文末，我们稍微总结一下：
1、利用Cursor，我们可以通过自然语言提需求，这个需求一定要具体明确，你的表达越精准，AI完成度就越高。
2、本案例相对简单，如果是复杂项目，请按小的功能点，一步步实现，毕竟每一次会话的上下文是有长度限制的。
3、不要指望一次性就完美，遇到问题是常态。遇到报错信息，就直接把报错的完整信息返回给Cursor，它会处理；遇到自己不懂的地方，直接问，它会给你具体指引；
最近整了很多AI相关的资料，需要的话可以加：it123b 领取资料
（除了AI其他资料也可以领取）
https://mmbiz.qpic.cn/mmbiz_png/mqg2FDEbO0Hs25rKCTliau4qVa7mGYU07D2ErEz0Ljtj3T7L75v8fFMW3kELdq3j8dOEumRAcicS8ib1mZ4MBSrdg/640?wx_fmt=png&from=appmsg&wxfrom=5&wx_lazy=1&tp=webp
页:
[1]