即刻App年轻人的同好社区
下载
App内打开
lv.liu
13关注40被关注0夸夸
探索AI时代下前端的转型(超级个体)之路|《AI赋能前端研发从 0~1》开源电子书:https://ai.iamlv.cn
lv.liu
1天前
之前我心里一直吐槽 Cursor 生态的客制化能力有点弱,就对外暴露了一个 .cursorrules,作为项目全局的 prompt rules 注入,我其实不太看好这种形态,因为编码工作流的场景蛮多,没法在一个文本形态的 cursorrules 中就能够解决所有场景。

不过我这两天简单验证了一下另外一种定制化方案,作为Cursor的重度使用者来说,这波值得分享!

我尝试把自己的一些工作流,比如 Figma To Code,私有知识 RAG 等工作流以 Command 执行 Tools 的方式集成到 Cursor 中,就像类似于 Cline 中可以通过 MCP 即成外部的自定义服务、GitHub Copilot 可以集成自定义 Extortions 一样。

大概原理是:在 .cursorrules 中添加某个 tools 的声明(比如 figma to code 的 tool ),让 curosr composer agent 在某个场景下通过执行 command 的方式来调度这个 tool,比如当用户输入了一个 figma 链接之后,就执行 `npm run figmatocode "www.figma.com"` command,执行的同时将 code 打印出来(这样 cursor 就能够感知到),执行完毕之后,让 cursor composer 自行调度内置的 eidt_file tool 把代码保存到 IDE 中。

理论上,任何跟 Coding 相关的工作流都可以通过 Command Tools 的方式集成到 Cursor 中,可玩性拉满。

这应该是程序员普遍接受度比较高的AI编码产品形态了,未来大量的针对不同编码场景下的工作流直接集成到 IDE 中,灵活性、专业性、AI赋能 三不缺。

期待 Cursor 官方尽快开放直接接入类似于 MCP Tools 的能力。
32
lv.liu
6天前
刷到很多:零基础编程人员通过AI编程做出各种网站。 关于零基础:真要是一个刚毕业的非程序人员,连html、css、js,基本计算机网络都不懂,能做出来吗?能够真正拿到成果的人,背后的已有的经验积累是你看不到的,很多做出成果的都是产品经理、设计师等这种编码上下游的人员,本身对于编码的工作流和程序的形态有多年的耳濡目染。

同理,在公司上班,不只关心自己的一亩三分地,有摸鱼的时间多了解上下游的工作流、学习他们的相关技能(或许他们也已经在“虎视眈眈”),在有一定积累后,前端也可以借助AI,搞定产品、UI设计、后端、运维,不是在公司取代他们,砸人家饭碗,而是在新潮流下给自己积累一些竞争力,多一些选择的机会、多一点晋升或自由的概率,这,是趋势。 像Vercel已经诞生了一个新的岗位:Design Engineer(集UI设计+编码的双才岗)详见:vercel.com 未来上下游不同工种间的组合(FullStack、DevOps、DevQa、PoDev)在AI的助力下会越来越多,门槛也会越来越低。
排列组合那么多,前端er,你中意哪款CP?
105
lv.liu
3月前
微软发布了一个AI驱动的 micro apps (微型应用)代码生成器:GitHub Spark

产品愿景:将应用程序(micro apps)创建成本降低到零

一些思考 🤔

这是我目前看到第一个官方说明聚焦构建 “micro apps”的AI产品,这个产品定位很清晰,也比较稳妥。

其它的代码生成AI产品比如:bolt.new,官方表达的是AI构建全栈项目,其实实际上也是 “mirco apps”。

真正复杂的全栈项目,里面涉及到的技术栈、代码规范、可维护性,代码量等,肯定是无法通过这种产品形态来承载的。

但是小而美的 micro apps,也能够解决某类人群某个场景下的某个细分问题了。

未来,每个人的每个小创意都可以通过AI驱动的 micro app 生成器发布出去。

详见:githubnext.com

加入waitlist:github.com
02
lv.liu
3月前
关于如何在公司前端研发中落地AI、以及前端AI产品发展的趋势的思考🤔️
01
lv.liu
3月前
前几天研究了一下最近挺火的bolt.new,总结了下:

项目主要是stackblitz公司为了营销其浏览器端的全栈运行沙箱WebContainer API:webcontainers.io打造的一个开源项目。

对于非技术人员来说,确实会比cursor或者v0更加惊艳,相当于把整个研发的环节,项目环境、全栈代码生成、以及发布流程都集成了,可以凭需求、想象力和自然语言表达上线一些小的创意性产品。

对于开发人员来说:

- 可以做一些简单的Demo程序,类似于脚手架初始化项目

- 可以学习一下他的提示词是如何写的,如何生成多文件代码:github.com

- 如何基于AI返回的结构化内容触发界面的交互调度:github.com

- 如何基于stackblitz的 WebContainer API运行可视化运行全栈代码:github.com
117
lv.liu
4月前
习惯性早起🚶思考,总结一下最近一个月左右的时间在前端AI上做的事情,主要的精力和时间都在探索AI驱动的Design To Code,经过在实际项目中的初步运用,最终的结果是:

1)从布局样式来看,还原度可达到95%以上,相比较多模态AI驱动的 Image To Code,已经遥遥领先了。

2)从代码上来看,不是生成简单的div之类的粗暴代码,而是能够结合公司的代码组件库来生成代码,比如antd、mui、私有组件库等。

3)从时间上来看,比如针对一个页面,之前可能需要4个小时的时间来还原布局样式以及业务逻辑,现在借助Design To Code,花几分钟的时间生成样式和布局,再花几分钟的时间基于业务规则生成业务逻辑,整体10分钟左右,这种提效是很明显的,开发人员相当于直接拿D2C生成的页面来对接后台api数据就可以了。

一些思考和建议:

1)如果公司的研发工作流是相对规范的,有专业的UI设计人员,建议探索一下design to code,这件事带来得提效是巨大的,同时借助AI,这件事比常规的design to code简单,而且生成的代码质量也有过之而无不及。

2)推荐使用Figma作为设计工具,它的整个生态和设计理念跟前端的契合度是很高的(自动布局对应flex,main component 对应 code component),通过Figma插件,可以很好的收集页面元素信息。

3)前端人可以学习一下ui设计相关的知识,比如怎么用figma做设计稿,再配合d2c,相当于一个人可以快速搞定 ui设计、前端研发。

#前端ai
03
lv.liu
5月前
《AI赋能前端研发从0~1》系列更新了!这一篇,万字长文实操!

如果想要获得最佳的阅读体验,可以直接看电子书:ai.iamlv.cn

AI落地前端实操,带你成为公司最懂AI的前端大佬!

00
lv.liu
5月前
amazing... 好好好,AI + 前端真是越来越有意思了。
00
lv.liu
5月前
新的 v0.dev 进化成了 claude artifacts ?[捂脸]

大家觉得哪个版本的交互更好?

x.com
00
lv.liu
5月前
在美团点个肯德基疯狂星期四,需要修改一下订单,找商家沟通,发现背后应该是一个AI Agent客服,很丝滑的体验~

可以想象未来很多复杂的前端GUI交互都可以融入到这样一个体验丝滑的聊天窗口中…

#AI工作流
01