大模型在產品原型生成中的應用實踐
一、背景
為了解決這些問題，我們想到了利用產品在『市場需求文檔（MRD）——產品需求文檔（PRD）——頁面（Page）』溝通過程中沉淀的『共識』，即產品需求文檔中的頁面描述。我們可以利用大語言模型強大的推理能力，將這些共識『翻譯』成符合研發(fā)團隊規(guī)范的頁面，從而減少溝通成本并縮短業(yè)務側對效果的感知鏈路。另外，為了減少產品在不同界面切換頻次，可以讓產品利用瀏覽器插件在 PRD 文檔頁面進行文字選擇，然后喚起原型生成工具生成頁面原型和修改原型。本文主要介紹了我們利用大模型輔助產品同學生成頁面原型的實踐經驗。
二、流程設計
圖片
該流程主要是將用戶利用常見市面上常見的原型工具變成利用智能原型工具插件選中 PRD 文檔中的產品描述，利用 LLM 基于得物自研低代碼平臺配置規(guī)范生成原型圖。產品同學工作的空間還是在文檔中，不用切換到其他軟件或者界面，即可利用 Chrome 插件來生成原型。產品同學保存生成的記錄后，可以供自己查詢，也可以供業(yè)務同學查看效果，還可以供研發(fā)同學快速開發(fā)使用。
三、實現(xiàn)原理
圖片
四、架構設計
圖片
產品原型生成工具的架構可以分為四層，分別是應用場景、能力層、引擎層和基礎層，具體如下：
應用場景：主要是產品同學利用智能頁面原型工具生成原型和研發(fā)利用原型對應低代碼平臺配置完成從0到1的頁面開發(fā)。
能力層：則是輔助產品同學生產原型的能力集合。這些能力支撐了產品快速生成、快速修改原型，生成內容可以管理，不影響產品同學使用流程等場景。
引擎層：是得物自研低代碼引擎和推理引擎，是生成原型配置和渲染配置的發(fā)動機。得物自研低代碼引擎不僅包括得物自研低代碼SDK，還有得物B端組件Poizon Design、精品組件Poizon Components以及業(yè)務組件。推理引擎則包括文生文的通用模型、圖生文的通用模型、生成低代碼平臺配置的Coder模型。推理引擎部署在得物自研大模型平臺上。選擇使用內部部署大模型的原因是，調用外部模型有數(shù)據泄露風險，外部模型API有一定穩(wěn)定性風險，訓練成本較高。場景知識庫是依據對內部各業(yè)務域的PRD進行分析得到的高頻場景而構建的。目前場景知識庫已包含了列表、表單、彈窗等等高頻場景。
基礎層：則是產品原型智能生成工具的接口服務、記錄存儲、模型部署和監(jiān)控。
五、實踐效果
界面展示
- 新建與刷新區(qū)主要是在當前界面直接配置頁面原型、根據頁面描述智能生成界面原型以及刷新生成記錄列表。
- 生成記錄列表區(qū)主要是展示生成的界面原型關聯(lián)的 PRD、原型描述、生成時間。
- 快捷操作區(qū)是界面原型編輯、截圖、保存、重新生成、低代碼平臺配置編輯、復制低代碼平臺配置等操作的快捷按鈕。
- 輔助操作區(qū)是界面描述模板、歷史記錄、問題反饋、幫助文檔等幫助按鈕。
- 頁面效果與預覽區(qū)是生成的原型展示區(qū)域，原型是可以交互操作的。
- 分享與評價是方便產品同學將生成的原型分享給業(yè)務或研發(fā)同學預覽以及可以對智能生成的原型質量做評價幫助提升模型生成的準確性。
- 對話修改區(qū)是方便產品同學通過對話形式來利用模型對生成的界面原型做修改。
圖片
使用效果
落地情況
智能原型工具生成原型的用時在 15 秒以內，具備生成記錄可查、可修改。同時，智能原型工具已實現(xiàn)關鍵使用鏈路埋點，可以及時發(fā)現(xiàn)產品同學使用卡點。目前內部已有較多的產品同學正在使用智能原型工具生成 B 端頁面原型。通過與產品同學的溝通，收到的使用反饋總體體驗是正向的。也有產品同學參與共建智能原型工具。
六、后續(xù)規(guī)劃
- 大模型訓練：在上文中可以看到模型是智能原型工具的加速器，但目前只用到了大模型的推理能力，需要外掛知識庫才能生成符合規(guī)范的頁面原型。這制約了生成原型的生成速度和擴展性。后續(xù)將利用工程化手段對得物自研低代碼平臺的使用教程、示例、用戶使用數(shù)據等數(shù)據做結構化處理，然后利用大模型和知識庫生成訓練數(shù)據，對通用大模型進行微調，得到智能原型工具模型。同時，將訓練過程工程化和自動化。從而進一步提升原型生成效率和質量，批量覆蓋更多場景。模型訓練思路如圖所示：
圖片
- 優(yōu)化 MRD2PRD2Code 鏈路：與自研低代碼平臺協(xié)同，縮短 MRD2PRD2Code 鏈路，使每一個產研鏈路中的每個節(jié)點的結論都可以得到一個可見的結果，從而進一步減少溝通成本與提升交付效率。
- Web2Code 鏈路：Web2Code 主要是為了產品同學需要對老頁面做修改的場景，產品同學打開老頁面即可生成原型，然后在生成原型上做修改。
- 編輯功能增強：上文中提到智能原型工具的編輯功能是通過表單配置來對大模型生成的低代碼平臺配置進行修改，還不夠靈活，后續(xù)組件拖拽式編輯功能。另外，支持產品通過組件拖拽生成原型以及相應產品描述功能。
