--- title: "從心動到行動：30秒生成作品集，提升職場競爭力 | Framer AI 實測" id: "608" type: "post" slug: "framer-ai-hands-on-review" published_at: "2023-11-23T04:09:00+00:00" modified_at: "2025-11-16T09:43:13+00:00" url: "https://lnlstudios.com/zh/framer-ai-hands-on-review/" markdown_url: "https://lnlstudios.com/zh/framer-ai-hands-on-review.md" excerpt: "透過 Framer AI，無需程式碼，輕鬆製作響應式網站。今天就來實測看看，如何在一分鐘內生成個人作品集網站。" taxonomy_category: - "設計工具" taxonomy_post_tag: - "AI Tools" - "Framer" - "個人品牌" - "實測心得" - "求職" - "網站設計" taxonomy_language: - "中文 (台灣)" --- **Framer 的出現，大大改變傳統網頁設計的流程。** > 在有房有車之前，我們可以先擁有一個自己的網站 ## 為什麼需要個人作品集網站？ 過去的求職方式主要依賴於簡歷和面試，但隨著數位化時代的到來，越來越多的雇主希望能夠在第一時間看到求職者的實際作品和專業能力。而一個精美的個人作品集網站，不僅能夠展示你的專業技能，還能夠讓HR在眾多應徵者中迅速找到你、記住你。 ## 個人網站在職涯中的重要性 我有一位大神朋友，曾在Facebook和Google任職交互設計師，他在去年架設了自己的個人網站，整體風格簡約又有個人風格，上面放了他曾經參與過的無數專案、服務過的客戶、項目內容及成效，當然還有得獎獎項。他說：「這個網站讓他看起來更像專業人士。」也是他在應徵上夢想工作（Dream Job）不可或缺的重要元素。 ## Framer 介紹 Framer 成立於 2014 年，旨在讓所有人都能更輕鬆的製作網站。不需要寫程式，透過 Framer 裡直覺的工具，你就可以輕鬆的建立響應式網站。它的介面就和很多設計款體類似，若你有用過Figma 或是 Canva，相信你覺得他的介面非常好上手。如果你是個人品牌、自由工作者和小型企業主，想要有一個簡單又專業的網站，[Framer](https://framer.link/lnlstudiosxframer) 就是非常適合的工具。 ### 重點整理 - 完全不需要程式碼或繪製圖片 - 輕鬆製作響應式設計（RWD），讓網站在任何裝置上都能完美呈現。 - 輕鬆整合來自其他設計工具（如 Figma）的元素。 - Framer也有CMS和SEO工具 [https://www.framer.com?via=lnlstudiosxframer](https://www.framer.com?via=lnlstudiosxframer) ![Framer price](https://lnlstudios.com/wp-content/uploads/2023/11/%E6%88%AA%E5%9C%96-2023-11-24-%E4%B8%8A%E5%8D%8812.27.50-1024x470.png)費用的部分大家可以上他們官網研究一下，而今天分享的實測功能都是**免費**的（讚 ### 付費和免費版主要的差異在於 : - 可使用自訂網域 Domain Name - 有更多的 CMS 擴充功能 - 可乘載更多的網站流量 - 付費版能使用 Custom Code [前往 Framer 官網](https://framer.link/lnlstudiosxframer) **訂閱 Pro 年度計劃並輸入折扣碼：**partner25proyearly**，即可免費享受 3 個月。** ## 用 [Framer AI](https://framer.link/lnlstudiosxframer) 在 30秒內生成個人網站 今天就是要來介紹 Framer 在今年發表的 AI 功能，主打**無需編寫任何程式碼或繪製圖形**。不得不說，它所能達到的結果完全超出我所預想。以下是我的實測，基本上只要三個步驟，你就可以透過 prompt 輕鬆生成 UI 介面與文案，並且產生能夠互動的網頁。 ![Framer AI](https://lnlstudios.com/wp-content/uploads/2023/11/Framer_AI_Prpcess-1024x703.png)1. 點擊「**Insert**」→ 2. 點擊「**Framer AI**」→ 3.輸入你的**Prompt**。三個步驟就可以在30秒內生成三種尺寸(電腦、平板、手機)的網站。 ### 接下來就來實測看看！以“攝影作品集”網站為例： **Prompt:**Design a Dark theme website for a “photographer” called Allen Walker. It should feature sections such as Portfolio (showcasing different photography genres such as weddings, landscapes, and portraits), About the Photographer, and a Contact page. ![Image](https://lnlstudios.com/wp-content/uploads/2023/11/%E6%88%AA%E5%9C%96-2023-11-23-%E4%B8%8B%E5%8D%8811.26.48-1024x499.png)第一版生成出來的結果還不錯，文案、架構、圖片都有了，接著可以依照格人或是品牌掉行調整一下顏色和字體。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/11/Framer_Color_palette-1024x555.png)右邊工具欄有多種色彩配置可以選擇，只要點擊就會自動更換，非常方便。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/11/%E6%88%AA%E5%9C%96-2023-11-23-%E4%B8%8B%E5%8D%8811.43.53-1024x439.png)每個Section旁邊會有一個「星星按鈕」，點擊後該Section會獨立做調整（主要是配色） [https://lnlstudios.framer.ai/](https://lnlstudios.framer.ai/) [https://lnlstudios.framer.ai/](https://lnlstudios.framer.ai/) 最後調整完顏色、字體後就可以點擊右上角「**Publish**」上線啦！ 調整完後感覺，ㄟ～好像蠻有東西的喔！ Demo網址：[https://lnlstudios.framer.ai/](https://lnlstudios.framer.ai/) ## 實測心得分享 每次生成網頁都很像開**盲盒**一樣，很期待它會給出什麼樣的設計XD 老實說，身為一個專業的網頁設計師，Framer AI 目前生成的設計模板味還是偏重、生成出的都是基本板型，若想要把個人品牌特色帶入，會需要花上一些時間和技巧去調整。 ### Framer AI 可以用在哪？ - 小型的品牌活動網頁 - 個人 / 作品集網站 若你的需求是想在短時間內生出一個簡單且響應式的網站，它確實可以作為一個不錯的工具。你可以用它生成初版，省去從0開始的無助感，再去調整細節或加入更多功能。 另外，Framer也提供很多有設計感的[免費模板](https://framer.link/JHJFiFE) ，大家也可以去逛逛！另外我也用Framer實做了另一個作品集模板，成品也是非常不錯！過程和教學就在下一篇文章和大家分享！ 延伸閱讀：[https://lnlstudios.com/building-portfolio-framer/](https://lnlstudios.com/building-portfolio-framer/) [面試必備！零程式碼，用 Framer 設計線上作品集](https://lnlstudios.com/building-portfolio-framer/) 標籤[# AI Tools](https://lnlstudios.com/zh/tag/ai-tools/) [# Framer](https://lnlstudios.com/zh/tag/framer/) [# 個人品牌](https://lnlstudios.com/zh/tag/%e5%80%8b%e4%ba%ba%e5%93%81%e7%89%8c/) [# 實測心得](https://lnlstudios.com/zh/tag/%e5%af%a6%e6%b8%ac%e5%bf%83%e5%be%97/) [# 求職](https://lnlstudios.com/zh/tag/%e6%b1%82%e8%81%b7/) [# 網站設計](https://lnlstudios.com/zh/tag/%e7%b6%b2%e7%ab%99%e8%a8%ad%e8%a8%88/) ![Profile photo](https://lnlstudios.com/wp-content/uploads/2024/12/Reme-scaled.jpg)##### 關於我 About me Reme，是一隻愛睡覺的北極熊，從外商品牌設計師轉職成為遠端UIUX設計師，找到自己喜歡的生活步調，享受生活中的美好當下。 I’m Reme ☺ — a digital designer passionate about helping businesses succeed through beautiful and functional designs. 合作邀約：sleepyrem.co@gmail.com [https://instagram.com/lnlstudios.co?igshid=MW4zMmVpNXNiMXhheQ%3D%3D&utm_source=qr](https://instagram.com/lnlstudios.co?igshid=MW4zMmVpNXNiMXhheQ%3D%3D&utm_source=qr) #### 文章分類 - [品牌設計](https://lnlstudios.com/zh/category/branding/) (4) - [設計工具](https://lnlstudios.com/zh/category/tools/) (9) - [質感生活](https://lnlstudios.com/zh/category/%e8%b3%aa%e6%84%9f%e7%94%9f%e6%b4%bb/) (1) #### 最新文章 - [AI 時代，Framer 和 Webflow 還值得學嗎？](https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/) 2025-12-12 - [Logo 設計前必看：設計師都在用的 7 個核心原則](https://lnlstudios.com/zh/10-logo-design-tips/) 2025-11-15 - [【 Framer 】2025 最推薦新手的網站設計工具](https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/) 2025-11-08 - [Framer 作品集製作指南：零程式碼打造專讓面試加分的 Portfolio](https://lnlstudios.com/zh/building-portfolio-framer/) 2025-10-14 - [線上作品集｜5 款免費高品質 Framer 作品集模板讓面試加分](https://lnlstudios.com/zh/free-framer-portfolio-templates-for-design-job-interviews/) 2025-09-05 #### 相關文章 [https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/](https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/) #### [AI 時代，Framer 和 Webflow 還值得學嗎？](https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/) - 2025-12-12 [https://lnlstudios.com/zh/10-logo-design-tips/](https://lnlstudios.com/zh/10-logo-design-tips/) #### [Logo 設計前必看：設計師都在用的 7 個核心原則](https://lnlstudios.com/zh/10-logo-design-tips/) - 2025-11-16 [https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/](https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/) #### [【 Framer 】2025 最推薦新手的網站設計工具](https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/) - 2025-11-16