有设计稿，为什么 AI 还是做不出想要的网站？

最近，一位设计师同学找到我。她正在用 AI 制作个人作品集网站，已经完成了 Figma 设计稿，也尝试让 AI 按照页面逐一开发，但最终效果始终与预期存在差距。

这次 1v1，我们没有只修改某一段代码，而是一起寻找：明明已经有设计稿，AI 为什么还是做不对？

01｜同学的问题

页面的大致内容虽然已经生成，但视觉关系、细节和整体节奏没有被准确还原。继续逐页调整后，结果依然不够稳定。

局部页面看起来发生了变化，放回完整网站后，滚动、切换和页面之间的关系仍然不理想。

反复尝试后，她开始怀疑是不是自己的设计稿不够规范，也不知道使用 AI 开发时，是否必须提前整理好自动布局、组件状态和技术说明。

我先让同学把 Figma 设计稿和现有代码一起发给我，而不是继续逐页修改。检查之后，我发现问题同时存在于设计输入、交互表达和现有实现中。

设计师会自然理解哪些元素属于一组、页面如何切换，以及滚动后应该发生什么。但 AI 主要通过图层结构、节点关系和页面画面理解设计。没有被表达清楚的部分，它只能猜测。

一张设计稿可以表达页面最终长什么样，却不一定能表达状态、顺序和变化过程。所以，有设计稿不等于 AI 已经获得了完整的开发要求。

我没有推翻项目重新制作，而是把设计稿、现有代码和当前页面放在一起，检查它们之间是否能够对应。这样才能判断问题来自设计稿结构、交互说明，还是代码实现。

我重新梳理了页面之间的关系和关键交互，让 AI 不只知道页面长什么样，也知道内容如何变化、页面如何衔接。

整体结构稳定后，再继续处理视觉偏差、页面适配、图片加载和项目交接。相比反复重新生成，这种方式能够保留已经完成的内容，也更容易控制后续修改。

把页面拆开可以解决局部样式，却可能让 AI 失去对整个网站的理解。单个页面看起来正确，不代表组合后的滚动、状态和公共逻辑也是正确的。

AI 做不对时，问题不一定是 Prompt 写得不够长。更重要的是判断缺失的是视觉信息、结构信息，还是交互信息。

设计师不需要为了 AI，把文件整理成复杂的开发文档。但页面层级、重复组件、关键状态和特殊交互需要足够清楚。

项目完成后，同学开始明白，AI 还原失败不一定是代码能力不足，也可能是设计意图没有被完整传递。

以后遇到类似情况，可以先判断问题属于设计稿、交互表达还是代码结构，而不是继续盲目地逐页修改。

设计师不必先掌握所有前端知识，才能开始使用 AI 编程。更重要的是学会把设计判断转换成 AI 能够理解、执行和验证的信息。

这次咨询帮助同学找到了项目长期卡住的原因，也让设计稿和当前实现重新对应起来。

比完成一次页面修改更重要的是，她开始建立一套可以继续复用的问题判断方式。

这也是我希望 1v1 咨询能够提供的价值：不仅解决眼前的项目，也帮助设计师找到继续使用 AI 完成项目的方法。