Reader

前端天塌了!AI工具same.dev 5分钟还原生成B站,包含完整的工程化代码,支持Vue&React!

| 掘金本周最热 | Default

大家好,我是日拱一卒的攻城师不浪,致力于前沿科技探索,摸索小而美工作室,这是2025年输出的第14/100篇文章。

早就预料到AI要颠覆前端,但没想到,镰刀挥下来的速度竟如此之快!

一觉醒来,前端工程师们的天要塌了!来看看新发布的https://same.dev

Same是什么?

Same是一个专注于帮助用户快速复制任何UI界面的网站。它的核心功能是通过输入目标网页的URL,利用计算机视觉机器学习模型网页爬取技术代码生成引擎等多种前沿技术,精准地分析并提取该网页的UI元素,然后生成一个与原网页几乎一模一样的复制品。

无论是复杂的布局、精美的配色,还是独特的交互效果,Same都能轻松搞定。

这对于那些需要快速搭建原型、进行设计参考或者学习优秀UI案例的设计师开发者来说,无疑是一个巨大的“福音”。

例如,假设你是一个初创公司的产品经理,正在寻找一个简洁而高效的登录页面设计灵感。

你偶然发现了一个非常符合你需求的网页,但苦于自己没有足够的设计能力去实现它。这时,你只需将该网页的URL输入到Same,就能得到一个高度还原的复制品,然后你可以在此基础上进行修改和完善,大大节省了时间和精力。

以前,前端工程师总是被吐槽小鸡啄米,这下好了,连小鸡都用不上了,可以回家拔拔鸡毛炖起来了。。。

然而,更可怕的是,same.dev还能帮你输出完整的工程化项目,包含完整的前端工具链:tseslintprettiervite等。

说句实话,这工程搭建能力,已经吊打了大部分的初中级前端工程师了!

这里我输入了B站的网址,点击回车,静等几分钟,最终,一个完整的B站首页已经帮你部署出来了(甚至还帮你发布了,泪目!):https://bilibili-clone-app.same-app.com/

模拟的B站首页

看,多么的完美无瑕,如果你有不满意的地方,只要稍加修改,这样,2天的工作量,AI5分钟就帮你搞定了,关键代码质量还比你强,你说你气不气!

Same带来的变革

前端工程师

Same工具无疑是能够大大提升前端工程师的开发效率的,这样也有助于工程师们更加专注于业务的研发,复杂的交互逻辑以及高性能优化等方面,从而减少耗费在页面UI上的时间,特别是设计师们经常纠结的1px问题😀。

同时,也能够带来代码质量的提升:由于 Same 能够生成较为规范的代码框架,工程师可以在其基础上进行优化和改进,从而保证代码的可读性和可维护性。通过对比和学习生成的代码,工程师还可以发现自己的不足之处,进一步提升代码质量。

当然,这也给一部分前端带来了不少的压力,特别是一些初中级前端儿们(页面仔),如果还不快速提升自己,那么以后你们的页面,可能大部分都要被AI所替代了。

独立开发者

无疑,Same的诞生大大降低了独立开发者的工作量,因为它既能模仿优秀网站的UI设计,又能生成优秀的前端工程代码,可以说直接省掉了一半的设计和研发成本。

这样一来,独立开发者们就能够用节省下来的时间去享受美好的生活啦,毕竟生活大于工作嘛~