本文為去年 LP 構建時所撰寫。雖為當時的文章,但 AI 進步神速,現在公開時內容已略顯陳舊……AI 進步的速度真令人驚嘆。考慮到 2026年將會進一步加速,設計師的工作方式和資訊追蹤也必須緊跟步伐,否則真的會被拋在後頭……哎呀,真是不得了啊。在現今的 Figma Make 和 Gemini 3 中,能做的事情更多了。請將本文視為一位在駕馭 AI 的同時也被 AI 演進搞得暈頭轉向的設計師日記,輕鬆閱讀即可。至於補充的部分,我會像這樣加入補充文(也可說是吐槽)供各位欣賞當作副音軌。
你好!
我是 Liberogic 股份有限公司的 UI 設計師,哈西。
在上一篇文章中,我興高采烈地報告說「使用 FigmaMake 和 Gemini 在 3 小時內製作了 LP 的草稿!」
這是上次的成果物。
請查看上一篇文章。
【製作並實踐 Figma Make:前半】用 Figma Make 和 Gemini 3小時!忙碌董事長的「批改」進度加快,用新一代Web製作流程高速製作 LP 的初稿
https://www.liberogic.jp/topics/20250723-figmamake/
本文是後半戰。
向社長報告後,我當時的心情是興高采烈的。
這樣的話,即使社長提出無理要求,我也能閃電般快速應對!
3 小時完成這個品質,應該沒人會有意見吧!
……我也曾經有過這樣天真的想法呢 笑
這次,我要給各位介紹我信心滿滿地提交給社長之後發生的
「地獄般的修正篇」⭐️・:*+.\(( °ω° ))/.:+✨
簡而言之,
用 Figma 做出來的那個漂亮的版面設計,被社長的評論徹底摧毀了。
我認為即使在 AI 進化的現在,這種情況仍然會不斷發生。
這次的教訓:Figma 在「製作儀表板和線框圖」上無敵,但在「充滿情感的登陸頁面」上可能還太早……也許吧。
最近 AI 的進化速度很快,最近的 AI 可以更多角度地被利用呢。真是太驚人了!
CEO 簡報:「弄得好看一點」的困境
上次製作的那份看起來還不錯的 SaaS 風格著陸頁提案。我信心滿滿地展示給了公司總裁。
CEO!就是那份落地頁的初稿,我用 AI 火力全開,以閃電速度做出來了!結構是這樣,你覺得如何?」
嗯,速度不錯呢。(看著螢幕)……嗯,不過感覺有點生硬呢」
生硬?(不對啊,這是需要信任感的 B2B 服務,這樣整潔嚴謹不是更好…)
能不能更有趣一點,或者說,嘭!有點視覺衝擊,洗煉的感覺?還有這裡,多加點動畫效果,裝飾得「好看一點」」
終極招式出現了。「弄得好看一點」。
這是所有設計師都最害怕,也是 AI 最難理解的指示排行榜第一名。
「好看一點」啦、「太生硬」啦,經常聽到這些說法。能夠讀透這些詞背後的真實含義才是重點啊。設計師這年頭也被考驗溝通能力呢。對於我這種社恐又不會看氣氛的人來說,困難重重,每天都是修行…。(要是知道設計師需要溝通能力,從小就應該多練習了…。唉呀呀。)
若是客戶案件,我們會在這個階段進一步深入挖掘對方的潛在心理和真實需求,但由於董事長工作繁忙,很難抽出時間進行訪談。
由於董事長與員工之間的身分差異,有時候會導致草率應對,最終淪為模糊的措辭和敷衍的需求。
之後,我們進入了全員一起反覆思考董事長那繁忙的發言、將其重新消化的階段。
這只是我的藉口。完全就是我的藉口。說真的。
心裡話(「感覺不錯」到底是什麼意思!?連 Gemini 老師都讀不透啊!光靠擬聲詞「砰」、「唰」來下修改指示,能不能別這樣啊!?)
這種感受到現在還沒有改變
Figma 對陣董事長的狂暴吐槽
從那裡開始才是真正的戰鬥。
為了具體化董事長腦海中的「感覺不錯」,我們在 Figma 製作的基礎上進行修改,但……。
工具的相性在這裡露出了獠牙。
Figma Make 生成的只是「邏輯上正確的網頁佈局」。通過 Auto Layout(自動佈局)精確組合而成的整齊盒式排版。
這正是 AI 進化的厲害之處。現在用相同的提示詞生成,精度已經好了不少。能感受到 AI 的進步(參考圖片附在下方)。
作為美觀且具有學習價值的部分和範本主題來說,使用體驗很不錯。
但是,老闆的要求是
「在背景上撒滿紋理圖案啦!!」 「讓元素超出邊框」 「試試看加個斜的滑塊?」
全是無視邏輯的感性裝飾。
每次硬生生把裝飾圖像塞進 Figma Make 的生成數據中,Auto Layout 就會尖叫,整個佈局崩得一塌糊塗。
心聲 (啊!加上那張背景圖片後,下面的區塊也跟著移位了!Figma Make 老兄,你沒錯,你是對的。只是,你還沒辦法完全滿足老闆的需求啊…!)
終究還是得「手工」重新做一遍的虛無感
「這裡的空白要再緊縮!」 「按鈕要更有彈性感!」
為了應對源源不絕的鬼魅評論(紅色標記),我不得不哭著禁用了 Figma Make 為我建立的自動佈局,分解生成的元件,然後手動重新放置。
幾小時後。螢幕上剩下的是完全看不出 Figma Make 痕跡、徹底變成另一種東西的設計資料。
然後加上各種調整的初稿就是這樣了。設計完全變成了與初稿截然不同的樣子。
而且現有元素全都套用了自動佈局,但從 Figma Make 複製到 Figma 時,不知道為什麼自動佈局會被取消,必須重新套用自動佈局等工作也隨之產生。
不知不覺間,修改耗費了相當多的時間。
心裡話 (咦?這……從一開始用 Photoshop 或 Figma 手動做會不會更快……?我那引以為傲的 3 小時爆速是什麼意思……?)
在深夜的辦公室裡,當我意識到這個事實時,那種虛無感簡直難以言喻。而給我能量飲料的,是我的前輩。
前輩:「我工作結束了要回家了!!」
颯爽而去的前輩。看來是不會幫我了呢……
結論:Figma Make 的「擅長」和「不擅長」
經歷這次複雜的修正後,我了解到 FigmaMake 這個工具的特性。
使用方式不當的話,反而會增加修正的工數。
✅ FigmaMake 的強項(=能迅速完成)
- 管理後台、儀表板 UI、應用程式畫面等
- 整齊的柵欄式佈局、表單、資料表等最為強大。
- 它能瞬間建立「邏輯清晰的結構」,所以 SaaS 管理後台這類的產出品質高到幾乎可以直接使用(當然還是需要微調)。
- 初期的線框圖、結構提案
- 在「確認元素的充分性」階段,即使是落地頁也能充分利用(在細化設計之前)。
- 在細化需求時,也能製作各種不同的模式,相當便利。
- 將客戶的需求具體化,當場形成視覺,用來調整認知和想法,這個工具就派上用場了。
❌ Figma Make 不擅長的地方(=需要手動完成)
- LP(登陸頁面)的視覺設計
- 仍不擅長用「點綴」或「裝飾」展現吸引人的設計
- 生成的仍然只是整理好、易於使用的 UI。雖然也能製作漸層或圖案等裝飾效果,但如果沒有給出明確指示,有時會呈現出 2010年代左右的效果。
- 為提高設計製作時提示詞的精準度,需要花費時間。
- 將「隨便看起來不錯」這種模糊的感覺具體化
- 這裡仍需要人類設計師的翻譯能力。
- 如果持續使用提示詞,應該就能用更精確的指示順利製作(但我還做不到)
總結:儘管如此,作為「初稿基礎」仍然很優秀
因此,對於「根據董事長模糊指示製作 LP」的情況,直接使用 Figma Make 的生成資料會很困難。
不過,如同前篇文章所述,**「從空白狀態在三小時內做出基本雛形,進而引出老闆的需求」**這一點,確實派上了用場。而且以前在這個階段就要花相當多時間,導致整個專案進展被延後。
「大幅調整與簡化」這樣的需求,正是因為有叩板才能提出的意見呢(正面思考)。
這次的收穫
- Figma Make 是「結構」製作的專家。
- 「裝飾細節」才是設計師展現功力的地方。
- 能對應老闆「感覺好」的 AI 還不存在。
下次,我決定再接再厲,用 Figma Make 挑戰「公司內部管理工具 UI 翻新」的案子。(管理界面的話……管理界面的話應該就能大展身手……!)
至於登陸頁面的設計修正……。
嗯,今後我還是會一步步靠手工來加油!
還有 AI 的進化部分……。用跟前篇文章相同的提示詞生成的設計就是這樣。
短短數個月內,初次生成的品質大幅提升。真的相當令人驚訝呢。
精度大幅提升,實在令人害怕呢。我也想著要不輸給 AI 的進化,每天都要努力學習設計。
LP 本身也符合 WCAG 2.2 AA,而且
Lighthouse 也得到高分(雖然診斷需要一點時間,試試看吧!偶爾會滿分喔!)
而且奇妙地自動支援多語言化!
多語言化對應的文章也請看看吧!
最近瀏覽器翻譯是主流,但不需要切換就能自動便宜製作翻譯網站,超方便的呢!
覺得怎麼樣呢?
是不是完成得相當漂亮🎵
雖然寫了各種想法,但果然還是因為有初稿框架的幫助,能大幅削減工數的感覺呢!! 以前的話在 WF 階段就要花不少時間,之後還要落實到設計裡,進一步修改內容,工數削減了不少。 下次使用 AI 時,我想先好好生成提示詞再挑戰。 就當獎勵,來喝啤酒吧。
UI 設計每天都在更新!也在思考著 LP 設計要如何融入無障礙設計。最近已經有段時間沒碰標記語言了,「要不要也提升一下 JavaScript 技能?」這樣在思考著。喜歡北村匠海!
Hasshi
網頁設計師 / 2018年入社 / 心態上始終還是個初心者設計師