如何一键生成前端代码

作为后端程序员，我一直想独立开发一个产品，哪怕只是一个简单的落地页。但由于前端开发对我来说颇有难度，这个愿望一直未能实现。

直到 ChatGPT 发布，我才借助它来共同开发了一个名为“Bulk Delete ChatGPT”的插件，至今已拥有超过1600名用户，并时常收到好评。

由于插件依赖于 ChatGPT 官网的页面样式，而官网经常更新，因此需要频繁更新插件代码。但由于我的能力限制，无法及时发布最新版本，这也导致了一些差评。

在我发布了三次变更后，我就想能不能在插件里加一个通知功能啥的，这样万一官网有升级，插件不能工作了，也有个通知让用户知晓。而且当我发布新版本后，也可以给用户发布一条通知。但是最终感觉这个有点难度，而且需要申请很多权限，审核难度比较大。最终放弃了。

不过因为我经常更新版本的行为感动了自己，所以我加了个乞讨按钮，企图得到国际赞助，然而并没有：

后来，我听说开发网站并吸引流量后可以投放广告、赚取广告费。因此，我决定尝试制作一个落地页，以探索这一流程。

直到最近，几款一键生成前端代码的工具的出现，帮助我成功制作了一个落地页。我尝试了两种工具：

• tldraw

• screenshot-to-code

先用了 tldraw，发现只能生成一次，之后想要优化就不知道怎么做了。（也许是我没找到方法）

之后又用了 screenshot-to-code 这个工具，他可以方便地进行迭代：

最终出来的效果是这样的：

网址是：https://chatgpt-bulk-delete.qcrao.com/

效果非常好，缺点是这两个工具都需要有 OpenAI 的 API key，要花钱的。

整个过程是这样的，希望能给你一点参考。

我先画了一张草图，要求它生成一个初版网站：

初版和草图比较像，都是黑白色：

接着我让它进行调整，根据一个主色做一个渐变调整：

背景色调成黑色：

中间也碰到了一些其他的具体问题，不过可以把代码喂给 ChatGPT 来解决。一些知识性的问题问 ChatGPT 就太合适了。比如我不知道 Tailwind CSS 里代码的作用：

我的这段经历，虽然充满了技术挑战和不断地调整，但它也展示了一个重要的道理：在现代技术的辅助下，即使是非前端专家，也能创造出令人满意的作品。这不仅是对个人能力的一种挑战，更是一次新技术应用的探索。我通过实践学到了很多，也体会到了技术带来的便利。

即使面对看似难以克服的技术障碍，只要我们愿意尝试新方法，就总有解决问题的途径。我的例子或许不是最完美的，但它证明了一个观点：不断学习、适应新技术，是我们在这个快速发展的时代中保持竞争力的关键。

最后，我想说的是，无论你是一名程序员、设计师，还是任何领域的专业人士，都不要害怕技术的快速发展。拥抱变化，利用新兴技术，将你的创意变为现实。