star-cloud/.agents/skills/ui-minimal-luxury/SKILL.md

name, description

name	description
極簡奢華風 UI 實作規範 (Minimal Luxury UI)	定義 Star Cloud 管理後台的「極簡奢華風」設計規範，包含 CSS Tokens、常用組件樣式、動畫效果與互動模式，確保全站 15+ 模組的視覺一致性。

極簡奢華風 UI 實作規範 (Minimal Luxury UI)

本文件定義了 Star Cloud 專案的核心視覺語言。所有新頁面與組件開發必須嚴格遵守此規範。

1. 核心設計令牌 (Design Tokens)

色彩系統 (CSS Variables)

位於 resources/css/app.css：

• --color-luxury-deep: #0f172a (深色背景)
• --color-luxury-card: #1e293b (卡片背景)
• --color-accent: #06b6d4 (青色點綴，適用於按鈕與標示)

字體 (Typography)

• 內文字體: Plus Jakarta Sans
• 標題/顯示字體: Outfit
• 特性: 標題需帶有 letter-spacing: -0.02em 以增強精密感。

2. 核心組件樣式

豪華卡片 (Luxury Card)

<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
    <!-- 內容 -->
</div>

• 特效: 懸停時帶有 Y 軸平移與深度投影。

側邊導覽項 (Luxury Nav Item)

<a href="#" class="luxury-nav-item active">
    <i class="lucide-icon"></i>
    <span>節點名稱</span>
</a>

• 啟用狀態: 左側帶有圓角直條指示器，並輔以青色發光陰影。

按鈕組件 (Buttons)

• Primary: .btn-luxury-primary (青色漸層，適用於建立、儲存)
• Secondary: .btn-luxury-secondary (白色/深色背景，帶邊框，適用於編輯、篩選)
• Ghost: .btn-luxury-ghost (無背景，適用於取消、查看更多)

<!-- Primary -->
<button class="btn-luxury-primary">
    <i class="lucide-plus size-4"></i>
    <span>建立新機台</span>
</button>

<!-- Ghost -->
<button class="btn-luxury-ghost">取消</button>

3. 動畫與互動

進場動畫

• .animate-luxury-in: 所有的主內容區域或卡片在頁面載入時，應具備由下而上的淡入效果。

Alpine.js 互動模式 (以時間選擇器為例)

• 互動原則: 點擊觸發下拉選單時，必須使用 x-transition 且帶有 scale 偏移。
• 樣式要求: 選單背景需使用玻璃擬態 (Glassmorphism) 或帶透明度的深色背景。

4. UI 檢查清單 (AI 助手執行前必讀)

• 是否使用了正確的 rounded-2xl (或更圓) 的導角？
• 所有的圖示是否一致使用 lucide-react 風格？
• 卡片是否有適當的間距 (通常為 p-6)？
• 文字色階是否符合：標題 (slate-900/white)、副標 (slate-500/slate-400)？

5. 開發注意事項 (Important Notes)

技術限制備忘

• CSS 編譯: 複雜的 box-shadow 或漸層應直接寫原生 CSS 屬性，避免在 @apply 中使用帶空格的數值導致編譯失敗（詳見 KI: tailwind-luxury-ui-patterns）。
• 深色模式: 互動式按鈕在深色模式下必須強化文字亮度（dark:text-white），並輔以青色發光效果。

即時動態呈現規範

• 格式: #機台編號 動作內容 (例如 #V-001 執行出貨)。
• 脈絡: 必須呈現相對時間與機台位置。

---

Important

開發新功能前，必須確認 app.css 中的 .btn-luxury-* 系列組件是否滿足需求。 嚴禁在 Blade 中寫入大量重複的 bg-indigo-600 等舊式類別。

---

Tip

當遇到未定義的 UI 區塊時，優先參考 admin.dashboard.blade.php 的卡片與即時動態實作方式進行衍生。