专为公众号引用链接设计,一行代码没写用 ai 开发了一个链接转图片的网站

181 天前
 windliang

微信公众号文章不能加入外链,有时候会引用很多网站的链接,但大家想看的话还得复制到浏览器再去打开,最简单的方式就是贴一个链接二维码来解决。比如用草料二维码直接用生成:

但如果文章单独贴一个二维码会很突兀:

于是就有了这个网站,qr.windliang.wang

输入网站地址就可以生成下边的图片:

利用二维码占据的高度,把标题和网站介绍都填充过去。

其实想做这个网站很久了,但因为懒一直没做。虽然功能很简单,但如果自己开发起来,去写 ui 、处理交互、再学习 canvas 相关的,顺利的话估计也得一个周末。

但现在不同了,有了 Cursor ,我可以一行代码都不写,通过和 Cursor 聊天就完成了网站的开发。

正如这个文章所讲的:

有一句老话:创意很廉价,执行才是一切。然而,AI 颠覆了这个说法,执行现在很廉价,整个开发时间和交付速度的概念都不同了。

未来属于那些有想法、还能动手去做的人。

网站的初始交互和 Cursor 对话一次就完成了开发:

我现在需要写一个新项目,作用是为微信公众号提供链接转二维码图片的功能。

用户输入链接,输出一张图片,包含链接的二维码、网站标题、网站简介。

网站现代化一些,可以使用 Next.js 和 TailwindCSS

考虑网站的 SEO 优化。

我准备把项目开源,请写一个 ReadMe 。

接着 Cursor 就开始干活了:

项目:链接转二维码图片(微信公众号工具)

项目概述

  • 功能:将链接转换为包含二维码、网站标题、网站简介的图片
  • 技术栈:Next.js + TailwindCSS
  • 目标:开源项目,注重 SEO 优化

任务列表

1. 创建项目基础结构 [ ] 初始化 Next.js 项目 [ ] 配置 TailwindCSS [ ] 设置基本目录结构 [ ] 2. 开发核心功能 [ ] 实现链接输入和验证 [ ] 集成二维码生成功能 [ ] 实现网站信息抓取(标题、简介) [ ] 实现图片合成功能 [ ] 3. 前端开发 [ ] 设计现代化 UI 界面 [ ] 实现响应式设计 [ ] 添加加载状态和错误处理 [ ] 4. SEO 优化 [ ] 配置 meta 标签 [ ] 实现动态 SEO [ ] 添加 sitemap [ ] 5. 文档编写 [ ] 编写 README.md [ ] 添加使用文档 [ ] 添加贡献指南

当前进度

准备开始项目创建

这种让它列出执行计划,可以参考鸭哥的 搏一搏,$20 变$500:一小时魔改 Cursor 变身 Devin

接下来就是根据自己的需求再调整交互细节,比如将图片的主标题、副标题加入一个表单:

调整调整 ui:

ui 的调整方面 ai 还不太擅长,可能会遇到改对了 B ,又把之前改好的 A 搞没了。应对这种情况我们可以把需要的需求一次性描述给它。发现不符合,不要继续对话,而是编辑原来的输入词让它重新来过。

还有就是到一个可用的节点之后记得及时 commit 方便我们随时回退。

遇到错误不用慌,把错误粘贴给它,它会自动修复:

它在写代码过程中会自动修复自己写的 lint 问题,最终给我们一个可用的代码:

之前还需要自己考虑移动端的展示,现在 AI 也帮我们直接完成了:

之前开发就是自己的全部时间投入进去开发,现在更像我们有了自己的小弟,在做其他事情(锻炼身体、逛网站)的间隙,和它对对话,预览预览效果,一个网站就开发完了。

正如之前 Ai 杂想 中介绍的,一切都变了:

  • 编程范式正在经历一场革命:从面向过程到面向对象,再到函数式编程,现在我们迎来了面向 AI 编程的新时代。传统的编程语言( C++、Python 、JavaScript 、Java )可能会逐渐转变为类似汇编语言的角色——我们知道它的存在,但不再需要深入学习它。未来的主流编程方式将是使用自然语言。
  • 未来技术文章作用会越来越低。在学习新技术、解答技术疑惑方面,AI 的能力已经超越了传统的技术文章。未来,技术写作可能会更多地聚焦于个人经验分享、企业实践案例等独特内容——那些 AI 无法替代的真实经历和洞察。
  • 这标志着开发者角色的重大转变:我们正从具体实现者转变为需求描述者和结果验证者。我们变成了老板,Cursor 就像我们的 AI 员工,能够自主完成从需求理解到问题解决的整个过程。

好处是所有人都又回到了一个新的起点,新的一万小时定律开始了。以前是多写代码锻炼编程能力,未来就是多用 AI 、多用 AI 、多用 AI,熟悉和 AI 对话的边界,积累描述需求的经验,探索 AI 和当前工作的结合。

2167 次点击
所在节点    分享创造
10 条回复
88268459
181 天前
不错,是个方法
37Y37
181 天前
前两天也是试了下一行代码不写,全都交给 AI ,究竟能做出怎样的东西,就这玩意 https://blog.ops-coffee.cn/s/ai-powered-project-creation-from-start-to-finish.html 一个小玩具,没实现站里那些大佬 3 小时上线一个 AI 应用的效果,这不是 AI 不够强,主要还是我自己能力差,你这个就实用了很多
ZiLong
181 天前
虽然标题让人焦虑,不过还好我点进来了
ps:看了引用的文章,都是好文
ZiLong
181 天前
最近读的方糖的 (一篇文章)[https://ft07.com/ai-self-coding-learning-by-using/] 里面对于 ai 的观点也很有趣,他把 ai 比作信用卡,你可以先用,但是要做好,你还是要把某个领域的知识深入了解,相当于还信用卡
windliang
180 天前
@ZiLong 好文,赞👍
windliang
180 天前
@ZiLong 哈哈,不用焦虑,多用 AI 就好
windliang
180 天前
@37Y37 👍
ZiLong
180 天前
@windliang 不仅仅焦虑 AI 取代工作,也焦虑用 AI 用的不好,因为很多文章就说效果几分钟几小时实现啥啥啥,AI 牛逼,不说中间步奏,自己复现感觉不是那么回事,就感觉是自己用不好 AI 。
你这篇文章就把整个过程都呈现的很清晰,引用的文章和最好的思考结论都有价值
windliang
180 天前
@ZiLong 确实,也只能慢慢来学了,毕竟大家也都处于摸索阶段了
zhangkui
180 天前
https://code-box.fun/edit-quote 哈哈,我也做了一样的工具

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1115942

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX