一位产品设计师用3个月完成AI辅助原型设计的完整演进，实测效率提升约10倍。过程覆盖需求分析、线框图生成、HTML转化及流程自动化，验证了分层验证、背景文档沉淀与脚本化协同的有效性。
智能速览
首次尝试用AI生成数据报表HTML，因缺乏上下文导致图表错位、优先级混乱
第二次迭代引入线框图作为中间层，实现文字方案→线框图→HTML的分层验证流程
第三次迭代开发自动化脚本，统一页面组织逻辑，将维护同步耗时降低50%
建立背景文档、设计规范和提示词模板，有效缓解AI‘失忆’问题
移动端按模块横向平铺、管理端按功能纵向堆叠，响应式布局适配多端查看
AI未替代产品架构能力，而是将设计重心从重复劳动转向框架决策与体验把控
精华内容
原型设计不是交付一张图，而是构建一套可验证、可维护、可进化的协作系统。三次迭代背后，是工具逻辑与产品思维的双重校准。
第一次：报表试水
初始任务是一张设备融资租赁平台的数据报表。输入需求后，AI直接输出HTML，但图表位置偏移、色彩冲突、指标排序不符合业务优先级。手动调整代码耗时且易出错，Token消耗高。关键发现：AI无法自动继承团队隐性共识，如‘逾期率应置顶’‘折线图需标注峰值点’等默认规则，必须显性定义。后续改为先输出文字方案——明确统计口径、维度拆解、展示逻辑，再生成带占位符的HTML，Figma导入后替换图表，交付周期从3天压缩至8小时。
第二次：线框图中转
面对完整产品原型需求，原有方法失效：AI单次对话无法维持风格一致性，界面状态描述冗长难确认。转向‘文字方案→AI生成线框图→人工校验→批量转HTML’新链路。线框图全部为纯文本结构（如‘首页顶部导航栏含Logo+搜索框+用户头像，下方轮播图3张，每张配标题与CTA按钮’），修改仅需增删字段，确认成本下降70%。同一套提示词在不同模块复用，按钮圆角、间距、字体层级误差控制在±2px内，系统视觉一致性达92%。
第三次：自动化闭环
原型交付后，开发对接环节暴露新瓶颈：页面命名不统一、跳转路径缺失、状态说明分散，导致开发返工率达40%。为此开发Python脚本，自动解析线框图文本，按预设规则生成标准化HTML文件夹结构：移动端按模块横向排列，每个模块内页面左→右顺序对应用户旅程；管理端按菜单纵向堆叠，主页面在上、弹窗在下、说明紧贴对应组件。脚本同时注入响应式meta标签与语义化class名，开发人员通过关键词搜索即可定位页面，平均查找时间从11分钟降至23秒。维护类工作占比由50%降至8%。
底层支撑体系
三次迭代效能跃升依赖三项基础建设：一是背景文档，包含项目目标、用户角色画像、核心业务流程图及竞品交互对比表，供AI调用；二是设计规范库，明确定义色值（#2563EB为主蓝）、字号阶梯（14/16/18/20px）、动效时长（200ms缓入缓出）等37项约束；三是提示词模板，固定‘角色-任务-输入-输出-约束’五段式结构，例如‘你是一名有5年B端经验的产品设计师，请基于以下融资租赁业务流程，输出符合Ant Design规范的线框图文本，禁止使用图标，所有按钮需标注触发动作’。三者协同使AI输出可用率从31%提升至89%。
这套方法论的价值在于将AI从‘执行者’转化为‘协作者’，把产品设计师从像素对齐、格式转换等事务中解放出来，真正聚焦于信息架构合理性、用户路径流畅度与商业目标匹配度。当工具链趋于稳定，下一个值得探索的问题是：如何让AI参与可用性测试反馈的初步归因？或者，它能否基于埋点数据反向优化原型中的关键路径设计？
