UI 設計師別錯過！原來用 AI 生成擬真圖表的示意圖這麼方便！

網頁 Dashboard 頁面往往要展示很多的圖表，在設計初期為了讓大家了解不同情境下的圖表會如何顯示，UI 設計師會畫出各式各樣的示意圖。

在聊天時發現有些設計師為了讓圖表擬真，花費了大量時間針對細節調整。

此時我才意識到，原來 AI 生成圖表的功能對 UI 設計師來說有很大的幫助！

以 ChatGPT-4o 來說，他能根據不同時間級距（年/月/周 📅）、圖表（圓餅圖/長條圖 📊）、數據（遞增/M型 📈）、顏色（同色系/互補色 🎨）等條件來客製化生成。

這邊文章會教大家如何靠「動嘴」來生成各式圖表；畢竟對筆者這種外行人來說，看到成品比較能判斷設計好壞。

下面的範例以 ChatGPT 4o 來做 Demo，大家可以用自己熟悉的 AI 工具，使用原理都差不多。

基礎運用：驅動程式來生成指定的 Chart 📊

下面用一個複雜邏輯的 Stack Bar Chart 來做示範。

🤖 Prompt：

請根據以下需求用 Python 撰寫程式後，最後用圖表呈現
- 時間長度: 1 個月
- 時間粒度: 1 小時
- 圖表類型: Stack Bar Chart
- 資料: Top10 的銷售產品
- 特殊要求: Top10 的顏色要不一樣，請使用亮色系呈現，並且每個 Bar 之間不要有間隔

透過上面的 Prompt 就能驅動 ChatGPT 寫程式。

寫完程式後便會生成圖表，一開始你會發現圖表是空白的，別緊張，點擊上方的「Switch to Static Chart」便可看到圖表。

當然這個圖表也是可以放大與下載的。

---

進階運用 1：生成指定情境的 Chart、要求圖表細節 🔧

圖表生成後，你肯定會對一些細節不滿意，或是想以這張圖為基礎生成指定情境，下面就來做個示範。

🤖 Prompt：

請根據以下需求調整圖表細節
- X 軸: 列出月份與日期，時間間隔為 3 天，月份為 6 月，用斜 45% 顯示
- Y 軸: 顯示銷售數量，最大值為 2000，數量間隔為 200
- 數據波動: 希望數值成曲線向上的趨勢，第一天所有產品加總接近 0，最後一天所有產品加總接近 2000
- 產品名稱: 請用常見的電子產品來示意（ex: iphone、notebook）

過去 UI 設計師會需要花許多時間產生的示意圖，現在透過明確的 Prompt 就能直接產生！

如果想呈現一週的數據，直接跟他說就好：「請呈現 7 天的資料」

---

進階運用 2：產生極端情境的 Chart 📉

在規劃之初，我們就需要考量在極端情境下 Chart 會如何顯示。

有些設計其實大腦在想像時就已經被否決了，但如果你不做出來，有些人不認為這樣的設計是錯的。

這些讓人心累的設計，就交給 AI 來生成吧！

🤖 Prompt：

請根據以下需求用 Python 撰寫程式後，最後用圖表呈現
- 圖表類型: Pie Chart
- 資料: Top10 的銷售產品，請用常見的電子產品來示意（ex: iphone、notebook）
- 顏色要求: Top10 的顏色要不一樣，請使用同色系呈現
- 數值要求: Top1 佔比為 50%、Top2 佔比為 38%，請用程式計算出剩下 Top3~10 的百分比
- 名稱顯示: Pie Chart 的每個產品會有一條線往外拉顯示對應的產品名稱，切記產品名稱不要重疊

---

總結 & 使用心得

過去各式圖表、指定情境、極端畫面的設計會讓人覺得心累 😩

但現在有了 AI 輔助，可以讓 UI 設計師產生示意圖的效率增加不少 🚀

對 PM 來說，這個功能也能幫助他們生成自己心中的畫面，讓溝通更有效率 🗣️

當然，你心中期待的圖表通常無法一次就產生出來，會需要透過後續的對話來不斷優化。

但別忘記這只是生成示意圖的工具，不是最終的畫面，千萬不要鑽牛角尖。

AI 實戰 實測生成式 AI 工具、Vibe Coding 與自動化流程的第一手心得，把 AI 變成每天都用得上的即戰力。 林鼎淵 Dean Lin

想將 AI 導入自己的職場與生活嗎？歡迎購買筆者出版的新書，幫助您在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！