原型与现场演示怎么用

见客户之前，一句「给客户做个可点的演示」——原型演示专家在后台做出一个单文件网页原型，双击就能开、能点、能投屏，还能整文件发给客户。

您一句话「给客户的 CRM 做一个可点的界面原型，下周三演示要用」

→原型演示专家在后台做

↓

您只说一句① 说清给谁看、干什么用✓不追问风格形态，直接开工✓默认一次做完整版

→

后台产出② 一个能点的原型✓页面能点：切页、填表、弹窗✓电脑、投屏、手机都能开

→

单文件交付③ 一个 HTML 文件✓双击就开，不装任何环境✓整文件发微信 / 邮件都行

→

签单之后④ 直接变开工基线✓切编程模式，照着原型开工✓界面按原型 1:1 落地

什么时候用它

• 见客户前：要让客户「看见」你要做的东西——可点的原型比 30 页 PPT 更有说服力
• 现场演示：投屏打开，客户自己上手点，边点边聊
• 发给客户：一个文件发过去，客户在自己电脑上打开就能看
• 验证想法：内部对齐「这个东西到底长什么样」，半天出活

它管的是快速视觉交付——产品原型、可点 demo、客户现场流程图、技术验证、3D 产品展示。不是工程开发（真做系统走编程模式，见文末「签单之后」）。

一句话怎么下

给客户做一个资产管理系统的界面原型，给客户老板演示用，
重点是设备台账和报修流程这两个页面。

说清给谁看、干什么用就够。它不反问「要什么风格、几页、什么色调」——能推断就直接开工，关键默认自己定，交付时说明定了什么。默认一次做完整版（不是先给个半成品等您挑刺）；只有决策人都在场、赌注大的场合，您点名「先出一版方向稿看看」才分两步。

做完总控把成品交回：一个 HTML 文件落在项目文件夹（ai-fde/demos/<主题>/），对话里给您入口，点开即看。

交付物长什么样

一个 HTML 文件，双击就开——不装环境、不连网（联网素材已打包进文件里）、电脑手机都能开。

• 页面真的能点：菜单切换、填表、弹窗、轮播图都是活的
• 投屏演示稳：全屏打开就是一台「演示机」
• 改起来快：「这页换个布局」「这个按钮改成××」——指着改，改完重新给您一份

✅ 看到什么算成功

双击 HTML 文件，浏览器里打开，页面能点能动——您可以把它拷到 U 盘、投到会议室大屏、整文件发客户微信。

客户给了参考稿？照着还原

客户发来设计稿 / 参考稿（图片或链接），说一句：

客户给了参考稿（在附件里），照这个风格给他们的商城做可点原型。

它会对着参考稿还原：提取配色、字体、版式这些设计要素，逐屏对照着做，缺的部件自己补设计。做完还带着一张「素材对数清单」——参考稿上每处图形，做没做、怎么做的，一条条对着数，不会拿色块糊弄您。

想要 3D 展示也可以

产品 3D 展示（营销展示级）也是它管——比如设备的三维旋转展示、部件导览演示。说「给我们的设备做一个 3D 展示页，能旋转、能看内部结构」即可。这类页面打开时需要联网加载 3D 引擎，交付时会说明。

演示的诚实线

原型页里什么是真功能、什么是示意，会如实标注——比如「此表单为演示形态，数据未接后端」。给客户看时心里有底，不会演示到一半穿帮。

签单之后：原型直接变开工图

客户拍板了，真系统开工——切到编程模式，跟工程总控说「按项目里的 CRM 原型开工」。原型文件就是设计基线，工程前端专家照着它 1:1 落地成真系统（原型是「长什么样」，编程模式做「真的能用」）。交付原型时会附这个衔接提示，不用您记。

常见卡点

现象	怎么办
客户打不开 HTML	双击默认浏览器打开即可；实在不行截图 / 录屏发客户，或让专家出 PDF 版
想改原型找谁	就在当初的会话说哪里要改；原型文件在 ai-fde/demos/ 下，改完是新的整文件
3D 页面打开是空白	3D 展示需联网加载引擎——确认网络；客户环境严格断网时提前说，会改用免联网的降级方案
原型能当真系统用吗	不能——原型是「长得像、点得动」，数据是演示数据；真系统在编程模式开工（半天到几天量级）
想要好几版风格对比	说「出两版风格」——但多数场合一版完整版 + 指着改，比三版半成品高效

延伸阅读

• 第一句话怎么说：开口模板
• 需求调研与 PRD 怎么做：原型前面的需求底稿
• 产品原型设计案例：真实原型长什么样（可点开看）
• 画图与出图：客户现场的流程图也归它出