讓DeepSeek生成《哪吒2》動態可視化報告，效果著實驚艷到我了！
現在，我們可以通過 AI 更高效實現 SVG 動態可視化設計了。
這期關于《哪吒之魔童鬧海》的 Data Visualization，計育韜老師完全基于豆包、DeepSeek、即夢三款 AI 工具組合實現。加之最后的代碼細節微調，除去 AI 生成的等待時間大約 1 小時完成。
那么同學們該如何巧借 DeepSeek 能力，快速實現這樣的動態可視化報告？來看干貨教學：
豆包起手，整合聯網信息
Cursor 預載 Deepseek
鑒于眾所周知的原因，DeepSeek 當下很難直接從互聯網獲取到電影的各方面數據信息。
所以第一步，我采用「豆包」獲取實時新聞數據，直接向其提問包括票房、時間線、投資人等信息并要求其梳理成適合數據可視化設計使用的創作腳本。在此計育韜老師也推薦將「豆包」旗下硬件產品「Ola Friend」耳機作為你的日常智能工作伙伴，通過語音喚醒更高效啟動 AI 工作流：
接下來，預調教 Cursor（DeepSeek 模型部署）確保其掌握了公眾號 SVG 交互設計開發規則——主流的大語言模型基本都未習得微信生態內特殊的 SVG-XML 體系邏輯。所以我向它分別投喂了最近出臺的中華人民共和國《融媒體 SVG 交互設計技術規范》T/CASME 1609—2024，和行業最重要的開發標準《SVG AttributeName 白名單》表格圖片：
關于 DeepSeek 的調用，在 Cursor 內應用商店直接搜索并安裝，輸入 key 值后即可使用：
同時我也向 AI 強調了禁止使用包括 id 標簽、CSS 動畫、JS 指令等必須遵守的開發 SMIL 規則，避免在后續開發過程中浪費時間檢查此類應用和條件錯誤，為 DeepSeek 的數據可視化創建工作完成全部準備。
進入 Composer 模式
指揮 DeepSeek 逐步設計
按模塊順序，準確告知 DeepSeek 自己的創作計劃。在創建初期，一定要把握好設計基調，包括配色、風格等可以先行告知 AI。計育韜老師就重點要求了深色底色、紅/黃配色的要求和簡約而高級的視覺感受。
針對具體模塊，你可以直接要求 AI 創作折線圖/環形圖/K線圖等形態的圖表，便于 DeepSeek 快速完成數據與設計的映射。當然這里提醒一下，涉及餅分圖或環圖的純 SVG 矢量圖表往往對 AI 來說存在難點，綜合就 Claude-3.5、GPT-4o 和 DeepSeek r1 比照，DeepSeek 略勝一籌。
引導 DeepSeek 理解 SVG 動畫
逐步提升完成各個模塊
隨后我們為所有圖表增加循環動畫效果。由于白名單的存在，部分 SVG 動畫并不能以「常理」之下的 CSS 體系邏輯開發，因此我們甚至可以通過投喂代碼實例引導 AI 自我突破進化。
同時，如果開發者已經知曉動畫代碼層的基本結構，不妨直接給到 DeepSeek 編碼的一些關鍵提示，如時長、變化時刻等，并告知利用好 keyTimes 等屬性合理分配動畫效果，這會進一步提升開發者與 AI 直接的協同效率。
尤其對于具有重復性的動畫（以第二部分「宣發歷程」時間軸為例）AI 具備絕對優勢——每個卡片的浮動開始時間采用等差數列排序，若開發者手寫需要逐個復制粘貼修改或采用正則表達式，但對 DeepSeek 來說則是一瞬間可完成的任務。
AIGC 提升畫面層次感
基于即夢補充報告配圖
到這一步，計育韜老師希望增加更有主題特色的背景配圖。因此我啟動 Dreamina（即夢）。這款字節跳動旗下的 AIGC 工具最近是我的 AI 設計輔助首選。譬如我向它輸入了簡單通俗的中文 Prompt 指令，大體要求它以《哪吒之魔童鬧海》為主畫面進行創作，很快抽卡到了我滿意的畫面：
在 Photoshop 內稍做調整，我便將其以 <foreignObject> 形式組合到代碼中來：
根據具體的畫面內留白情況，計育韜老師最后一共添加了三張 AIGC 配圖，大功告成！如有任何 DeepSeek 工作流層面其他疑問，歡迎在下方留言區提出！
較之傳統的「矢量設計-代碼部署」流程，以這種方式進行數據可視化設計一方面優勢在于數據導入的便捷性，另一方面優勢在于設計修改、代碼生成的可維護性。
歡迎有動態數據可視化設計需求（SVG）的用戶添加微信號（Zhuoya_Work）與我們共創實踐 DeepSeek 等 AI 介入設計的邊界，也可以點擊閱讀我們的更多往期精彩 Infographic 作品：
1）延安時期紅色報刊的對美報道情緒線
2）據說四川人最愛睡覺，廣州人最能熬夜？
3）鄉村扶貧專題數據可視化（3D）設計
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）