输入关键词搜索 AI 工具、分类,或直接跳转页面
Napkins.dev 是一个基于AI技术的设计草图转代码平台,核心定位是将手绘或线稿形式的网站设计草图快速转换为可运行的前端代码。平台搭载Llama 3.2 90B Vision视觉模型,可精准识别草图中的页面布局、组件类型、样式特征,直接生成React + Tailwind技术栈的代码文件。目标用户覆盖前端开发者、UI设计师、独立产品开发者、初创团队技术人员等,适用于产品原型快速验证、前端项目初始框架搭建、设计稿快速还原、个人小项目快速开发、教学Demo快速实现等多种场景,帮助用户减少基础代码编写的工作量,将更多精力投入到复杂逻辑开发与交互体验优化中。
访问Napkins.dev官网,可选择使用邮箱账号注册登录,也可直接使用游客身份使用基础功能,登录后可解锁历史记录保存、批量导出等进阶功能。
点击页面的上传按钮,选择本地存储的手绘草图、线稿设计图或UI示意图,支持JPG、PNG、WebP等常见图片格式,单张图片大小不超过10MB。
等待平台完成图片识别与代码生成,通常耗时10-30秒,过程中可查看识别进度提示,完成后会自动跳转至代码编辑与预览页面。
在左侧代码编辑区调整生成的代码内容,右侧预览区可实时查看修改效果,也可切换不同设备尺寸的预览模式,验证多端适配效果。
确认代码符合预期后,点击导出按钮选择导出格式,可直接复制代码或下载项目压缩包,完成后可在个人中心查看历史项目记录。
看完教程,直接上手试试
访问 Napkins.dev 官网