現在用 Claude Code、Codex 這類 AI 工具做網站的人越來越多，大家口中的「vibe coding」（用聊天的方式叫 AI 寫程式），讓不太會寫程式的人也能做出一個能動的網頁。不過阿正老師發現一個共同問題：AI 做出來的畫面常常很「陽春」，按鈕就是一塊方塊、開關就是一個勾選框，功能有了，但看起來就是少了那麼一點精緻感。
想要按鈕按下去會飛出紙飛機、開關切換時有日夜變化動畫，自己描述給 AI 聽常常講半天還做不出來。最近韓國開發者 Seokwoooo 釋出了一個開源專案「Lucian UX/UI Prompt」，一口氣免費放出 200 個會動的 UI 元件，挑好喜歡的，按一下「複製提示」貼給 AI，就能照原樣套進自己的網站，而且個人和商業用途都能免費使用。
這篇阿正老師就帶大家看看它到底怎麼用、提示詞裡藏了什麼門道，以及使用前需要注意的地方。先說明：本文為官方資料整理，尚未實測，內容依據官方網站與 GitHub 公開資料，查證日期為 2026 年 10 月 12 日。
文章目錄
一、Lucian UX/UI Prompt 是什麼？
Lucian UX/UI Prompt 是由 lucianLabs（開發者 Seokwoooo）在 2026 年 10 月推出的互動式 UI 元件庫。跟一般元件庫最大的不同是：它不是給你一包程式碼自己研究，而是把每個元件包成一段「可以直接貼給 AI 的提示詞」，裡面同時包含完整可執行的原始碼，以及要求 AI 如何移植的詳細指示。
網站上的每個元件都是真的能動的，畫面捲到它時會自己示範動畫，你也可以直接用滑鼠或手指按按看，喜歡再帶走，不用先安裝任何東西。
| 官方網站 | https://lucianlabs.dev/uxui-prompt/ |
| 目前規模 | 200 個元件、14 個分類（2026 年 10 月），官方表示會持續增加；技能（skill）工具版本 1.1.0 |
| 支援工具 | 官方點名 Claude Code、Codex、Cursor 等 AI 程式工具；元件可轉成 React／Next.js、Vue、Svelte、Astro 或純 HTML |
| 費用 | 完全免費，MIT 開源授權，個人與商業用途皆可 |
| 中文支援 | ❌ 網站與元件文字只有英文、韓文兩種，沒有繁體中文（介面文字可請 AI 幫你換成中文） |
| 台灣可用性 | ✅ 網頁直接開啟即可使用，不需註冊帳號 |
| 軟體下載 | [官方網站]（網頁服務，無安裝檔）；技能原始碼：[GitHub] |
二、200 個元件有哪些？
官方把 200 個元件分成兩大類，編號 001～100 是「網頁零件」，101～200 則是可以單獨當成一個功能來用的「小工具」。
001～100：網頁零件
- 按鈕、開關與選擇器、輸入框與搜尋
- 選單與分頁、卡片與內容區塊
- 登入／註冊畫面、通知與回饋訊息
- 載入中與進度條、空白頁與錯誤畫面
- 小工具與圖表
101～200：可以獨立使用的小工具
- 空間、行程、設計類工具（例如平面圖、行事曆）
- 文件與資料編輯器
- 分析圖表
- 任務與系統管理介面
官方介紹頁展示的幾個代表作，像是按下去紙飛機沿著曲線飛走、中間畫出打勾的送出按鈕（#005）、拖動把手比較同一座城市白天與夜晚的滑桿（#060）、對半翻頁的翻牌計時器（#100）、播放時唱片從封套滑出來旋轉的音樂播放器（#055），都很有質感。所有元件都同時支援明亮模式與暗黑模式，也照顧到觸控、鍵盤操作，以及系統「減少動態效果」的設定。
三、用法一：複製提示詞貼給 AI
這是最簡單的用法，不需要安裝任何東西，適合偶爾想加一兩個元件的人。
- 逛圖庫：打開 Lucian UX/UI Prompt 圖庫，元件會自己示範動畫，也可以直接按按看。也可以切換明亮／暗黑模式比較效果。
- 複製提示：看到喜歡的元件，按一下「複製提示」按鈕，完整原始碼和套用指示會一起複製到剪貼簿。
- 貼給 AI：貼到 Claude Code、Codex 或 Cursor 裡，在提示詞最後的「插入位置」填上要放在哪個頁面，「替換對象」填上要換掉的舊元件（沒有就寫「沒有」）。
- 讓 AI 套用：AI 會先檢查你的網站是用什麼框架、怎麼處理暗黑模式，再把元件照原樣搬過去，最後回報改了哪些檔案。
還不熟悉 Claude Code 的朋友，可以先看阿正老師之前寫的〈Claude Code 新手教學（2026）：會打字就能用的 AI 助手〉。
四、用法二：安裝 lucian-uxui 技能讓 AI 自己挑
如果你常常做網頁，一個一個複製會有點累。官方另外提供了一個「技能」（Agent Skill，可以想成教 AI 新本事的說明書加小工具），裝好之後只要用一句話描述需求，AI 就會自己去圖庫找合適的元件來用。對 Skill 這個概念還不太熟的話，可以參考〈如果 AI Agent 是一間公司：一次搞懂 AI Agent、MCP、RAG、Memory、Skill〉。
安裝方式（擇一）
通用安裝（Claude Code、Codex、Cursor 等支援 Agent Skills 的工具），在終端機輸入：
npx skills add Seokwoooo/lucian-uxui
如果是 Claude Code，也可以用外掛（plugin）方式安裝，在 Claude Code 裡依序輸入：
/plugin marketplace add Seokwoooo/lucian-uxui /plugin install lucian-uxui@lucian-uxui
環境需求是 Node.js 18 以上，並且要能連上 lucianlabs.dev（連不上時會自動改用 GitHub 備援）；沒有 Node.js 的話，AI 會改用 curl 下載。
使用方式
- 用說的：「使用 lucian-uxui 技能，在我的首頁加入方案價格切換和常見問題 FAQ。」
- 指定編號：「用 lucian-uxui 技能把 056 號元件加到價格區塊。」在圖庫看到喜歡的，直接報編號或貼連結最準。
- 直接呼叫：Claude Code 輸入
/lucian-uxui（用外掛安裝則是/lucian-uxui:lucian-uxui），Codex 輸入$lucian-uxui。
依照官方說明，技能啟動後 AI 會依序做五件事：讀取你的專案（框架、樣式、主題、網站語言）→ 把頁面拆成各個零件分別搜尋圖庫 → 只下載選中的元件 → 轉換成你專案的寫法並對接配色 → 回報用了哪些元件和示範連結。版面骨架還是由 AI 自己蓋，Lucian 負責提供那些會動的零件。
這種「裝技能讓 AI 學新本事」的玩法，本站之前也介紹過〈obsidian-skills 讓 Claude 秒懂你的筆記庫〉和〈用 Claude + Remotion 一句話生成動畫影片〉，有興趣可以一起看。
五、提示詞裡到底寫了什麼？
阿正老師覺得這個專案最值得一看的，其實是它的提示詞寫法。它不是一句「幫我做一個會飛的按鈕」，而是一份分段清楚的施工說明書，就算不用這個元件庫，也很值得拿來參考怎麼跟 AI 下指令：
- 先確認：要求 AI 先查清楚你的網站用什麼框架（React、Vue、純 HTML 等）、用什麼方式寫樣式、暗黑模式怎麼切換，並回報要插入的位置在哪裡被使用。
- 不准亂改設計：動畫的時間、曲線、延遲都要照原樣搬，明確寫著「不要自己猜測重新設計」。
- 保留原本的功能：原有的資料、事件、表單值、無障礙標籤都要留著，不能因為換外觀就把功能弄壞。
- 不污染全站：樣式只能寫在這個元件自己的範圍內，不能改到全站的 CSS 或程式。
- 明暗都要驗：配色要對接到你網站原有的主題變數，明亮、暗黑兩種模式都要檢查。
- 完成要回報：列出改了哪些檔案、跟原本有什麼不同、檢查了哪些項目，以及哪些沒檢查到。
最後一點特別好，讓 AI 主動說出「我沒驗證到什麼」，比只會說「完成了！」可靠得多。元件程式碼本身都是純 HTML、CSS、JavaScript，不需要額外安裝任何外部函式庫。
六、授權與安全性注意事項
免費、可商用是真的，不過有幾件事使用前要先知道。
⚠️ 授權條件：保留出處那一行。每個元件最上方都有一行註解，寫著元件編號、MIT 授權與作者網址，官方要求搬進你的專案時這一行要保留，這是 MIT 授權唯一的條件，商用也一樣。
⚠️ 技能是「即時從網路下載」元件。技能本身不內建元件，每次都是從作者的網站（或 GitHub 鏡像）抓最新的元件程式碼，再由 AI 寫進你的專案。好處是新元件不用更新技能就能用；但也代表你信任的是「作者網站上當下的內容」。如果是公司正式上線的網站，建議套用後還是要看一下 AI 加進來的 JavaScript，或請懂程式的同事把關。
從 GitHub 公開的技能原始碼來看，它的小工具只會「下載」元件與目錄檔案，沒有把你的專案內容上傳出去，也沒有統計追蹤，下載過的檔案會暫存在電腦的快取資料夾，重複使用時幾乎不再耗網路。比較進階的使用者，官方也提供 LUCIAN_UXUI_BASE 這個環境變數，可以改成指向自己下載保存的副本，等於把元件版本鎖住。
另外要提醒，這是一個 2026 年 10 月才剛發布的全新專案，查證當天 GitHub 上幾乎還沒有社群回饋，長期會不會持續維護目前還說不準，200 個元件在各種手機上的表現也有待大家實際試用。
七、優缺點與阿正老師點評
✅ 優點
- 完全免費、MIT 授權可商用
- 網頁上直接試按，所見即所得
- 提示詞寫得非常專業，AI 照搬不走樣
- 全部支援明暗主題，不綁特定框架
- 元件零依賴，不用另外裝函式庫
- 技能版可一句話讓 AI 自動挑元件
⚠️ 缺點
- 沒有繁體中文，網站與元件文字只有英、韓文
- 要搭配能改檔案的 AI 工具才好用
- 技能安裝需要 Node.js 與終端機
- 每次即時下載，需要信任作者網站
- 剛發布的新專案，長期維護待觀察
阿正老師點評：這是阿正老師近期看到最「有誠意」的免費 UI 資源之一，元件好看還在其次，真正厲害的是那份提示詞，把「怎麼讓 AI 照原樣搬、不亂改、做完要報告」都想好了。最適合已經在用 Claude Code、Codex 做網站，覺得畫面太陽春、想加一點質感的朋友；完全沒碰過 AI 寫程式的人，建議先從「複製提示詞」這條路開始玩，熟了再裝技能。
八、阿正老師的總結
只想幫網站加一兩個好看的按鈕或開關
→ 用法一：複製提示詞。不用安裝，逛圖庫挑好直接貼給 AI 就行。
常常用 AI 從零做整個頁面
→ 用法二：安裝 lucian-uxui 技能。一句話描述需求，AI 自己去圖庫找零件拼起來。
公司正式上線的商業網站
→ 可以用，但記得把關。保留授權註解，並檢查 AI 加進來的程式碼再上線。
想學怎麼寫出好的 AI 提示詞
→ 隨便複製一個元件的提示詞來看。「先確認、照原樣、要回報」的結構，套到其他任務也很好用。
讓 AI 做的網站不再陽春
AI 寫程式越來越方便，但「好不好看」往往才是決定別人願不願意多停留幾秒的關鍵。Lucian UX/UI Prompt 把 200 個精緻的動態元件免費送給大家，還附上讓 AI 不走樣的施工說明書，有在做網站的朋友真的可以去逛逛。目前元件只有英韓文版本，套用時記得請 AI 順便把文字換成繁體中文。
延伸閱讀：〈Claude Marketplace 開張！2,000 多個連接器與外掛集中一站〉
你最喜歡哪一個元件？或是你用 AI 做網站時最頭痛的是什麼？歡迎在下面留言跟阿正老師分享！
