用 AI 做網頁，常見的問題是各個區塊看起來都完成了，放在一起卻不像同一個網站，字級總會忽大忽小、卡片間距不一致，按鈕和動效也各做各的，若是只要求 AI 「高級一點」，很難讓下一次修改更有方向。
AI Design Skills 把設計需求整理成可以重複使用的規則。它讓 AI 在安排內容與寫前端時，有一套共同依據。最適合先拿來試的，是目標明確的產品介紹頁或活動著陸頁，再用實際畫面檢查結果。
內容目錄
AI Design Skills 是什麼？
elayadesign/ai-design-skills 是一組給 AI 編碼工具讀取的設計指引，透過各自的 SKILL.md 描述工作流程與視覺規則。
截至 2026 年 11 月 2 日，這個專案提供兩個主要 Skill，應依交付物選擇。
- landing-page-design：以行銷著陸頁為主軸，涵蓋需求釐清、內容結構、行動按鈕與視覺規範。
- figma-designer：著重 Figma 檔案中的變數、文字樣式、自動排版與元件，讓設計稿有可維護的結構。
先分清楚：著陸頁、一般網站與產品功能
著陸頁通常圍繞一個受眾、一項主要提案與一個行動，例如預約展示、索取資料或加入候補名單。
企業首頁、內容網站與會員系統則可能同時服務多種需求，不能直接套用同一套頁面結構。
landing-page-design 的內容也把視覺規則延伸到元件、原型與其他網頁介面。
用途不只限於一張行銷頁，但主要內容流程仍偏向著陸頁。登入、付款、資料庫與後台業務邏輯，仍要另外規劃和實作。
它怎麼把模糊的美感要求變成工作流程？
先交代對誰說話，以及希望對方做什麼
開始前先確認產品、受眾、主要行動與可用素材，比一開始挑字體和動畫更重要。
假設是讓企業客戶預約展示，首屏就應該先說清楚適用對象、能解決的問題，以及預約後會得到什麼。
這也是使用時最值得保留的順序：先看內容是否合理，再看視覺是否一致。
若產品利益、價格或證據尚未確定，先標成待補，不讓 AI 自行編出客戶評語與成效數字。
讓字體、間距與互動遵循同一套規則
Skill 對字級、間距、圓角、圖示與動效都有具體約束，也要求補上互動狀態。
但這些規則帶有作者的設計取向，若品牌已有字體、色彩與元件規範，應在需求中明確說明保留範圍。
做完一段就檢查，留下可追溯的修改
實作時可以先完成首屏，確認文案、視覺與主要按鈕後，再往下做其他區塊。這種做法也適合搭配AI 做網站的前端工作流，把內容、版面與動效逐步收斂。
Figma Designer 適合什麼情況？
如果交付物是 Figma 設計稿，figma-designer 比較關心檔案本身：既有樣式是否重用、元件是否完整、間距和色彩有沒有綁定變數，以及淺色與深色模式能否一致維護。
它的要求包含 Auto Layout、文字樣式、元件狀態，以及把設計基礎整理在畫布上。若後續需要交給其他人修改，這些結構會比只交付一張看起來完成的圖片更有幫助。
怎麼安裝 AI Design Skills？
專案使用 Vercel Skills CLI。目前 CLI 要求 Node.js 22.20 或更新版本。先在預計使用的專案目錄開啟終端，確認環境，再查看可用的 Skill：
node --version
npm --version
npx skills add elayadesign/ai-design-skills --list做著陸頁時，安裝這一個即可：
npx skills add elayadesign/ai-design-skills --skill landing-page-design若工作重點在 Figma，則選擇另一個：
npx skills add elayadesign/ai-design-skills --skill figma-designer依提示選擇你正在使用的 Agent。CLI 預設裝在目前專案，加上 -g 才是全域範圍。完成後可列出已安裝項目：
npx skills list接著在支援 Skill 的工具中開啟專案，於需求裡明確寫出 Skill 名稱。若工具沒有讀到規則，先檢查安裝目錄與載入方式。本篇已實際執行 --list，確認能列出上述兩個 Skill，未把這項檢查當成所有 Agent 的安裝或產出測試。
可複製的需求範例
安裝只是準備工作。真正開始使用時，要把產品資訊與驗收條件一起交給 AI。下面是一份示範需求，可依自己的品牌改寫：
請使用 landing-page-design，為台灣的小型甜點工作室製作婚禮試吃預約頁。受眾是正在準備婚禮的新人，主要行動是預約試吃。我會提供品牌標誌、蛋糕照片、可預約時段與實際價格。保留既有品牌配色，中文字體請先提出可讀性建議。先交付頁面大綱、首屏文案與視覺方向，確認後再逐段實作。尚未提供的評語、客戶數與成效請標示待補。完成後檢查手機排版、按鈕連結、表單狀態與減少動態效果的設定。
這份需求的重點，是讓產品、受眾、素材與交付順序都能被核對。若你已經有網站，只想降低模板感，也可以參考既有網站的設計改善方法，先找出最明顯的問題，再決定要套用哪些規則。
怎麼知道它真的有幫助？
可以用同一份需求做小範圍試作，保留修改前後的畫面與程式碼。比較時固定素材與功能範圍，觀察字級和間距是否一致、重要內容是否容易找到，以及需要多少次人工修正。這是建議的驗收方式，本篇沒有提供量化的品質或轉換率提升實測。
- 內容：讀者能否快速知道產品是什麼、適合誰，以及下一步要做什麼。
- 視覺：相同元件是否一致，手機上是否仍可閱讀與操作。
- 互動：按鈕是否有目的地，表單是否有必要的錯誤和完成狀態。
- 維護：修改一種樣式時，其他相同元件是否能一起更新。
若你要把設計方向用在 WordPress，還需要對應到主題、區塊編輯器或前端程式碼，可以搭配AI 輔助 WordPress 外觀設計的做法，先確認哪些部分能由既有元件完成，再決定是否客製。
先做一頁目標清楚的頁面
AI Design Skills 的價值，是把需求與設計規則變成可以重複使用的工作方式，可以先選一個有真實素材、目標明確的頁面，完成首屏並實際操作檢查，再逐步擴大範圍。當你能說清楚哪裡一致、哪裡難用，下一次修改就會更有依據。
常見問題
landing-page-design 與 figma-designer 怎麼選？
要製作著陸頁與前端內容時，先看 landing-page-design。要在 Figma 中建立可編輯、有變數和元件的設計稿，則看 figma-designer。
已有品牌字體與配色，還能使用嗎？
可以，應在需求中明確指出要保留的品牌規範，並檢查規則是否與現有設計系統衝突，再調整適用範圍。
用了這套規則就能提高轉換率嗎？
不能直接保證。視覺一致只是其中一環，還要看產品提案、流量、內容與使用流程，轉換效果需要用實際資料驗證。