Topics

這篇文章寫於去年，當時我們正在搭建落地頁。雖然最初是那時寫的，但人工智慧發展如此迅速，現在發布已經過時了……人工智慧的發展速度令人驚嘆。考慮到2026年它還會加速發展，設計師們必須不斷更新工作方式和訊息，否則就會被時代拋棄……這真是太不可思議了。 FigmaMake和Gemini3現在的功能遠不止於此。我希望你能快速瀏覽這篇文章，把它當作一位充分利用人工智慧但又被其發展速度所震撼的設計師的日記。我也會加入一些補充文字（也就是評論），所以請把它當作輔助音訊解說來欣賞。

你好！

我叫 Hasshi，在 Liberogic有限公司 擔任 UI 設計師。

我在之前的文章中熱情洋溢地報道說，我僅用了三個小時就使用 FigmaMake 和 Gemini 創建了一個著陸頁的粗略草稿。

這是前期工作的成果。

請點擊此處查看前一篇文章。

[製作和使用 FigmaMake：第一部分] 使用 FigmaMake 和 Gemini 只需 3 小時！新一代網頁製作流程，幫助您快速建立落地頁，幫助忙碌的 CEO 加快「紅墨水」流程

https://www.liberogic.jp/topics/20250723-figmamake/

本文是本系列文章的後半部。

向總統報告後，我感覺很好。

有了它，我們甚至可以在創紀錄的時間內回應總統提出的不合理要求！

3小時就能達到這樣的質量，還有什麼好抱怨的呢！

我也曾有過這樣的想法，哈哈。

這一次，我滿懷熱情地把它呈給了總統。

《地獄的修訂》我們將交付⭐️･:*+.\(( °ω° ))/.:+✨

總結，

總統發表那番言論後，我用 FigmaMake 精心製作的精美版面設計竟然消失得無影無蹤。

我認為即使人工智慧已經發展到今天，這種情況仍會繼續發生。

經驗教訓：FigmaMake 非常適合建立儀表板和線框圖，但可能還不適合建立情緒化的落地頁。

人工智慧近來發展迅猛，如今已能應用於多種領域，真是令人驚嘆！

總統的演講： 「讓一切看起來完美」的障礙

上次我向CEO展示了我設計的SaaS風格落地頁方案，當時我信心滿滿，因為方案做得相當不錯。

會長！我用人工智慧在極短時間內產生了那份LP的草稿！您覺得結構怎麼樣？

哇，真快。 （看著螢幕）……嗯，不過有點難。

這樣會不會太死板？ （不會，這是需要信任的B2B服務，所以保持這種條理性和規範性是好事…）

難道不能讓它更精彩一些，或者更有衝擊力、更鮮明一些嗎？另外，加些動態效果和裝飾，讓它看起來「漂亮」一些？

找到了。“讓它看起來好看。”

這是所有設計師最害怕的指令，也是人工智慧最難理解的一條指令。

我常聽到這樣的評價：「看起來不錯」或「感覺很倉促」。理解這些話背後的深層意義很重要。如今，設計師的溝通能力也備受考驗。我自己溝通能力較差，缺乏自信，所以這對我來說很困難，每天都像是在進行溝通訓練……（如果溝通能力對設計師來說真的那麼重要，我早就應該從小就好好培養他們了……唉。）

與客戶合作時，我們會深入了解對方的心理和需求，但總裁非常忙，沒有太多時間傾聽他們的意見。

由於總裁與員工之間的關係，管理可能會變得有些鬆懈，提出的要求也可能使用一些隨意的詞語。

然後我們進入共同努力消化和重新詮釋這位繁忙總統演講的階段。

這只是個藉口。這只是我找的藉口。

內心獨白（你說的「看起來不錯」是什麼意思？連雙子座老師都看不懂！能不能別再只用「砰」、「咻」之類的擬聲詞來給修改意見了？）

這種感覺至今仍未改變。

FigmaMake VS CEO 的殘酷評論

真正的戰鬥由此開始。

為了體現總統心中“美好的感覺”，我們對在 FigmaMake 中創建的基礎模型進行了修正…

這就牽涉到工具相容性問題了。

FigmaMake 僅生成“邏輯正確的網頁佈局”使用自動佈局創建了一個漂亮的盒子佈局。

這是人工智慧發展的另一個驚人之處。現在，如果你用同樣的提示產生一段文本，準確率相當高。你真的能感受到人工智慧的進步（見下圖）。

它美觀、有教育意義，而且作為模板主題易於使用。

然而，總統的要求

“我們來為背景增添一些紋理吧！” “我們來讓元素延伸到邊界之外。” “要不加些斜縫？”

例如，超越邏輯的情感裝飾僅有的。

每次我嘗試將裝飾圖像強行插入 FigmaMake 產生的資料中時，自動佈局就會開始發出警報，整個佈局都會崩潰。

內心獨白 （糟了！我添加背景圖的時候，下面的部分也移位了！FigmaMake，這不是你的錯，你說得對。但我還是沒能完全滿足CEO的要求……！）

不得不親手重現它的那種空虛感

“把這裡的邊距調小一點！” 「把紐扣調得更晃動一點！」

一個接一個地進來惡魔評論（紅色）為了解決這個問題，我不情願地禁用了 FigmaMake 創建的自動佈局，拆解了生成的組件，並手動重新排列了它們。

幾個小時後，螢幕上只剩下…設計數據完全不同，甚至與 FigmaMake 都不符。

這是經過多次修改後的第一稿。設計與第一稿完全不同。

此外，雖然所有現有元素都已自動佈局，但從 FigmaMake 複製到 Figma 時，由於某些原因，某些部分的自動佈局會被取消，這意味著您必須再次執行自動佈局。

我意識到修復這個問題需要花費大量時間。

內心獨白 （咦？一開始就用 Photoshop 或 Figma 手動繪製不是更快嗎…？我怎麼只花了三個小時就完成了…？）

那天晚上，我在辦公室深夜意識到這一點時，我感到一陣空虛。這時，我的資深同事給了我一罐能量飲料。

上司：“我下班了，要回家了！”

那個學長匆匆跑開了。他不會幫我的…

結論：FigmaMake 的優勢和劣勢

經歷了這一連串的修復工作後，我了解了 FigmaMake 這個工具的特色。

如果用錯地方，實際上會增加改正所需的工作量。

✅ FigmaMake 的優點在於（=它完成速度超快）

• 管理介面、儀表板介面、應用程式介面等。
  • 簡潔的網格佈局、表單、表格等都能達到最佳效果。
  • 它能立即創建一個邏輯結構，因此您可以創建出非常高品質的東西，您會認為它可以直接用於 SaaS 管理螢幕（當然，還需要進行一些調整）。
• 初始線框圖和結構方案
  • 如果您處於「檢查是否有任何缺失或不必要的元素」的階段，LP 可以很好地使用（在設計完全開發之前）。
  • 它還非常實用，因為它允許你在製定需求時創建各種模式。
  • 它對於口頭表達客戶的要求、當場賦予其形式以及微調圖像都非常有用。

❌ FigmaMake 的不足之處（= 需要手動操作）

• 為著陸頁創造視覺效果
  • 我仍然不擅長設計出帶有“裝飾”和“裝飾元素”的吸引人的作品。
  • 產生的介面簡潔易用。您可以添加漸層和圖案等裝飾，但如果不提供清晰的說明，最終效果可能看起來像是10年代的風格。
  • 設計過程中，提高提示訊息的準確性需要時間。
• 「感覺良好」這種模糊微妙感受的體現
  • 這仍然需要人類設計師的翻譯技能。
  • 如果我更頻繁地使用提示，我想我可以更流暢地創建它們，並提供更精確的說明（我現在還做不到這一點）。

總結：儘管如此，這仍然是一個很好的起點。

所以，由於“根據總裁模糊的指示進行LP生產”，直接使用FigmaMake產生的數據非常困難。是。

然而，正如我在之前的文章中寫到的，它確實非常有用，因為它「讓我能在三個小時內從一張白紙變成一個粗略的提綱，並讓總統同意我的想法」。以前，這會花費大量時間，而且要讓工作取得進展也需要很長時間。

還有人要求一些「明亮清爽」的東西。觀點的出現，只是因為存在一個起點。這就是（正向思考）的全部內容。

這次我學到了什麼

• FigmaMake 是創建「結構」的專家。
• 裝潢設計是考驗設計師技能的地方。
• 目前還沒有任何人工智慧能夠對總統的「良好感覺」做出反應。

下次我打算再試試 FigmaMake，這次我打算重新設計我們內部管理工具的介面。 （如果是管理員介面…我相信它一定會很棒！）

關於LP設計變更…

是的，我會繼續努力手工完成這項工作！

說到人工智慧的發展…這是使用與創建第一篇文章時相同的提示生成的設計。

短短幾個月內，第一代產品的品質就突飛猛進，這著實令人驚訝。

準確率的爆炸性成長著實令人擔憂。如今，我恨不得每天都學習設計，以免在人工智慧的快速發展中落伍。

和這是最終完成的網站。

該LP本身符合WCAG2.2AA標準。我確實這麼做了。
Lighthouse 的得分也很高（雖然需要花點時間，但一定要試試！有時候你會得到滿分！）
而且，令人費解的是，多語言支援！
如需多語言支持，請參閱這篇文章。請也看看這個！
如今瀏覽器翻譯已成為常態，但如果無需切換瀏覽器就能低成本地使用翻譯網站，那就太方便了！

你怎麼認為？
你不覺得結果相當不錯嗎？🎵

我寫了很多不同的東西，但我覺得事先有個草稿確實幫我減少了工作量！ 以前，我會在草稿階段花很多時間，然後還得把它放到設計裡修改內容，現在這樣省了我不少事。 下次用AI的時候，我一定會先生成一些好的提示。 我還獎勵自己喝了杯啤酒。