導言：

Framer 是一個針對設計師和開發者的軟體，它具有用於UI設計和網站開發的功能，其界面類似於 Figma。然而，使用 Framer 可能需要一定的設計和程式基礎，才能充分發揮其功能。

以往，在網站UI設計階段，我們經常看到美術同事在 Figma 或 Framer 上迅速操作。現在，有了Framer AI 的頁面生成功能，您也有機會能迅速獲得初步的配色和版面，生成的速度驚人。

一旦您體驗到Framer中建立網站的速度，您就有動力啟動自己的部落格，重新設計您的作品集，創建線上簡歷，或者收集您最喜歡的媒體內容。即使您只是一個小團隊，也有機會迅速宣傳您的產品。同時，您還可以在這個過程中學習 Framer 的操作技巧。

今天，讓我們來深入探討一下Framer AI的功能吧！

任務使用的工具簡介及成果：

任務名稱：建立您的個人網站，快速、簡單、高質感---探索Framer AI網站生成器
AIGC神器：framer
使用費用：免費。
本次AIGC任務成果：手作皮革產品設計網站
首頁

關於我們

產品系列

使用步驟：

1. 前往 framer 的網站並登入。
   

2. 點選左側的「Framer AI」，輸入您的提示詞，然後點擊「Start」。
   提示詞範例："網站名稱是 傑倫皮革設計工作坊。我想製作一個手作皮革設計產品形象網站，內容有：關於我們、服務項目、產品介紹、設計師團隊成員、皮革知識介紹、客戶評價、聯絡我們。"
   

3. 完成首頁的生成後，您可以立即發布網站。輸入網站名稱，例如"jj-leather-design"，然後點擊「Publish」。您將獲得兩個網址選擇，一個是預設的，另一個是您自定義的。
   https://streamlined-organization-928728.framer.app/
   https://jj-leather-design.framer.ai/
   
   

4. 首頁看起來已經很不錯了，現在我們可以繼續生成其他頁面。點擊右上角的「+」，重複步驟2，選擇「Framer AI」，然後輸入提示詞後點選「Start」。
   提示詞範例："關於我們頁面，有成立的緣由，事件時間軸，使命等等。"
   

5. 不到1分鐘，您的「關於我們」頁面就完成了。現在在左側的Web選項下，您可以看到兩個網頁，分別是"Home"和您剛剛建立的"/page"。
   

6. 要連接首頁的「關於」按鈕到"關於我們"頁面，點擊首頁，選擇"關於"，然後點擊右側的連接功能的 "+"，編輯連接，選擇"/page"，這樣您就建立了兩個頁面之間的連接。
   

7. 繼續按照相同的步驟創建其他頁面，例如"產品介紹"。輸入提示詞，例如："我希望創建一個產品介紹頁面，包括四種產品系列，分別是錢包系列、背包系列、手提包系列和側背包系列。"
   

8. 對於後續的頁面，可以重複相同的過程。

9. Framer是專業的UI設計工具，因此您可以自由修改每個頁面元素。

10. 完成細節修改後，再次發布更新您的網站。

任務完成，就這麼簡單！

過去，在UI設計階段，我們經常看到美術同事在Figma或Framer上迅速操作。現在，有了AI的協助，只需與AI聊聊您的需求，就可以自動創建一個不錯的版面，觀看元素逐個顯示的過程令人驚嘆！在細節修改的過程中，您還可以學習Figma的操作技巧，這也是一個不錯的學習機會。

現在，請動手體驗一下吧！通過與AI描述您的網站，讓Framer AI為您創建獨一無二的網站！

附錄：

• Framer: Learn
• Learn Framer in 20 Minutes (Crash Course)