AI設計網站永遠有陣罐頭味？拆解大熱開源網頁設計skills：鎖死排版視覺、呼吸感動態展示！

如果你最近有用過 Cursor、Claude Code或 Codex 等編程助手寫網頁，你很大機會遇過一個非常尷尬的場景：當你滿心期待地輸入「幫我整一個現代、高階、SaaS 風格嘅 Landing Page」，三十秒後 AI 確實吐出了一整套能跑的代碼，但畫面映入眼簾時，卻總是散發著一股揮之不去的廉價感。滿屏千篇一律的深紫色漸變背景、被全網用爛的 Inter 字體、各不協調的卡片圓角，再加上「Revolutionize your workflow」、「Supercharge your productivity」這種空洞無物的公關八股文，代碼確實能跑，但毫無品味可言，並充滿「罐頭味」。那麼，應如何才能把網站設計升級至「更有人味」？

為協助廣大網民解決上述問題，杜拜資深產品設計師Elaya近日即將其網頁設計Skills開源，其專案 ai-design-skills 在X及github上發佈後便馬上爆紅，引起過萬位網民讚好。它既不是龐大沉重的軟件，也不是收費外掛，而是一套專為 AI 編程智能體量身訂造的頂級設計法則規則庫。只要將這套規則文件放進開發工具的設定目錄中，原本審美平庸的 AI 助手瞬間就能化身為身經百戰、美感挑剔的資深藝術總監與動態設計師。

點解平時叫 AI 寫前端總是飄出「罐頭味」？

要理解這套開源規則庫的精妙之處，首先要認清大語言模型的運作本質。AI 的生成邏輯基於統計概率，當你向它提出「設計一個網頁」這種寬泛要求時，它給出的一定是整個互聯網上千萬個開源網頁的公約數，而互聯網的公約數往往就等同於平庸。許多開發者誤以為要把網站做好看，必須依賴專業設計師重新在 Figma 畫圖，但事實證明 AI 欠缺的從來不是寫 CSS 代碼的能力，而是缺乏一套清晰、嚴苛且不可妥協的工程約束體系。這套專案的核心價值，就是將極致的設計美學拆解為兩份嚴謹的規則文件，分別負責架構高轉換率網頁與將靜態畫面轉化為動態展示，用純代碼規則徹底管住 AI 的隨意發揮。

解構 landing-page-design：強制戒除 AI 壞習慣，用數學公式鎖死轉換率

在落地頁設計規則中，系統對 AI 展開了一場嚴格的紀律管束，直接打破了多數生成式網頁的通病。首先在文案層面，規則嚴禁 AI 使用諸如「革新」、「超強賦能」或「世界級」等虛浮字眼，強制要求以具體成果與數字取代空泛形容詞，例如必須將「為你節省時間」明確改寫為「將你每週的報告時間由四小時縮短至十五分鐘」，並強制整頁只圍繞單一受眾、單一承諾與單一核心行動展開。在排版視覺上，規則徹底封殺了被濫用的傳統字型，強制轉用更具現代高階質感的 Geist 或 Manrope，並嚴格規定所有字級必須精確扣連 Tailwind 的標準尺寸階梯，嚴禁出現隨意的像素值，甚至規定文字結尾絕不准留下單獨成行的孤字。

更令人叫絕的是介面幾何的精確規範。許多網頁之所以看起來充滿山寨感，往往是因為按鈕圓角與外層卡片邊框互相衝突，這份規則直接寫入數學公式，強制要求內部元素的圓角半徑必須等於外層圓角減去兩者間距，再配合嚴格禁絕背景漸變色、鎖死深色調色盤等硬性限制，將資深 UI 設計師微調界面的專業直覺，硬生生轉化為 AI 的底層本能。

解構 design-to-motion：一張靜態截圖如何變成「識呼吸」的電影級展示？

如果說落地頁規則是打造穩固骨架，那麼動態設計規則則是賦予靜態介面靈魂的神來之筆。傳統上如果想把 Figma 設計稿或產品截圖做成動態宣傳片，往往需要動用專業後期軟件逐幀拉時間軸，耗時極長。這份規則提出了一套近乎完美的工程工作流，讓 AI 將靜態畫面完全清空至初始狀態，隨後以柔和微動態入場，接著讓每個視覺元件如實演繹自身功能，最後達成無縫循環。

在這個過程中，規則確立了數條極為高級的動態原則。例如背後的攝影底圖或光影紋理被視為神聖不可侵犯，無論前景介面如何彈跳加載，背景永遠紋絲不動，以此奠定厚重沉浸的視覺基底。同時，介面載入完成後絕不能呆滯靜止，折線圖的發光指針必須緩緩掠過曲線並連動數據跳轉，即時通知卡片要有層次地推擠更新，AI 輸入框則要展現逐字輸入與游標閃爍。更關鍵的是在導出環節，系統徹底唾棄了容易掉幀與產生接縫的實時螢幕錄影，轉而在無頭瀏覽器中植入自定義的確定性虛擬時鐘，以每秒六十幀的頻率逐張截圖，再調用底層工具編碼輸出，確保導出的高畫質影片與動圖在循環播放時達到天衣無縫的零卡頓銜接。

拆解官方案例：那些驚艷眼球的「神級視覺」究竟點樣煉成？

在官方釋出的成果展示中，這套規則體系展現出了令人驚嘆的商業質感。在展示深海主題的行銷頁面中，AI 並沒有畫出平庸的通用插圖，而是將破曉燈塔投射出的強烈光束、波濤暗湧的黑夜人群與銳利的白色文字渾然融合，展現出磅礡的史詩級光影張力。在助眠產品頁面上，深沉的暗紅底色襯托著頭部燃燒著烈焰霓虹的沉睡者人像，搭配浮動的即時生理數據膠囊與精緻按鈕，把健康科技產品的氛圍感直接拉滿。

而當介紹到複雜的智能體控制系統時，畫面中央探出一隻充滿超現實隱喻的木偶牽引巨手，以精細的引線懸吊操控著一個小巧的方塊機器人，結合左側井然有序的高反差數據排版，徹底擺脫了傳統後台系統枯燥死板的陳列感。在金融儀表盤與訂閱定價頁面中，無論是以真實藍天交通燈作為背景所襯托出的財務支出圖表，還是隨著滑桿實時跳動的音訊頻譜波形，都具備了極度成熟的互動節奏。甚至就連最容易被草率對待的報錯頁面，AI 也被引導繪製出太空人在星海間抱著筆記本電腦漂浮、身旁伴隨盛開巨樹的浪漫畫面，配上一句路徑已逃離地球引力的幽默文案，巧妙地將用戶迷路時的挫敗轉化為品牌好感。