用AI 生成功能页面的实践记录

——爱名网 × LTD营销枢纽 AI友好型站点免费领取活动

活动开启时间：2026年6月22日

一、活动背景

近日，爱名网联合 LTD 营销枢纽推出了一项限时福利活动：凡在爱名网已注册域名的用户，均可免费领取一年的「AI 友好型站点云基础版」服务。

本文记录了利用 AI 工具，从零开始设计并生成活动功能页面的完整过程。

二、活动流程设计

在开始让 AI 干活之前，我先梳理了活动的完整流程，共分为以下四个环节：

三、用 AI生成页面的过程

将以上流程和字段需求告诉 AI后，AI 便开始自动生成对应的功能页面代码。

3.1 初次生成

AI 根据需求描述，快速生成了包含表单页和确认弹窗的初版页面。整体结构已基本符合预期，但在视觉细节和交互体验上还存在一些不够精准的地方。

（注：初版截图未能保存，故无法在此附图展示，以下直接呈现调整后的最终效果。）

3.2 细节调整与修改纠偏

针对初版的问题，采取了以下两种方式进行修改：

方式一：指令驱动修改

告诉 AI 需要修改的模块以及期望的修改效果，AI 会根据描述自动调整对应的代码。这种方式适合大多数布局、样式和功能性的调整。

方式二：手动直接修改

对于自己清楚如何修改、但 AI 反复调整仍不满意的部分，直接手动修改对应的代码片段。AI 生成的代码可读性良好，定位和修改相关模块并不困难。

▶ 两种方式配合使用，效率远超传统的纯手写原型，同时保留了对最终效果的充分控制权。

四、最终页面效果展示

经过多轮迭代调整，最终页面分为两个核心部分：

4.1 建站信息填写页

用户进入领取流程后，首先看到的是信息填写表单页。页面布局简洁清晰，包含所有必填字段，并有对应的输入提示。

▲ 图1：建站信息填写页（最终效果）

4.2 领取成功确认弹窗

提交表单后，页面弹出「领取成功」确认窗口，以结构化的方式展示网站管理地址、用户名和密码，并附有温馨提示，提醒用户妥善保存账号信息及服务有效期。

▲ 图2：领取成功确认弹窗（最终效果）

五、效率与体验总结

此次借助 AI完成功能页面的生成和调整，有以下几点明显体验提升：

●大幅提升了原型开发效率，免去了从零手写 HTML/CSS 的繁琐过程；

●AI 生成的页面结构清晰、代码可读性好，便于后续手动微调；

●指令式修改 + 手动修改双模式灵活配合，能高效覆盖各类调整场景；

●已生成的页面可复用、可迁移，未来类似活动可在此基础上快速改版。

六、营销枢纽陪跑服务

此次活动不仅提供站点免费领取，营销枢纽还配套推出了专属陪跑服务，为新手用户提供全程支持：

6月22日，爱名网见！

欢迎体验并多提建议，期待与您共同完善这一产品体验。