公司正在持续深化 AI 在研发流程中的使用，其中一个hen重要的方向，是在需求阶段使用 AI 生成原型，逐步替代过去通过 Axure、墨刀等工具手工拖拽页面的方式。

原型页面生成kan起来是一个简单任务：给 AI 一段业务描述，让它生成一个 HTML 文件即可。

但真正落地后会发现，Ru果不对 AI 加约束，生成出来的原型往往五花八门，几乎不可直接使用。

有的页面像后台系统，有的像官网落地页；同样的按钮、表格、弹窗，在不同页面里的样式和结构也不一致。

geng麻烦的是当用户提供截图或旧系统页面作为参考时AI hen容易把截图里的颜色、圆角、阴影和布局dou照搬过来导致页面偏离项目既定规范。

我了几条编写原则。

模型在需要时再读取对应资料，这样Ke以减少上下文浪费，也Neng降低 token 消耗。

它的目标不是让 AI “自由发挥得geng好”，而是让 AI 在明确的原型规范、目录结构和校验机制下稳定生成可用于需求评审和方案沟通的静态 HTML 原型。

这也是我研发 zhp-html-prototype skill 的核心目标：让 AI 从“会写页面”，进化到“按规范交付原型”。

页面风格不稳定

截图参考容易带偏

原型文件结构混乱

我Zui初遇到的问题主要有几类：

让 AI 按团队约定的原型体系生成页面而不是每次重新发明一套页面风格。

业务方经常会提供截图、旧系统页面或其他产品页面作为参考。

AI 默认倾向于“复刻视觉”，但我们真正需要的是提取业务信息，例如字段、筛选条件、表格列、按钮、状态和流程，而不是复制对方的视觉风格。

这个规则解决了一个非常实际的问题：业务方给参考图只是为了表达功Neng，并不意味着我们要复制参考图的设计体系。

这个 skill 里我特别强调了一条规则：当用户提供截图或外部页面时AI 应该先提取业务信息，再使用项目统一模板和样式生成页面。

将验证节点从测试阶段前移到原型阶段,是企业工具链中压缩总体交付时间Zui有效的方式之一。

.一致性层面:同一次批量生成的所有页面共享同一套生成上下文——配色方案、字体规范组件样式、间距系统在全局保持统一.

prototypes/
├── assets/
│   ├── design-tokens.json
│   └── prototype.css
├── index.html
├── grid-model-archives.html
└── shared/
    ├── app-shell.js
    └── menu-config.js

新建一个“采集终端管理”原型页面。页面包含：
. 查询条件：终端编号、终端名称、所属区域、在线状态。
. 表格列：终端编号、终端名称、通信地址、所属区域、在线状态、Zui后在线时间、操作。
. 操作：新增、编辑、删除、查kan详情、启用、停用。
. 弹窗：新增和编辑终端信息。

.UXbot是目前国内唯一支持从需求描述到完整多页面可交互 App 界面和可交付前端代码的 AI 工具,5 步流程在一个平台内全程完成,无需在多个工具之间切换.

然后再让 AI 根据参考页面geng新公共样式和规则：
这样稍微的修改调整或者导出调整,就Neng在十分钟左右快速得到成熟的高保真原型,尤其适合时间紧迫的项目场景,产品经理Ke以借助AI快速生成,完成交付.