输入关键词搜索 AI 工具、分类,或直接跳转页面
Abstraction是一款专注于生成SVG插画并可直接导出为React组件的在线设计开发工具,面向设计与开发人群提供一体化解决方案。核心功能包含AI辅助生成抽象风格SVG插画、自定义插画参数调整、一键导出符合React规范的组件代码、在线预览组件渲染效果、支持代码二次编辑等。该工具可帮助前端开发者快速在项目中引入定制插画,也可帮助UI设计师快速生成可复用的设计资源,适用于前端项目开发、产品原型设计、个人博客搭建、开源项目维护等多种使用场景。
打开Abstraction官网,点击页面右上角的登录按钮,可通过邮箱注册账号或使用第三方账号完成登录,未登录用户可体验基础生成功能但无法保存历史资源。
进入创作页面后,在输入框填写你需要的抽象插画风格关键词,设置插画的宽高尺寸,点击生成按钮等待平台生成插画方案。
从生成的多个方案中选中符合需求的初稿,进入参数调整页面,根据项目需求调整线条、配色、构图等参数,实时预览调整后的效果。
调整完成后,可进入代码编辑页面,根据项目需求调整组件代码,修改组件命名或添加自定义交互逻辑,完成后预览最终渲染效果。
确认效果无误后,点击导出按钮,可选择直接复制组件代码到剪切板,或下载对应.jsx文件到本地,导入到自己的React项目中即可使用。
看完教程,直接上手试试
访问 Abstraction 官网