如何用 Makereal Tldraw 生成 Tailwind CSS？免费开源工具提升前端效率

?️ 工具介绍：Tldraw 和 Makereal 是什么？

? 准备工作：搭建开发环境

? 操作步骤：从草图到代码

1. 绘制草图：在 Tldraw 的画布上，用各种工具画出你想要的界面元素，比如按钮、文本框、导航栏等。可以自由调整颜色、大小和位置，就像在纸上画画一样。
2. 选择元素：画完后，用选择工具选中你要生成代码的部分。可以是单个元素，也可以是多个元素组成的模块。
3. 生成代码：点击界面上的 “Make Real” 按钮，Makereal 会把选中的草图转换成 PNG 格式，然后发送给 GPT - 4V API。API 会根据草图内容生成对应的 HTML 和 Tailwind CSS 代码。
4. 预览和调整：生成的代码会在页面下方的 iframe 中实时预览。如果觉得效果不满意，可以回到画布上修改草图，再次点击 “Make Real” 生成新的代码，直到达到你想要的效果。

? 代码解析：生成的 Tailwind CSS 有什么特点？

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md">
  点击我
button>

? 提升效率的技巧

1. 使用注释：在草图中添加注释，可以告诉 GPT - 4V API 更多的细节要求。比如写上 “这个按钮在移动端要全屏显示”，生成的代码就会包含相应的响应式样式。
2. 复用代码：生成的代码可以直接复制到你的项目中使用。如果有多个类似的界面元素，只需要修改少量代码就能复用，减少重复劳动。
3. 结合其他工具：可以把生成的代码导入到 Tailwind CSS 的 Playground 中进一步调整，或者结合 daisyUI 等插件，快速生成更复杂的界面。

⚠️ 注意事项

1. API 费用：使用 GPT - 4V API 可能会产生费用，具体费用根据使用量而定。你可以在 OpenAI 官网查看详细的定价信息。
2. 代码质量：生成的代码可能不是完美的，需要开发者进行一定的调整和优化。尤其是对于复杂的界面，可能需要手动修改部分代码。
3. 许可证：Tldraw 是开源的，商业使用可以保留水印直接使用。如果需要去除水印，需要购买商业许可证。

? 案例展示：生成计算器界面

html

<div class="container mx-auto px-4 py-8">
  <div class="bg-gray-200 rounded-lg p-4 mb-4">
    <input type="text" class="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="0">
  div>
  <div class="grid grid-cols-4 gap-4">
    <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">7button>
    <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">8button>
    
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">=button>
  div>
div>

html

复制

99

1

2

3

4

5

6

7

8

9

10

11

12

›

⌄

⌄

⌄

<div class="container mx-auto px-4 py-8">

<div class="bg-gray-200 rounded-lg p-4 mb-4">

<input type="text" class="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="0">

div>

<div class="grid grid-cols-4 gap-4">

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">button>

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg">button>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">=button>

div>

div>

? 总结