使用 Napkins.dev 将草图转换为应用程序

在现代前端开发中，快速将设计草图转换为实际的应用程序代码是一个巨大的优势。Napkins.dev 是一个利用人工智能将网站设计草图转换成实际应用程序的平台。本文将介绍如何使用 Napkins.dev 进行这一过程。

什么是 Napkins.dev？

Napkins.dev 是一个开源平台，使用 Llama 3.2 90B Vision 模型来识别上传的图片，并生成 React 和 Tailwind 代码。这个工具对于前端开发者来说非常有用，因为它可以节省大量的时间，让他们专注于更复杂的开发任务¹²。

如何开始使用 Napkins.dev

第一步：访问 Napkins.dev

首先，访问 Napkins.dev 网站。你会看到一个简单的界面，允许你上传设计草图。

第二步：上传设计草图

点击上传按钮，选择你已经准备好的设计草图。Napkins.dev 支持多种格式的图片文件。

第三步：生成代码

上传完成后，Napkins.dev 会自动处理你的图片，并生成相应的 React 和 Tailwind 代码。你可以在界面上看到生成的代码，并进行预览。

第四步：下载和使用代码

你可以直接下载生成的代码，并将其集成到你的项目中。Napkins.dev 生成的代码结构清晰，易于维护和扩展。
在这里插入图片描述

示例

假设你有一个简单的登录界面设计草图，上传到 Napkins.dev 后，它会生成如下的代码：

import { Button } from "/components/ui/button"export default function BuyStock() {return (<div className="min-h-screen bg-white"><header className="bg-gray-200 py-4"><div className="flex items-center justify-between px-4"><div className="flex items-center"><svgxmlns="http://www.w3.org/2000/svg"className="h-6 w-6 mr-2"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth={2}d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg><span className="font-bold text-lg">Amazon Inc.</span></div><div className="flex-1"><svgxmlns="http://www.w3.org/2000/svg"className="h-6 w-full"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth={2}d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M12 18V6"/></svg></div></div><div className="text-center py-4"><span className="text-3xl font-bold">$23,03.00</span><span className="text-lg text-green-500">(+3.9%)</span></div></header><main className="py-4"><div className="bg-white rounded-lg shadow-sm p-4"><span className="font-bold text-lg">Buy AMZN</span><div className="flex flex-wrap justify-between mt-4"><Button variant="outline" className="rounded-full w-full mb-2">$50</Button><Button variant="outline" className="rounded-full w-full mb-2">$250</Button><Button variant="outline" className="rounded-full w-full mb-2">$500</Button><Button variant="outline" className="rounded-full w-full mb-2">$1,000</Button><Button variant="outline" className="rounded-full w-full mb-2">$2,500</Button><Button variant="outline" className="rounded-full w-full mb-2">...</Button></div></div></main><footer className="bg-gray-100 py-4"><div className="flex items-center justify-between px-4"><span className="text-lg text-blue-500">Buying Power: $236.78</span><div className="flex items-center"><Button variant="ghost" className="rounded-full mr-2"><svgxmlns="http://www.w3.org/2000/svg"className="h-6 w-6"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth={2}d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/></svg>Settings</Button><Button variant="primary" className="rounded-full">Next</Button></div></div></footer></div>);
}