使用 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">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-6 mr-2"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="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">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-6 w-full"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="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">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="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>
  );
}

结论

Napkins.dev 是一个强大的工具，可以帮助前端开发者快速将设计草图转换为实际的应用程序代码。通过简单的几步操作，你就可以将你的设计变成现实，节省大量的开发时间。