兄弟姐妹们好啊!我是【开发者掘金】的松鼠!
最近摸鱼的时候发现了一个神器,简直让我整个人都惊呆了!
做前端的同学们都懂,产品经理一个"简单"的需求截图甩过来,背后往往藏着数小时肝。
"这个页面很简单,按照截图开发一下。"
"看看这个竞品,我们也要做一样的!"
"设计稿我发你了,尽快还原一下~"
听到这些话,你是不是也想笑哭了?
兄弟姐妹们别慌,今天松鼠给大家带来一个好工具
不用手写代码,截图就能转代码!这波属实是给咱们开发者派发神器了!
今天要安利的这个开源项目叫 screenshot-to-code 。
这名字起得是真够直接的,就是能把截图转成代码,狠狠地戳中了我们的痛点!
想象一下,你只需要截一张图,或者丢一个网址过去,它就能给你吐出一段完整的前端代码 。
刚发现这个项目的时候,我也是半信半疑的。作为一个被CSS虐过无数次的前端开发,我对这种"神器"总是带着怀疑的态度。但是...
讲真,我第一次用的时候,内心OS是:切,不就是个玩具嘛?
但是...当我丢了一张网站的截图进去后...
好家伙!直接给我整出这么一个效果:
不得不说,这代码生成的,比我手写的都规范!
它是咋做到的?
这工具背后藏着一些比较牛的AI 模型:
-
最新的 AI 视觉识别:
-
Claude 3.5 和 GPT-4 加持,比较强的还是 Claude
-
看图能力比某些初级开发都强...(别骂了别骂了)
-
智能布局分析:
-
自动识别页面结构
-
连嵌套都给你处理得明明白白
-
样式处理:
-
Tailwind CSS 一把梭
-
就是这么丝滑,就是这么优雅!
-
HTML + Tailwind(最常用)
-
HTML + CSS(老派经典)
-
⚛️ React + Tailwind(主流选手)
-
Vue + Tailwind(尤大粉丝福利)
-
️ Bootstrap(怀旧必备)
-
⚡ Ionic(移动端福音)
-
SVG(图形必备)
-
Claude 3.5(真快)
-
GPT-4(真准)
-
DALL-E 3(整点花活)
经过这段时间的疯狂试用,我总结了几个实用小技巧:
想快速出效果的时候,用Claude 3.5就够了,响应速度贼快。要是追求完美还原,那就得请出GPT-4这位大师了。
还有一个省钱小窍门,在调试阶段可以开启模拟模式,等调试好了再用正式模式输出代码,这样能省下不少API调用费用。
说实话,当我第一次用这个工具的时候,还真有点担心我们前端要失业了。
但是用着用着就发现,它更像是我们的得力助手,帮我们省下了大把的重复劳动时间,让我们能专注在更有意思的事情上。
-
GitHub:https://github.com/liseami/screenshot-to-code
最后,如果觉得这篇文章对你有帮助,别忘了点个赞!❤️
有什么使用心得也可以在评论区嗨起来,松鼠在下面等你!
对了,想要更多掘金干货,别忘了关注我们的公众号:"开发者掘金",我们不止会更新这些实用工具,还有更多赚钱、接私活、副业的干货等着你!