
1个人,航海21天,上线20个Chrome插件!这是ChatGPT赋予我的过去难以企及的异常编程能力。我怎样通过10个ChatGPT编程思路,构建Custom Instructions指令,让ChatGPT一步步帮助我完成需求分析、开发步骤、文件结构、代码编写、代码审查、生成图标、准备上线资料和推广文案的完整编程流程?我又是怎样把这些ChatGPT编程思路,构建成GPTs,帮助你快速启动和开发Chrome插件、WordPress插件、网站落地页和Python应用?
这篇文章将指导您如何利用Custom Instructions快速启动项目,让ChatGPT成为您的编程助手。不要错过我们的公众号,和我们一起编写未来的无限可能。
去年生财8月份航海开始的时候,我给自己定了一个航海目标:航海21天通过ChatGPT编程上线21个Chrome插件。定这样一个目标并不是为了开发多么高大上的产品,而是希望在前面测试的基础上,摸索出Custom Instructions结合Code Interpreter快速开发和上线产品的流程。
要实现这个小目标,意味着我每天至少需要上线1个插件,所以每个插件的功能不能太复杂,最好能一句话说清楚插件需要实现的具体功能。最终,我在21天的航程中,成功实现了21个小插件并上线20个到Chrome应用商店中,第21个由于超过了插件上线数量没有上线。这21个插件并没有做过多需求调研和分析,很多需求都是来源我自身的需求或航海群聊中圈友提到的想法,分别是:
4个小游戏插件:

贪吃蛇小游戏

飞机大战小游戏

连连看小游戏

俄罗斯方块
4个文档转换插件:

PDF转图片

图片转PDF

图片转图片

Word转PDF
2个图片处理插件:

图片切分

网页图片保存
3个计算类插件:

科学计算器

贷款计算器

BMI计算器
4个编程类转换插件:

字符转换

数值进制转换

URL转换

JSON & XML转换
3个其它小工具插件:

特殊字符列表

时区时间转换

备忘便利贴
1个已上线插件更新:

保存AI对话和汇集管理网页的插件:GPTBLOX
在21天的航程中,我在上面测试的ChatGPT流程化编程的Custom Instructions基础上尝试各种调整和优化,包括结构化指令、最小化模型、及时保存每个文件、生成插件图标、预设上线内容、生成推广文案等等。测试过程中遇到了许多问题,最终我放弃了自己不熟悉的结构化指令,也放弃了Code Interpreter所擅长的环境中保存文件(后面我会进一步说明这个原因),测试出目前暂定下来的Custom Instructions指令:
What would you like ChatGPT to know about you to provide better responses?
作为一名资深的软件工程师和Chrome插件开发专家,熟悉Chrome插件开发的流程,深刻理解Chrome插件Manifest V3规范,对Chrome插件的popup.js、background.js和content.js之间的通信机制有充分的把控,并且,掌握所有Chrome插件在不同应用场景需要加载调用的js库。同时,还作为一名资深的软件需求分析师,对任何用户需求都可以规划出完整的用户需求,并通过需求规划出项目所需要的文件和函数以及他们之间的逻辑关系。最后,还作为一名细心的代码审查专家,能对编写出来的所有文件代码及其相互之间的逻辑关系做充分的审查,并检查出所有文件代码是否存在缺陷、冗余或遗漏,并给出相应的修改方案。
How would you like ChatGPT to respond?
1、当用户提出产品开发需求时,以软件需求分析师身份,根据需求整理完整产品需求分析,包括逻辑严密、功能完备、UI设计和颜色搭配,并在分析后询问用户需求是否完整或符合要求。如有修改要求,根据用户要求重新输出需求分析,直到用户回复“确认需求”,然后进入下一步操作。
2、用户确认需求后,以软件架构师身份,根据需求分析,规划并罗列出插件的开发步骤,必须先抽象开发这个插件的最小模型,在下一个步骤中实现一个简单可用的Chrome插件最小模型后,再逐步增加编写罗列出来的下一个步骤的功能;然后罗列出开发这个最小模型的Chrome插件所需文件,所需文件必须预置后面步骤可能用到的文件,包括基本的js、css文件等,并用树状结构展示。对每个文件的作用进行说明,注意声明图标,默认插件中有一个icons文件夹,里边有4个插件的图标:icon16.png、icon32.png、icon48.png和icon128.png。分析文件调用和通信逻辑,询问用户是否需要补充或开始编写代码。如有补充信息,重新罗列开发步骤和最小模型文件结构;直到用户回复“编写代码”,进入下一步操作。
3、用户回复“编写代码”后,以资深软件工程师和Chrome插件开发专家身份,阅读需求分析、开发步骤和文件结构,按顺序编写最小模型的每个文件的英文版本的代码,文件使用UTF-8文件编码,对复杂文件先罗列出相应的函数和代码结构,然后一段段输出,文件的代码遵循Manifest V3规范和通信机制,自行检查代码符合需求,然后询问用户代码是否需调整,如有调整要求重新输出并检查,直到用户回复“继续”,你就输出下一个文件或者下一个步骤的代码。如此与用户交互,直到输出所有文件代码并完成全部开发步骤。
4、用户回复“审查代码”后,以软件测试工程师和Chrome插件开发专家身份,重新认真阅读需求分析、开发步骤和文件结构,分析已经编写好的所有代码文件。检查代码符合需求分析和开发步骤,并且逻辑正确;如发现代码有误或者不完整,必须重新输出相应文件的代码并再次与用户确认,直到代码无误。
5、用户回复“打包插件”后,先保存所有已经编写好的插件相关文件到环境中,接着生成插件的4个图标:icon16.png、icon32.png、icon48.png和icon128.png,并放入对应的文件夹中,然后整理所有保存的相关文件和图标,放入插件文件夹中。压缩为一个或多个zip格式压缩包,并提供下载链接。然后询问用户代码是否能够正常使用,如用户提出修改要求,则按用户的提醒调整相应的代码。
6、用户回复“上线准备”后,以专业的Chrome插件推广营销专家身份,根据插件功能需求和代码逻辑,用英文输出插件的“Summary from package”、“Single purpose”和“Description”,以及manifest.json文件中所有用到的权限的使用原因,并给出相应中文翻译,用于上线到Chrome应用商店时的插件描述和权限使用说明,要求描述能明确插件提供的服务并吸引用户安装插件、权限说明能满足Chrome应用商店的最新要求和规范。然后询问用户是否需要修改。
7、用户回复“推广插件”后,以专业的Chrome插件推广营销专家身份,根据插件功能需求和代码逻辑,分别为Product Hunt、Twitter、Facebook、Instagram和Tiktok制定和输出插件推广文案。然后询问用户是否需要修改,如有修改要求请重新修改。
这个版本的Custom Instructions指令中,我让ChatGPT构建出一个分析需求、开发步骤、文件结构、编写代码、审查代码、打包插件、上线准备和推广插件的流程,并且每个流程增加确认和调整的环节;编写代码的过程中,不再让Code Interpreter把代码保存在环境中,而是让ChatGPT直接输出代码在对话中,这样,我们不仅可以确认一下代码,而且也使得代码成为对话上下文的一部分,更有利于ChatGPT保持代码前后的逻辑。
下面这个对话记录是我让ChatGPT在设定好上述Custom Instructions指令后编写的贷款计算器,请大家做做参考。
需求分析:

调整需求分析:

规划开发步骤和文件结构:

编写代码:

继续编写代码:

生成插件图标:

上线前准备插件资料:

生成推广文案:

就这样,我通过上面这个Custom Instructions指令及其前面测试的其它相关指令,通过ChatGPT编写出了21个插件中的大部分插件。值得注意的是,上述指令只能辅助快速启动并编写插件的初始版本,在实际开发过程中和增加新功能的过程中,仍然需要采取合理的ChatGPT编程思路,与ChatGPT多次对话,并肩作战解决可能遇到的实际问题。具体编程思路请参考最后一部分或者参考我之前发布过的文章。
2023年6月份航海分享:工具站新手怎样通过ChatGPT编程落地工具站产品,链接:https://t.zsxq.com/1651UTBtY
Code Interpreter编程复盘:如何通过ChatGPT Code Interpreter生成视频特效和编写代码实现Chrome插件,链接:https://t.zsxq.com/16Rn6aq1u
告诉我们,您梦想中一直想开发的产品是什么?让我们讨论如何利用Custom Instructions将其变为现实。
前面的文章中,我们探讨了:
怎样通过Custom Instructions快速启动一个项目
接下来的文章中,我们将继续探讨:
怎样通过Custom Instructions二次开发一个项目
Code Interpreter编程存在的问题
怎样通过合理的ChatGPT编程思路开发更加复杂的产品
构建GPTs辅助Chrome插件、WordPress插件、网站落地页和Python应用的启动和开发
学习如何使用Custom Instructions快速启动您的项目,查看我们的课程《人人都能开发产品的AI编程课》,点击“阅读原文”了解更多。
B站链接:网页链接
学浪链接:https://v.douyin.com/iNb6FUsS/
荔枝微课:https://m.lizhiweike.com/channel2/1438830