从零生成网站：实现重构与探索

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

起步体验

Anima的"链接转代码"功能于今年7月推出，承诺将任何设计或网页转换为可实时编辑的代码。您可以生成、预览和导出生产就绪的React、TypeScript、Tailwind CSS或纯HTML/CSS代码。

我决定使用Codrops主页作为测试对象，想尝试将其重新构想为便当式网格布局。在粘贴Codrops URL后，几秒钟内就生成了一个React项目。

第一印象令人惊喜：主页看起来可识别，布局没有完全崩溃。虽然Webzibition框背景尺寸存在小故障，但整体接近度足以继续操作。

我输入简单提示：“为所有这些项目创建便当网格”。虽然立即遇到错误，但修复后获得了 quirky但功能正常的便当网格布局：

结果并非完全符合预期，某些元素感觉不平衡，间距也不理想。但与从零开始相比，屏幕上已有可迭代的内容。

进一步尝试将Creative Hub和Webzibition模块融入网格。使用自然语言提示"将Creative Hub框放入文章的便当样式容器中"进行测试，成功实现：

布局开始显得拥挤，于是尝试另一个提示：要求Anima将Webzibition框移入同一容器并使其跨满宽度。生成迅速，页面瞬间转变：

视觉效果只是故事的一半，更重要的问题是Anima实际生成什么样的代码。

打开生成的React和Tailwind输出，代码出人意料地整洁：包含语义元素，结构逻辑清晰，可读性强。没有明显的div滥用问题，标记也不会让人想彻底重写。

Anima还提供名为"Web to Code"的Chrome扩展，可捕获浏览的任何页面并立即获得可编辑代码。

优点：快速迭代、代码出奇整洁、设置简单、对新手友好、实验过程有趣

缺点：偶尔出现故障、导出代码仍需清理、自定义功能有限、尚未完全达到生产就绪状态

Anima不是魔法也不完美，它不应取代精心编码。但作为快速原型设计、重构现有设计或探索网站新结构的工具，它既有趣又能力惊人。真正的亮点在于迭代速度：尝试想法、立即查看结果、优化或继续前进。

** verdict**：Anima作为实验和学习平台表现出色。如果您是喜欢快速迭代的设计师或开发者，可能会觉得它很有启发性。如果需要为客户工作提供生产就绪的结果，仍需打磨输出或使用更成熟的框架。但对于好奇心、原型设计和创意乐趣，Anima值得您的时间，您可能会惊讶于以这种方式重构网络的乐趣程度。