下午有朋友给我发了一个 AI 生成的前端页面的案例，恰好我前段时间用 AI 工具写页面比较频繁，那今天这篇文章简单聊聊我在使用 AI 生成网页过程中的一些经验。
我自己是没有前端编码经验的，所以过去需要写网站前端的页面时，我一般都是直接买成熟的商业模版。在开发的过程中，可能会碰到某些特定的需求没办法用模板实现，那便会直接将这部分功能页面外包出去。
简单花个几十美金，能帮我节省好几天折腾的时间（可能最终还不一定能做出来），我自己觉得这个事情做得还是挺划算的。
但是现在 AI 工具出现后，我觉得这大大降低了我们在写前端代码时的门槛。基本将自己的需求描述清楚，将参考的页面信息给充分之后，AI 基本都能输出一个大差不差的页面出来。
比如上图这个产品信息定制选项区块，便是我上周用 AI 工具写出来的。说实话，要是让我自己去写这个功能，我自认为还是能力有限，是万万不能达到这个效果的。
那干脆将我用到的技术栈描述清楚，我想要的信息细节描述清楚，AI 便基本能给我一个大致的功能雏形。而有了这些雏形之后，我自己简单统一一下设计样式与元素标准，便基本可以达到上线标准了。
而且这样的区块设计出来后，基本能大大简化我的页面元素。毕竟如果一个「定制选项」一个独立区块去布局的话，那整个页面就会显得特别冗长，远不如这种集合在一起来得简洁。
虽然 AI 使用起来很方便，但在生成的过程中还是有些许不足。
一是 AI 在生成页面信息的过程中，很多细节点没办法兼顾到。
类似字体字号、悬浮元素、Hover 特性等等影响页面整洁度的细节，很多时候 AI 在输出的过程中，会前后不一致（可能是我 Prompt 的问题）。
所以我的做法是，AI 帮我输出大体的框架，然后我再对其进行检查修改，等内容都完善之后再集成到项目代码中去。
二是代码结构的问题，AI 在这方面做得不够好。
其实真正的公司项目，在代码上线之前都需要做统一的「代码审查」工作，其目的无非就是规范标准，尽早发现问题。
所以我现在使用 AI 协助编程，基本都是我先设定好项目的基本架构与代码框架，然后需要开发某一块功能时，再请求 AI 进行协助。当 AI 生成的内容经人工审核后，没什么问题了再集成到项目主干上。
所以像 Cursor 的一键生成网站（cursor composer）的功能，我基本是没有用过的，且 Cursor 里面的自动生成功能我也非常少。
用得多的反倒是智能补全，以及碰到某个技术参数不懂时，简单与其进行沟通。
但不管怎样吧，AI 模型最近的这些更新，真的是大大帮我提升了生产效率。毕竟我这么一个门外汉，也能在 AI 的帮助下做出还看得过去的页面，已经算是一个进步。