目前,AI编程非常火爆,昨天看到@沉沦暴兵,一天发好几个插件,很多人很好奇怎么做的,正好把之前的一些操作经历整理一篇文章,之前通过Cursor创建了一个社交网站 ,该网站包含了最基本的注册、讨论、发帖、前台、后台、用户管理等功能。

作为一名互联网人,虽然我不会写实际代码,也从未学习过编程,但AI编程帮助我将一些想法变成了现实,我觉得很有趣,今天把整个流程分享给出来,以便于感兴趣的人直接可以直接上手,比想象的简单的多。

产品设计

今天,我们将花费20分钟创建一个WordPress网站插件,在开始之前,我们需要明确以下几点:

  • 插件的基本功能是什么?
  • 插件的性能要求,是否需要处理网站数据,是否有前后台数据交换?
  • 插件的基本布局和界面设计是什么样的?

确定了这些之后,我们开始第二项工作:撰写提示词。以我们的插件为实际案例,整理这些提示词。提示词可以是半成品,因为我们可以通过AI再次细化。我建议第一次大家都以作品临摹为主,因为跟着操作一遍熟悉一下整个工作台。

提示词部分:

然后,我们打开KIMI或DeepSeek,优化一下提示词,并告诉它要放在Cursor中使用。以下是优化后的提示词:

AI返回的提示词:

编辑器操作

将这个提示词创建一个readme.md文件,然后把提示词粘贴进去。在你的项目文件夹中,新建一个名为Jefbookmark的文件夹,将md文件拖进去。

打开Cursor后,按下Ctrl + I打开对话窗口,选择支持的编程模型为Claude3.5,然后在输入框中@readme.md文件,直接对它说:“Cursor,请根据该文件创建一个网络书签插件。现在请你根据提供的信息思考下,你要如何实现并列出来插件的大纲,然后将大纲和文件结构创建一个json文件。”

这时,Cursor会开始思考,并列出实现方法,你可以看到窗口它的回复内容,以及它创建的json文件。

这里需要注意的地方,一般cursor会把项目搞得很大,你要求他以最小MVP代码量和文件量实现,如果是特别简单的插件,直接告诉他,请以一个PHP文件完成插件所有功能,根据功能去评估文件大小和数量,不要让cursor制作非常大的结构和目录,那会导致它不停的去创建目录和文件,把代码搞得非常复杂。你也可以在最初的readme文件就通过规则限制它,我一般会看一下cursor会输出多大的结构,然后才会第二次对它校正。这里考验大家的是,你要根据功能判断多少个文件足够它完成代码。如果你的项目很大,一定要自己设计文件结构,而不是让cursor给你设计,那会造成项目过载,使用一对复杂的技术,增加代码工作量。

接着,直接告诉它“请开始实现”,它会创建一些代码和文件。当所有代码完成后,

  1. @codebase在输入框再次和它对话:“请检查全部代码和文件,查看是否有功能和代码衔接的错误,如果有请修复它。” Cursor会进行修复。
  2. 然后再次@codebase,告诉它:“请你做上线之前的最后一次检查,保证插件的激活、启动、停用、卸载正常。” Cursor会做最后一次检查并修改代码。

打包安装

最后,将代码打包成zip文件,直接在WordPress网站插件上传文件包。如果插件没有正常启动,会有提示,将错误提示复制给Cursor,它会进行二次修复。再次上传覆盖插件即可。此时,你就可以在后台添加你的网络书签,并将短代码[jefbookmark]复制粘贴到你想要展示的位置,保存后,再次访问该页面就能看到你的网络书签了。

地址演示

网址:https://www.jeffer.xyz/bookmark

全程花费20分钟,包括代码修复和功能调整。对于有经验的开发者来说,可能只需半个小时就能搞定。如果你是新手,一个小时也能上线你的插件功能。

这里的网络书签只是一个演示,你可以创建任何符合规则的插件,比如表单、数据统计插件、文章伪原创插件等,具体做什么取决于你的兴趣和职业。

如果你有确定的界面和网址,也可以直接把地址丢在窗口,要求他以这种界面输出,输出级别比如1:1,比如参考整个布局,比如参考样式配色等,和Ai沟通尽量以最简洁是对话让ai理解,如果说不清楚就丢图片和网址,Cursor也可以阅读图片,然后直接按照图片创作网页。这里拿插件作为演示,是因为插件的门槛最低,一般在宝塔里面修改过PHP文件的博友,我都把这批博友视为可以直接上手Cursor编程选手。

问题修复

也会有一些博友的项目或者插件,主题出问题,修复的方法也很简单,直接将项目解压到目录,Cursor打开该项目文件,然后Ctrl I打开对话窗口,@codebase 让他遍历一遍项目代码,然后说一下这个项目的功能是什么,整个文件结构是什么样的。这是第一次对话,你需要它熟悉项目。

第二次对话,选择出问题的文件或者文件的目录,在对话窗口将问题描述,然后 @该文件或者该目录,第二次对话不要求他立刻实现代码,一定要先问他是什么问题,Cursor会定位出来问题,然后你告他,请思考几种方法可以修复,并且告诉我几种方法的优劣势,然后他会告诉你。

如果一直无法定位到问题,一般有可能出现导致的,AI当前被降智,你引用的文件位置错误,或者你提供的问题和实际的文件不匹配,一般项目越大越复杂,引入的变量越多,越难以定位到问题本身。

其他注意

  1. 账号购买:去某宝买共享版3人500条高速,不要买号池账号,号池账号不稳定会降智的。
  2. 汉化处理:随便找一个Ai问一下,会给你教程。
  3. 适合人群:编码是否适合小白和程序员,适合任何可以通过键盘打字的人。
  4. 屎山代码:创建的代码是否为屎山,如果你不规范它就是屎山,屎山与否取决于使用人在创建产品之初,给Cursor设计的代码目录结构和前提。如果你本身就可以阅读代码,这样更好,你可以要求他使用具体方法,什么框架,以什么规范创作。
  5. 产品范围:还能写什么?可以写APP,小程序,网站,脚本等等。
  6. 需要工具:www.cursor.com 直接注册,赠送免费50条额度使用,但是有一个前提,打开编辑器对话需要开魔法节点,建议使用香港节点。

End

如果遇到问题,可以评论区讨论,现在很多博友都在用,经验比我丰富的也很多,我这里写一篇作为抛砖引玉,没有过多的去截图,因为整个cursor的使用教程非常多,大家直接B站就能搜索到,基础操作熟悉一下就可以,这里更多的是提供做产品的思路。

目录:

《 “AI编程 20分钟Cusor创建一个WordPress网站插件” 》 有 42 条评论

回复 花非花 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注


  1. 粽叶加米 的头像

    除了AI超强!人得得超强,要给合适的提示词。

    1. Jeffer.Z 的头像

      可以几个工具来换用,一个ai工具生成提示词,另一个执行,我就这么干,懒人适合。

  2. 邹江 的头像

    到时候可以让ai写个博客主题了,挺方便的就是要润色下提示词。

    1. Jeffer.Z 的头像

      江你搞一个,我最近太忙了,没时间折腾,我是想做一个三栏主题,最近三栏特别火。

  3. 六道轮回 的头像

    用ai可以免费做网站主题了

    1. Jeffer.Z 的头像

      可以做的,一小时就能做出来,但是具体的样式需要让ai修改,否则不太美观。

  4. 皇家元林 的头像

    本来我也想用的,看到要收费,我就放弃了。
    目前我还用不了那么多。

    1. Jeffer.Z 的头像

      新账户有免费额度,够开发几个插件的。如果没有具体需求,只是尝试也够了。

    2. 是阿布讷 的头像
      是阿布讷

      字节免费的trae也还可以 就是可能需要排队什么的

      1. Jeffer.Z 的头像

        这是啥时候评论,我竟然才看到,我用了trae,就是用的不太习惯啊。所以还是用回到cursor了。

    1. Jeffer.Z 的头像

      Cursor确实挺6,推荐上手。

  5. 肖寒武 的头像

    原来提示词这么重要么,我每次用AI生成代码都用的很简单的提示词。当然给我返回的结果也不甚理想,每次都得我翻来覆去的手动改。

    1. Jeffer.Z 的头像

      看项目吧,越是详细的提示词,越是效果好,如果连代码结构,使用方法,还有界面的具体形式都说了,基本上就是按照你的思路完全实现。

  6. 虎子 的头像

    牛逼克拉斯,向你竖起大拇指O(∩_∩)O

    1. Jeffer.Z 的头像

      搞起来博友,看似牛逼,一用极其简单。

  7. 广树 的头像

    我这样的程序员距离失业越来越近了

    1. Jeffer.Z 的头像

      Ai开发不出来 wikimoer系统,所以不存在失业的事情😄

  8. 花非花 的头像

    厉害啊;有AI没用,会用才行

    1. Jeffer.Z 的头像

      现在用起来也简单,这些ai对于提示词的要求都低了,对话就ok。