从零生成网站以进行重构与探索

探索Anima的AI驱动设计转代码工具如何加速网页原型制作、重构和创意实验。

开始使用

Anima的“链接转代码”功能于今年7月推出，承诺将任何设计或网页转换为可实时编辑的代码。您可以生成、预览和导出适用于生产的React、TypeScript、Tailwind CSS或纯HTML/CSS代码。这意味着您可以从熟悉的环境开始，测试想法，并立即在真实代码中查看效果，而不是停留在设计阶段。

我决定以Codrops主页作为实验对象。我一直想知道如果将其重新构想为bento风格的网格会是什么感觉。通常，如果我想尝试这一点，要么需要花费数小时手动重写标记和CSS，要么依赖经常会产生不相关布局和语法错误的AI提示。

在粘贴Codrops URL后，几秒钟内就生成了一个React项目。

第一印象出人意料地积极。主页看起来可识别，布局没有完全崩溃。是的，Webzibition框背景大小有一个小故障，但总体足够接近，让我感到可以继续前进。这已经比许多自动生成工具要好得多，那些工具的输出通常非常混乱，甚至不知道从哪里开始。

实验bento网格

现在来到有趣的部分。我输入了一个简单的提示：“为所有这些项目制作一个bento网格”。几乎立即就遇到了错误。我通常的本能是放弃，因为氛围编码往往在出现错误时就崩溃了，然后就会陷入调试别人半生成混乱的漩涡。但让我们尝试修复而不是立即放弃🙂

修复奏效了，我得到了一个古怪但功能正常的bento网格布局：

结果并不完全符合我的设想。一些元素感觉不平衡，间距也不理想。尽管如此，我在屏幕上有了可以迭代的东西，这已经比从零开始要好得多。所以我进一步推进。我能否将Creative Hub和Webzibition模块带入这个网格？像“将Creative Hub框放入文章的bento风格容器中”这样的自然语言提示感觉是一个很好的测试。

是的，它确实奏效了。Creative Hub框滑入了网格容器：

布局开始显得拥挤，所以我尝试了另一个提示。我要求Anima也将Webzibition框移动到同一个容器中，并使其跨越全宽。生成速度很快，几乎没有停顿，突然页面变成了这样：

这真正向我展示了它的优势：迭代速度快。您不必停下来重新思考网格或手动重写CSS。您只需抛出一个想法，看看返回什么，然后继续前进。感觉更像是在笔记本上素描，而不是仔细规划布局。对于原型制作，这种节奏正是我想要的。真的很喜欢这种Codrops的布局类型！

深入了解内部

视觉效果只是故事的一半。更大的问题是Anima实际产生什么样的代码。我打开了生成的React和Tailwind输出，完全预期会看到一片无意义的div和纠缠的类名。

令我惊讶的是，代码很干净。存在语义元素，结构逻辑性强，一切都很易读。没有明显的div滥用，标记也不像我想烧掉并从头重写的东西。它甚至让我思考，如果Codrops是一个使用Tailwind的精简React应用，而不是存在于WordPress的层层之中，维护起来会简单多少😂

还有一个名为Web to Code的Chrome扩展，可以让您捕获正在浏览的任何页面并立即获得可编辑代码。使用这个工具，可以轻松捕获和生成内部页面，如仪表板、登录屏幕，甚至您正在处理的网站的私有区域都可以拉入沙盒并直接使用。

优缺点

优点：快速迭代、出人意料地干净的代码、易于设置、对初学者友好、实验起来真的很有趣。

缺点：偶尔出现故障、导出的代码仍需清理、自定义有限、不完全适用于生产环境。

最终想法

Anima不是魔法，也不完美。它不会取代有意识的编码，也不应该。但作为快速原型制作、重构现有设计或探索网站采用新结构可能感觉如何的工具，它真的很有趣且出人意料地强大。对我来说，真正的亮点是迭代速度：您尝试一个想法，立即看到结果，然后要么完善它，要么继续前进。这种节奏对于喜欢在代码中素描而不是承诺从头进行重大重建的创意开发者来说非常令人上瘾。

结论：Anima作为实验和学习的游乐场表现出色。如果您是喜欢快速迭代的设计师或开发者，您可能会发现它很有启发性。如果您需要为客户工作提供生产就绪的结果，您仍然需要完善输出或坚持使用更成熟的框架。但对于好奇心、原型制作和一丝创意乐趣，Anima值得您花时间，您可能会惊讶于以这种方式重构网络有多么有趣。