設計超越千篇一律的 AI 美學
大多數 AI 著陸頁看起來都一模一樣——圓角、柔和漸層，以及相同的通用插圖。每次我瀏覽新的工具時，看到的總是同樣的 SaaS 藍色調與友善但令人記不住的視覺。這讓我覺得，我們正在失去過去高效能工程工具原本具備的銳利感。
當我著手為 EigentFlow——一個虛構的 AI 驅動專案管理套件——打造介面時，我想要的是不一樣的東西。我希望它像一個高階 IDE 或以終端機為基礎的指揮中心，同時又具備現代網頁體驗的精緻度。我把這種美學稱為神經工業風（Neural Industrial）。
我運用 Eigent 的前端設計技能，將這個抽象的設計理念與可投入生產的實作之間建立橋樑。以下是我如何完成它的。
定義視覺識別
第一步是為設計系統設定限制。我不想要一般的淺色模式；我想要的是深邃的黑曜石黑背景，搭配高對比的青色強調色，呈現出像發光電路般的感覺。
我先建立了一套 CSS 變數系統，讓它能驅動整個專案。我們選定了深色調色盤（#0A0A0B）與鮮明的「Neural Cyan」（#00F5FF）。在排版方面，我把襯線字體用在標題上，營造精英感與編輯風格，再搭配等寬字體呈現技術細節。
讓 Agent 接收提示詞
我沒有自己手寫樣板程式，而是給 Eigent 一個非常精準的提示詞，其中包含設計理念與所需的互動模組。
使用前端設計技能，為 EigentFlow 設計並打造一個可投入生產的著陸頁。採用神經工業風主題，包含深色調色盤、青色強調色，以及 Playfair Display 與 JetBrains Mono 字體的混搭。加入一個互動式展示模組，讓使用者可以操作 Contextual Density。
Eigent 立刻開始規劃架構，優先採用單一檔案的方式，確保整個體驗是獨立封裝且容易部署的。
用紋理創造層次
深色模式設計的一大問題，是它們容易顯得扁平。為了解決這點，我讓 Eigent 實作了顆粒覆蓋層與放射狀網格背景。
顆粒覆蓋層是一種固定在視窗上的 SVG 雜訊紋理，並搭配低不透明度——它讓畫面有更具物理感、可觸感的質地。其下方則是一個動態網格背景，並以放射狀漸層進行遮罩，因此線條會朝畫面邊緣逐漸淡出，把使用者的視線引向中央。這些細微處理正是「樣板」與自訂設計之間的差異所在。
打造 Hero 體驗
Hero 區塊不能只顯示標題；它還必須建立整個頁面的節奏。我使用錯位的捲動顯示動畫，讓各個元素逐一登場。
Eigent 用 Vanilla JS 寫了一段自訂的 intersection observer 腳本來處理這件事。當你向下捲動時，首先出現的是「Neural Engine Status」標籤，接著是斜體標題與行動呼籲按鈕。這種刻意安排的節奏，讓工具顯得強大且有意圖，而不只是靜態頁面。
建立互動式引擎展示
著陸頁的核心是「Autonomous Task Architecture」展示。我希望使用者能夠「互動」AI 的內部狀態。
我們打造了一個模組，內含一個標示為「Contextual Density」的滑桿。當使用者移動滑桿時，底層 JavaScript 會觸發視覺更新：一個由 CSS 動畫驅動的神經圓環會擴張與收縮，而背景中的模擬資料流會加速。這不只是好看的效果——它以文字無法傳達的方式，展現了 AI 引擎的「流動性」。
針對效能進行最佳化
最後，我確保整個程式碼庫都經過最佳化。即使加入了自訂動畫與大量字型使用，最終的 index.html 檔案仍然輕量且反應迅速。
透過使用 CSS 變數來管理所有設計 token，未來若要調整品牌色彩會非常容易。Eigent 甚至透過 CDN 整合了 Lucide icons，將資產體積維持在最小，同時確保在各種裝置尺寸上都能呈現高品質的向量視覺。
這件事為何重要
這個流程展示了 Eigent 運作方式中的一個根本重點：AI 智能代理的真正力量，不只是產生程式碼——而是能夠理解高層次的美學方向，並將其轉譯為一致的技術架構。
我不需要在最初的提示詞中指定每一個 hex 色碼或動畫時長。因為前端設計技能能理解設計原則，它就能在我對神經工業風主題的願景與實際 CSS 實作之間補足空白。
下一步可以嘗試什麼
使用相同的神經工業風設計系統，建立一個深色主題的分析儀表板。 為 EigentFlow API 製作一個文件頁面，並與這個著陸頁的字體與色彩配置保持一致。 新增一個「終端機模式」切換，將網站中的襯線標題全面改為 JetBrains Mono。
這些做法都能沿用相同的設計 token 與美學邏輯——不需要額外設定。
提升成效的建議
- 使用以設計為導向的形容詞。 像 Neural Industrial、Obsidian 或 Cinematic 這類詞彙，比起 nice 或 modern 更能幫助 Eigent 縮小美學範圍。
- 明確指定字體搭配。 如果你想要特定氛圍，請告訴 Eigent 要混用哪些字體（例如：標題用襯線字體、資料用等寬字體）。
- 特別要求層次感。 如果設計看起來太平面，請要求 Eigent 加入顆粒紋理、放射狀遮罩或細微陰影。
- 單一檔案交付。 要求以單一檔案方案交付（HTML/CSS/JS 合併在一起），會更容易立即檢視與測試整個 UI。
