Topics

大家好！我是 Hasshi，Liberogic有限公司的 UI 設計師。

我最近擔心的是，我在為我的輔助功能服務建立新的 LP（登入頁面）方面沒有取得太大進展。

幸好，負責設計我們公司網站的CEO忙得不可開交。但照這樣下去，我們根本無法繼續下去…

“好吧，至少在這裡起草一份草稿，以便總統更容易審查！”

一切都始於這個想法，使用 AI（Gemini）和設計自動化工具（FigmaMake）快速製作 LP這次我會以設計師的角度來分享整個過程和我的真實想法！

我們這次的目標是：讓總統對草案做出一些「紅色評論」！

從一開始就不可能做出完美的事！是的！首先，一定要做出總統可以輕鬆評論的東西，這點絕對重要！

以閃電般的速度創建 LP 的完整過程（一旦習慣了，速度會更快！）

這次嘗試的生產流程實際的時間分配如下： 最耗時的是「重複」部分，是為了提高設計的準確性。

1. 【分析】雙子座老師，您覺得這張 LP 怎麼樣？（15分）
2. [文本生成]讓 Gemini 創建包含改進內容的著陸頁文本（15分）
3. [即時創作]讓 Gemini 在 FigmaMake 上施展你想要的“魔法”（5分）
4. [設計生成]FigmaMake，我先訂了！（5分）
5. [重複循環]透過分析和生成循環提高準確性(1.5小時)
6. 【Figma化】使用 Html to Design 外掛程式匯入 Figma（5分）
7. 【Figma修正】對佈局問題的最終調整（30分）

讓我們仔細看看每個步驟！

STEP 1：【分析】雙子老師，您覺得這張LP怎麼樣？ （15分鐘）

首先，我們讓 Gemini 閱讀我們現有的可訪問性頁面並獲得誠實的回饋。

[雙子座提示範例]

請分析以下 URL 上的網頁可存取性登入頁面，並列出其優點和缺點。

幾秒鐘後，分析結果就出來了：「『沒有案例分析，也沒有客戶評價，所以很難想像實施該服務的具體好處』……哇，太準確了，真是讓人心痛！不過，這是我自己說不出口的話，所以謝謝你們，Gemini！」他們能夠準確地用語言表達出我隱約感覺到的問題。

嘛，先了解現在的情況。這個頁面是我創建的，不過總之，我自己沒注意到的地方我會請雙子老師指出的！

步驟 2：[文字產生] 讓 Gemini 建立包含改進內容的 LP 文字（15 分鐘）

我們將複製並貼上步驟 1 的分析結果，並要求您建立包含改進建議的文字。

[雙子座提示範例]

根據上述分析結果，請為網頁無障礙落地頁建立文字結構方案。 （略）請將新增元素清晰標記為[範例文字]。

當你加入一些具體的文字，例如「顧客評價範例：XXXX有限公司：網站諮詢量增加了1.5倍！」時，它立刻就變得更像一個落地頁了。光是這一點就足以讓你感覺到你的工作已經完成了。

好的，我會把收到的批評清單交給 Gemini，讓他們把它變成一些很酷的東西。這才是人工智慧的最佳用途！ ……哎呀，我得確保他們把它標記為“[範例文字]”，這樣我以後就不會搞混了。我有點急於下結論…

步驟 3：[創建提示] 讓 Gemini 在 FigmaMake 上施展「魔法咒語」（5 分鐘）

您將被要求提供在步驟 2 中建立的文字結構提案和您想要建立的設計圖像，並為 FigmaMake 產生英文提示。

文字寫好後，就該設計了！這才是最有趣的部分！不過在此之前，我得先給 FigmaMake 寫個「提示」。我的英文不太好，表達不通，所以就交給 Gemini 老師吧。指望他了！

步驟 4：【設計生成】FigmaMake，剩下的交給我們！ （5 分鐘）

現在，複製貼上魔法咒語，然後按回車鍵！ ……或者說，你這麼說。也許我能一次得到一個神聖的設計？ ……也許不行。或者也許？這種興奮有點像扭蛋，很有趣。

複製並貼上產生的提示，然後點擊「生成設計」按鈕。這幾秒鐘的等待出乎意料地令人緊張。然後，第一個設計就出現了。

哇，完成了！不過還是有點簡單…我們會繼續調整設計和措詞。

但是，真正的行動從這裡開始。

步驟 5：[重複循環] 透過在分析和產生之間來回切換來提高準確率（1.5 小時）

接下來，就到了與 AI 進行腦力激盪的時間了。我們一邊查看 FigmaMake 產生的設計圖，一邊與 Gemini 商討想要改進的地方，並穩定地改進提示。

「喔不，不是那樣！」我大聲地自言自語。我的聲音可能在辦公室迴盪。但奇怪的是，我開始越來越喜歡這場集會了。

是的，第一次嘗試就不太順利！我知道會的！但我還是抱持希望！真正的行動從這裡開始，一場與人工智慧的三足比賽。是不是就像我是導演，Gemini是教練一樣？

這是最終的輸出

比第一張圖好多了。不過，刪除或添加不必要的部分很麻煩（可能是因為說明書是從日文翻譯成英文的，所以意圖經常無法準確傳達…）。

我認為在 FigmaMake 上可能無法再做任何事情，因此我採取了將其轉換為 Figma 資料然後進行更正的蠻力方法。

步驟 6：[Figmaize] 使用 Html to Design 外掛程式匯入 Figma（5 分鐘）

當設計方向確定到一定程度後，就可以將資料移轉到 Figma 了。具體步驟如下。

1. FigmaMake 產生的設計首先以網頁的形式發布。
2. 啟動 Figma 插件“Html to Design”。
3. 輸入已發佈的 FigmaMake 的 URL 並執行導入！

你只需要使用“Html to Design”插件。複製並貼上你在 FigmaMake 中發布的頁面 URL，然後點擊按鈕。就這樣，網頁就轉換成了 Figma 中的圖層。真是太方便了！

FigmaMake 正式發布

首先，發布 FigmaMake。按一下“發布”，狀態將變更為“已發布”。

啟動 Figma 外掛程式“Html to Design”，輸入你發佈的 FigmaMake 的 URL，然後匯入！

啟動外掛程式並貼上您剛剛取得的 URL。然後點選「導入」按鈕，就完成了！

幾分鐘後，輸出的設計將顯示在 Figma 上。

最後將公共狀態改為私人

完成這些步驟後，取消發布該貼文以將其恢復為私人狀態。

擔憂

目前，沒有設定公開狀態的密碼或建立開發環境的功能，因此如果您使用它來更新公司網站，則需要注意資訊外洩。

基本上，如果您創建的內容僅限於您自己的公司，或者您正在使用虛擬資訊建立草稿，我認為它不會產生任何影響，所以我認為最好根據專案來使用它（切勿將其用於不允許外部分發的項目）。

好了，看起來不錯！現在該介紹我的拿手好戲了，Figma！不好意思讓你久等了，兄弟！

STEP 7：[Figma 修正] 佈局問題的最終調整（30 分鐘）

新導入的資料仍然不夠完善，存在神秘的分組和溢出的文字框，有很大的改進空間。

從現在開始，一切都與穩定的修改工作有關：重新運行自動佈局，將脫節的元素重新組合成組件，調整整體邊距……這些小小的努力顯著提高了設計的質量，並將其變成了「適當的草稿」。

這是成品

隨著 LP 的深入，設計的粒度會降低，但我不確定這是否只是 AI 不可避免的一個方面，或者我的指令很差……我會繼續嘗試各種選項。

導入，然後……嗯，佈局比我想像的還要生動活潑！嗯，這都是AI辛勤工作的成果。現在是時候好好整理一下，表達我的愛了。

總結：創作感悟：「AI協同設計」的要點

透過這個生產流程我意識到，AI不是一根“魔杖”，而是一個“優秀的伙伴”。

• 創建草稿的節省時間的效果是巨大的：這比從頭開始製定作文計劃要快得多。
• 關鍵在於反覆試驗循環：創造好的設計需要耐心以及與人工智慧的反覆對話。
• 最後一步：品質取決於設計師不是盲目地接受AI所創造的東西，而是有意圖地完成它。

順便說一句，當我膽怯地將這份草稿展示給總統時…「哦，這太有意思了！這樣討論就更容易推進了！有了起點就有很大的不同，謝謝！”他們就是這麼說的。

太棒了！努力都值得…！今晚的啤酒味道真好！

暫時就這些！等社長把紅墨水加完之後，LP 的正式版會作為後半部發布！

為什麼不嘗試與人工智慧合作創造新的設計呢？