前端开发必备🔥分享我在用的三个免费AI工具,每天少搬砖3小时!

☀️ 前言

  • 大家好,我小卢,现如今,AI 已不再是可有可无的辅助技能,而是每位程序员都应掌握的基础能力

  • 今天给大家分享我经常在用的3个免费在线 AI 工具,可以让你的代码生活变得更智能、更高效。

v0.dev

  • 这是一个AI生成原型图和前端代码的页面。

  • 相信有很多同学都会认为AI生成前端页面代码是一件很鸡肋的事情,我一年前也是这么想的,但是当我真正用上了AI之后发现并不是这样的。

  • 虽然AI不能完美帮你切图,做好一个完美的页面,但是对于一些简单的页面他可是有大用处,

  • 比如说,我想要做一个登录页,我只需输入 prompt,然后一个登录页的基本框架就做出来了,旁边还可以看到他的代码,并且是用 tailwindcss写的。

  • 我们直接复制到项目中就可以使用了,如果你不满意的话,还可以跟他持续对话让他来修改。这一个页面看上去很简单的是吧,但是如果让我们自己去写的话肯定还是会费一点时间的,还得思考一下排版什么的。

  • 但是用AI就可以几秒钟生成了,我们再对其进行微调即可,改改背景色啊,字体大小啊什么的。

  • 一个页面是如此,很多个页面也是如此,一个很复杂的页面你也可以将它划分成组件来AI生成,这确实可以帮我们节省很多时间。

  • 当然他也支持上传图片生成原型和代码,感兴趣的朋友可以试试看。

  • 地址:https://v0.dev/

AI Colors

  • 大家开发网页的时候肯定有遇到过颜色不知道怎么搭配的难题,这是一个适用于网页开发的调色板,用到的颜色都会通过示例卡片进行展示。

  • 它不仅内置了很多好看的配色板,还有各种用户生成的色板趋势排行榜,最重要的是他还可以通过文本AI生成你想要的主题给你生成对应的色板

  • 比如我们输入 Cactus Green Plant ,类似仙人掌主题的风格,他会在示例网页卡片中给你搭配好对应颜色,并且在下面会给出你所有色值。

  • 我们点击左边的 views,他会分别在移动端 概览页 个人页 landing page 等页面应用刚刚生成的配套颜色,我们还可以再编辑页面对颜色进行微调,是不是很直观,这个真的很适合独立开发或没有UI的项目提供灵感和帮助。

  • 地址:https://aicolors.co/

Anakin.ai-代码函数变量命名

  • 这是 Anakin.ai 的一个应用,作为开发,我们写代码的时候经常会遇到函数或者变量不知道怎么命名的情况,然后这个时候呢就会很头疼,好不容易想出来了但是感觉这个命名又不够地道,这时候就很烦。

  • 那么这时候我就会用这个工具,我们只需要选择是给函数命名 还是变量 ,简单说明一下这个变量是干嘛的,然后选择命名风格,驼峰还是常量等 ,点击生成,他就会给你生成对应数量的命名参考。

  • 并且!!!他还给你解释,为什么要用这个命名,让你去选择,这不就相当于让别人给你打工嘛,真的很实用。

  • 地址:https://app.anakin.ai/apps/1760?r=dCgkHklC

👋 写在最后

  • 很久没更新了,至于去干什么了,主要就是做视频去了,这篇文章在b站也有配套视频欢迎大家食用。

  • 如果您觉得这篇文章有帮助到您的的话不妨🍉🍉关注+点赞+收藏+评论+转发🍉🍉支持一下哟~~😛您的支持就是我更新的最大动力。

  • 如果想跟我一起讨论和学习更多的前端知识可以加入我的前端交流学习群,大家一起畅谈天下~~~

相关推荐
F-2H1 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
WebDeveloper20011 小时前
如何使用美国域名中心US Domain Center和WordPress创建商业网站
运维·服务器·css·网络·html
gqkmiss2 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247554 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255024 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203985 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2345 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1236 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~6 小时前
npm error code ETIMEDOUT
前端·npm·node.js