用 AI 编程,半夜的我放声大笑

197 天前
 mogutouer
一个比较复杂的页面,滚动时导航栏要浮动变透明还有磨砂玻璃效果,所有页面元素渐出渐入,图片载入渐入,切换分类时缓动消失再出现,还有横滑 banner 竖滑 banner ,每个按钮都有交互效果,每个元素与鼠标都有互动,页面切换像 APP 一样逐个消失再逐个出现,适配 PC table mobile ,数据还要与后台交互,还得本地缓存以便第二次访问可以直接显示,打包 APP 时顺便读取最新的首页数据缓存一个最本地数据,让用户首次打开时加载数据前也有内容可看。

以往这种页面光是写 css 就最少得搞一天的,更别说写接口文档处理前后端还得写脚本处理打包前的逻辑。

而现在 AI 编程,吃完饭,晚上家人都睡了,我只花了半个多小时便完成,当然也是要提前规划好然后都写到一个非常明确并且有逻辑的提示词里。

我突然就笑了,一周的工作量,我一边看 B 站,一边打几个字,不到一个小时就完成了。而这种效率的工作辅助,我每个月只需要掏 16 美元。

笑的同时,在这夜深人静的夜晚,有一种无法言语的心境。
10127 次点击
所在节点    职场话题
67 条回复
dcdlove
195 天前
按这个迭代速度,很快不管前端后端大部分都要由笑转为哭
mogutouer
195 天前
@shunia #60 AI 不会乱写代码,只有你的要求不清晰。

这种一般是给他个图,然后每一块都描述,比如

根据上图做一个新页面 index.vue 放到 xxx 目录下。
1. 首页数据来自 xxx 接口,接口返回内容如下:{data:xxxxx}(这里直接把接口返回结果贴上来)
2. 顶部的导航栏需要在页面滑动时背景根据页面滑动位置逐渐变为透明,并增加阴影和磨砂玻璃效果。
3. 导航栏下面时横向轮播 banner ,自动播放下一张,需要注意最后一张结束时与第一张流畅衔接。每一张图片要增加空背景的 loading 效果,图片载入完成后应该渐入出现。
。。。。

每一个都尽量描述清楚你要的效果,当然你不描述的太仔细也没问题,只是后面也是要反复修改,也没多大问题,只要你描述清楚哪个位置要怎么改,他不会乱改其他部分。

整完之后看看,有修改的就提具体位置和需求给他,完事儿之后说一句:
按照当前页面的元素位置和样式,把数据载入前的 loading 改为骨架屏效果

最后的最后,为了节省剩下页面的制作时间,让他 把上述风格和设计,汇总到 xxxx.md 文件,以供我在制作其他页面时作为风格参考,第一个页面多花点时间调效果,这样你其他页面就会做的非常快速,后面基本都能一次成型。
这样你在做其他页面的时候就不用重复描述太多设计和动画上的需求,同样已经存在的页面,你也可以 @这个 md 文件,然后说 请帮我把 xx 页面设计风格参考 xxx 文件进行统一修改,设计要点你可以参考 xxx.md


当然这些前提你要写好 .coursorrules ,以及 globalrules ,这里面描述了你项目的基本情况,比如说这是个什么项目,用了什么技术,用了哪些库,图标用哪个,公用组件都有哪些,一些重点目录是干嘛用的,你如果懒得写就每次 @一个文件让他参考。


总的来说,你把 ai 当成一个新入职的刚接手项目的能力非常牛逼的员工,你让他干活儿,你至少要给他描述清楚需求,给他讲讲项目背景和概况。



很多人用 ai 编程觉得不好用,就是自己的角色没有定义好,你的角色不是老板,不是你说一句话他就帮你干完,要再往下一层,来到项目经理再往下一点,类似 项目经理+CTO 的角色。你既要提出老板需求转换成项目经理的需求,也需要你懂技术能规范具体的技术细节。把自己的思考重心放到程序员的上一层,具体实施这种苦力活儿就交给 AI 。

又有很多人觉得我写这么多东西不如自己完成了,但你要想一下,这些要求这些细节,你就算自己做,你迟早也要想清楚流程,要去实施具体效果,你为什么不一开始就做好这一步,磨刀不误砍柴功正是如此。上面有位朋友说 AI 干不了这个干不了那个,我可以明确的说,只要编码方面人能干的,AI 就一定能干。一些小众库甚至个人非 github 平台的库,你可以直接 @源码目录,让他先分析然后写总结到一个 md 文件,之后 @这个 md 文件来让他使用,不要傻乎乎的只提供个名字最后得出 ai 不行。

以上是我这几个月,每个月 1-2 千次对话,完成数个新项目,数个老项目的经验,仅供参考。
shunia
195 天前
@mogutouer #60 你这个说的很好,总结的也很清晰,说真的我觉得值得一篇博文认真说明和分析一下。

目前对 AI IDE 的使用,普遍都是一个比较粗放的状态,很多人其实是根本没有想到这么细的,所以都会觉得 AI 能写,但写的很难用还总出问题。另外目前主流的设计图到代码的 AI 类产品比如 v0.dev 其实也是隐式的鼓励大家使用一些粗放的提示语,通过不停的修改来实现产品目标,所以一直给人的感觉也是很难用。
mogutouer
195 天前
@shunia #63 是的,确实大多人第一次接触都有这种感觉,要真正达到想要的效果,是必须要多轮对话才能完成的,AI 开始给你的肯定是一个非常粗的框子。我的经验是开始花多一些时间调教出一个满意的页面,一个满意的 API 对接,然后把你调教的成果转成文字描述的文档,给之后的页面和接口进行参考,这样就免去了每一个新页面新接口都要反复修改的工作量。
noparking188
195 天前
@mogutouer #62 感谢老哥经验分享,这样我可以要求设计出原型图时每块提供这样的文字说明描述。我还看到一个 figama-contect-mcp 项目,直接从 figama 原型图走接口拿到 figama 文件源码,直接生成前端项目代码
laminux29
161 天前
还半夜放声大笑,别吓噶邻居了,但凡你认真了解一下人工智障的原理,也不会有这种误解。

目前人工智障在算力以及记忆力方面,受限于显卡性能低、显存容量低,就算写一个多规则约束的 function 的任务,都不一定能 100% 按约束搞定,更别提你这种工程化的任务了。

别听那些 AI 厂鼓吹他们的产品,谁信谁就是小白鼠。
gotosre
90 天前
@anyele 包年的 cursor

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

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

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

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

© 2021 V2EX