【實作與活用 Figma Make：上篇】結合 Figma Make 與 Gemini，3 小時完成！快速打造供忙碌社長進行「紅字修改」的 LP 初稿，新世代的網頁製作流程

大家好！我是 Liberogic Inc. 的 UI 設計師，大家都叫我「哈西」。

我最近的煩惱是：無障礙（Accessibility）服務的全新 LP（登陸頁面）製作進度一直推不動。

負責自家網站架構的社長，很感謝他，但因為另有要務而非常忙碌。可是這樣下去，進度還是會停滯不前……。

「好，為了讓社長審閱時能輕鬆一點，我們先在這邊做個草稿吧！」

這個念頭促成了這次的專案，我們運用AI（Gemini）與設計自動化工具（Figma Make）快速製作 LP。這次我將從設計師的角度，毫無保留地分享完整步驟與我真實的內心獨白！

本次目標：先做出草稿，引出社長的「紅字修改」！

反正一開始就不可能做到完美！嗯！首先要丟出社長容易吐槽的球，這很重要，一定是這樣！

快速製作 LP 的完整步驟（熟練後會更快！）

這次測試的製作流程，實際時間分配大致如下。最花時間的是為了提升設計精準度而反覆調整的部分。

1. 【分析】 Gemini 老師，這個 LP 你覺得如何？ （15 分鐘）
2. 【文案生成】 請 Gemini 撰寫包含改善重點的 LP 文案 （15 分鐘）
3. 【提示詞製作】 請 Gemini 撰寫要輸入 FigmaMake 的「神奇咒語」 （5 分鐘）
4. 【設計生成】 FigmaMake，先來一次搞定！ （5 分鐘）
5. 【反覆循環】 透過分析與生成的來回往返提升精準度 （1 小時 30 分鐘）
6. 【轉換為 Figma】 使用 Html to Design 外掛匯入 Figma （5 分鐘）
7. 【Figma 修正】 最終調整版面跑版等問題 （30 分鐘）

接下來，讓我們逐一詳細看看各個步驟！

STEP 1：【分析】Gemini 老師，這個 LP 你覺得如何？（15 分鐘）

首先，我們先讓 Gemini 閱讀本公司現有的無障礙網頁，並取得毫不客氣的回饋意見。

【Gemini 提示詞範例】

請分析以下網址中關於網頁無障礙的 LP，列出其優點與可改善之處。（後略）

接著，幾秒鐘後就出現了分析結果。「『沒有導入案例或客戶的聲音，很難想像導入服務後的具體效益』……哇，說得太精準，真的扎心了……！但這些我自己是說不出口的，謝謝你，Gemini！」它把我隱約感覺到的問題，精準地化為了文字。

那麼，先從掌握現狀開始。現在這個頁面雖然是我做的，但……總之，請 Gemini 老師直接點出我自己察覺不到的地方！

第 2 步：【文字生成】請 Gemini 製作包含改善點的 LP 文字（15 分鐘）

將第 1 步的分析結果複製貼上，請它撰寫納入改善方案的文字。

【Gemini 提示詞範例】

請根據先前的分析結果，撰寫無障礙 LP 的文字架構草案。（中略）新增的元素請明確標註為【範例文字】。

當出現「【客戶心聲範例】〇〇股份有限公司：透過網站的諮詢數量成長為 1.5 倍！」這類具體的文字時，整個頁面立刻就有 LP 的感覺了。光是這樣就讓人覺得自己已經完成工作了呢。

好，那就把剛才拿到的批評清單直接交給 Gemini，請它寫出更出色的文章。這就是 AI 的善加利用！……啊，為了避免之後自己搞混，最好請它在內容上標註「【範例文字】」。我很容易急著下結論，所以得小心才行……

步驟 3：【撰寫提示詞】請 Gemini 撰寫要交給 FigmaMake 的「魔法咒語」（5 分鐘）

將步驟 2 製作的文字架構，以及您想要的設計構想告訴 Gemini，請它產生給 FigmaMake 使用的英文提示詞。

文字都完成了，接下來終於要進入設計了！這是最令人期待的部分！不過在那之前，得先寫一封給 FigmaMake 的「請求書（提示詞）」才行。我的英文還不夠流利，這部分就交給 Gemini 老師吧。全都要靠您了！

步驟 4：【生成設計】FigmaMake，接下來就拜託你了！（5 分鐘）

來吧，複製貼上這道魔法咒語，按下 Enter 就開始了！……說不定一次就能得到完美的設計呢？……應該不會吧。不，也許會？這份期待感有點像扭蛋，還挺有趣的。

將生成的提示詞複製貼上，然後點擊生成設計按鈕。這短短幾秒的等待，總讓人有點緊張。接著，第一版設計出爐了。

哇，做出來了！！不過還是很陽春呢……接下來要在設計層面進行調整，並持續修改文案。

不過，果然真正的重頭戲現在才開始。

步驟 5：【反覆循環】透過分析與生成的來回往返提升精準度（一個半小時）

接下來是與 AI 腦力激盪的時間。一邊看著 FigmaMake 生成的設計，一邊向 Gemini 提出「想要這樣改」的想法，逐步改善提示詞，是一項扎實而耗時的工作。

「啊，不是那邊！」不知不覺就自言自語了起來。大概整個辦公室都聽得到吧。不過奇妙的是，這場來回切磋卻越來越有趣。

是的，果然沒辦法一次就 OK 呢！我早就知道了！不過，其實還是有稍微期待一下啦！接下來才是正戲，和 AI 並肩作戰。我是導演，Gemini 則像是教練吧？

最後的輸出結果就是這個

比起最初的繪製，已經整理得相當不錯了。不過……要刪除不需要的部分或是新增內容還是很麻煩（大概是因為我把日文翻成英文再下指令，所以常常無法準確傳達意圖吧……）。

心想在 FigmaMake 上再繼續修改大概不太可能，於是決定先轉換成 Figma 資料再進行修正，可以說是硬碰硬的做法。

步驟 6：【轉換為 Figma】使用 Html to Design 外掛匯入 Figma（5 分鐘）

設計方向已經有一定的雛形後，終於要把資料移到 Figma 了。以下說明操作步驟。

1. 先將 FigmaMake 產生的設計暫時發布為網頁。
2. 啟動 Figma 的外掛「Html to Design」。
3. 輸入已發布的 FigmaMake 網址，然後執行匯入！

使用的是外掛「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 對話、耐心反覆修正。
• 最後仍需人工完成: 不應照單全收 AI 產出的內容，由設計師帶著明確意圖進行收尾，才是決定品質的關鍵。

順帶一提，我戰戰兢兢地把這份初稿拿給社長看… 「哦，很有趣！有這樣的初稿，討論起來就容易多了！光是有初稿就完全不一樣，謝謝你！」 他是這麼說的。

太好了！總算沒白費力氣……！今晚的啤酒一定特別好喝！

本次就到這裡！實際製作 LP 的部分，將在社長完成修改意見後進行設計收尾，並以【後篇】的形式公開！

各位也要不要試試看，與 AI 協作進行全新的設計製作呢？