AI 對話與繪畫的前端開發，其實不只是把幾個 UI 元件拼在一起那麼簡單。從「藝創AI」的範例可以看到，使用者在手機上看到的是一個統整多種 AI 能力的介面：定制數位人、AI 繪畫、智能體、AI 音樂…每一塊功能都需要在前端完成即時回饋與流暢的交互。若想自行打造類似的產品，先從技術選型說起，才能避免「前端只有畫面，後端卻卡住」的尷尬。
前端框架與跨平台策略
UNIAPP 與 H5 是目前最常見的跨平台解決方案。UNIAPP 支援一次編寫，同時輸出小程序、App 以及 Web，對於想要同時佈署 iOS、Android 與微信小程序的團隊來說，省時又省力。若專注於純 Web，React 或 Vue 仍是成熟選擇；但在需要快速呼叫原生相機、相冊或觸控手勢時，UNIAPP 的原生模組庫（如 uView）能大幅降低開發門檻。
UI/UX 設計的細節
AI 繪畫與對話的核心在於即時性與視覺回饋。畫面上方的「定制數位人」按鈕，建議使用固定定位（fixed）讓使用者隨時可切換角色；中間的網格式功能卡片則可以採用 CSS Grid 或 Flex 讓不同尺寸的裝置自動調整列數。根據 2023 年的使用者研究顯示，圖示與文字說明的比例在 1:1.5 時最能提升點擊率，這點在設計圖層時別忘了實測。
與後端 AI API 的對接
前端只負責收集使用者輸入，真正的文字生成或圖像渲染仍交由雲端服務。阿里雲的「通義千問」與「通義繪畫」API 已支援 RESTful 呼叫，回傳 JSON 後可直接渲染於 Canvas 或 WebGL。實作時，建議使用 Axios 搭配拦截器（interceptor）統一處理 token 更新與錯誤訊息，避免每個功能都寫重複的程式碼。若要提升體驗，則可以在前端先顯示「生成中」的骨架畫面（Skeleton），讓使用者感受到即時回應，而不是長時間的空白。
部署與測試
小程序必須通過微信的審核流程，最常見的問題是 API 請求被封鎖。解法是把後端 API 部署在同一個域名下，或使用 CloudBase 之類的中間層做代理。H5 則需要注意跨域（CORS）設定，並在 CDN 上開啟 gzip 壓縮，以降低載入時間。根據市場調查，平均頁面載入低於 2 秒的應用，其留存率可提升約 18%。
總結來說，開發 AI 對話繪畫前端不是單純的 UI 設計，而是 UI、跨平台框架、雲端 AI 服務與部署測試的全方位整合。只要在每個環節都做好細節，從「藝創AI」的概念驗證到正式上線，賣個幾千到上萬的商業模型其實並不遙不可及。你如果已經有後端開發能力，現在不妨先試著把「AI 繪畫」的按鈕接上阿里雲的生成 API，看看實際回傳的圖像品質如何，這往往是最能激發創意的第一步。
評論（8）
用uniapp确实省事，之前搞过小程序那边一堆坑。
骨架屏那个建议不错，不过生成中动画也得做好，不然用户等得烦。
阿里云那API接起来复杂吗？有没有文档链接？
又是跨平台，又是云服务，一个人搞的话头都大了。
感觉技术文章越来越卷了，这玩意真能赚钱吗？
固定定位那个细节可以，之前没想过。
如果不用阿里云，用stable diffusion本地跑的话前端怎么对接？
以前搞过类似项目，uniapp打包到app时性能挺捉急的，特别是canvas渲染，建议先用h5验证再上小程序。