記者鄧天心/綜合報導
國外科技界近期瘋傳一款名為Lovable AI的開發神器,主打讓不懂代碼的人也能像資深工程師一樣優雅開發」,不同於市場上常見的Wix或Canva等視覺化建站工具,Lovable AI是一款基於大型語言模型的AI網站開發助手,核心亮點在於生成的不是網頁模板,而是真實的原始碼(Real Code)。

你可以用Lovable AI打造的作品集是有後端邏輯與資料庫連接能力,無論是部署在GitHub還是個人網域都可以。如果要做一個會動的作品集,是訪客不需要點擊選單,而是直接輸入「help」、「about」或「projects」等指令,網站就會回應,這種互動體驗往往能在眾多平庸的求職申請中,讓雇主留下難忘的第一印象。
更多科技工作請上科技專區:https://techplus.1111.com.tw/
科技社群討論區:https://pei.com.tw/feed/c/tech-plus
第一步:登入 Lovable AI 並領取免費額度
首先在Lovable AI官網並完成登入,他每天會自動發放5個免費點數 (5 free credits daily)給用戶,做一個單頁式作品集的開發與優化來說已經綽綽有餘,不需要設定任何複雜的開發環境,只要打開對話視窗,就能開始與AI協作。
第二步:構建提示詞
要讓AI精準還原你腦中的畫面,提示詞 (Prompt) 的結構至關重要。一份合格的指令必須涵蓋四個核心維度:視覺風格 (Visual Style) 需要明確指定顏色(如黑底綠字 #00FF00)、字體(如 Monospace)以及佈局細節;功能性 (Functionality) 則要定義互動行為,例如閃爍的游標或指令輸入框;內容細節 (Content) 包含你的個人簡介、ASCII藝術橫幅與指令清單;最後則是技術規範 (Technical Requirements),確保網站在不同尺寸的手機與平板上都能維持完美比例 (Responsive Design)。
第三步:一鍵見證奇蹟
你可以嘗試輸入這段完整的指令:「Create a terminal-style portfolio with a black background (#0D1117) and neon green text. Include an ASCII art banner with my name, a command input field at the bottom, and make sure it responds to ‘help’, ‘skills’, and ‘contact’ commands. Please ensure the entire site is mobile-friendly.」按下Enter後,你會看見Lovable AI開始跳動代碼,並在幾秒鐘內於右側預覽視窗展現出一個具備動態游標與指令紀錄的「會動的」作品集。
Lovable AI厲害在於它的代理模式 (Agent Mode),它不只是聽指令,還會自主思考與修正路徑,能將建置錯誤率降低90%以上。你還可以將成品直接同步到GitHub,此外,它內建的一鍵部署 (One-click Deploy) 功能與 Supabase 資料庫整合,讓你可以輕鬆加入使用者評論或即時數據更新。
不過要注意Lovable AI對於過於複雜的邏輯,可能需要多次調整提示詞來對齊細節;此外,對提示詞的敏感度也意味著你需要花一點時間學習如何精準表達。然而,Lovable AI成功打破了技術門檻,如果你還在為履歷沒亮點而煩惱,不如現在就去領取免費額度,親手打造一個讓面試官驚豔的互動作品集!
延伸閱讀:
輝達霸氣橫掃 MLPerf 6.0 測試!AI 推論表現優於對手 9 倍
參考資料:
code cademy:How to create a portfolio website using Lovable AI
Built my freelance portfolio using Lovable as a starting point – here’s the final result!
producthunt:Lovable The world’s first AI Fullstack Engineer
—
本篇文章授權來源:科技島