高階 UI 設計與美學套件
一個致力於打造客製化、獨特且可存取的網頁介面，同時消除 AI 生成的陳腔濫調的設計框架。
在進行 UI 元件的樣式設計、審計或設計時，請在 references/<類別>/<主題>/SKILL.md 中找到對應的主題。
目錄與快速導覽
1. 反 AI 雜訊與視覺工藝 (references/anti-slop-and-craft/)
| 主題 | 子路徑 | 描述 |
|---|
| no-ai-design-slop | anti-slop-and-craft/no-ai-design-slop | 被動式品質閘門，防止通用的 AI 預設設計：紫色漸層、置中浮動卡片與千篇一律的佈局。 |
| audit-ai-design-slop | anti-slop-and-craft/audit-ai-design-slop | 診斷性審計，識別 AI 視覺缺陷、不一致的元素，並制定以移除為優先的清理計畫。 |
| build-awwwards-quality-sites | anti-slop-and-craft/build-awwwards-quality-sites | Awwwards 等級工藝：強烈的藝術指導、編輯式字體排版、GSAP 動畫以及真實的圖像。 |
| ui-ux-pro-max | anti-slop-and-craft/ui-ux-pro-max | 專業前端設計手冊：字體排版比例、有意的留白以及微互動。 |
| design-first-ui-prompting | anti-slop-and-craft/design-first-ui-prompting | 在撰寫前端程式碼之前，以規格驅動的方式進行美學與互動設計提示。 |
2. 樣式、令牌與品牌 (references/styling-and-tokens/)
| 主題 | 子路徑 | 描述 |
|---|
| brand-guidelines | styling-and-tokens/brand-guidelines | 強制執行字體排版規則、語調、標誌使用、色彩合規性以及間距標準。 |
| theme-factory | styling-and-tokens/theme-factory | 策展式視覺主題產生器，包含設計令牌、字體配對以及 CSS 變數。 |
| tailwindcss | styling-and-tokens/tailwindcss | Tailwind CSS 元件食譜、佈局網格、字體排版工具以及響應式模式。 |
| unsplash-asset-images | styling-and-tokens/unsplash-asset-images | 尋找高品質、真實的攝影資產、肖像照與背景圖。 |
3. 版面與頁面原型 (references/surfaces-and-pages/)
| 主題 | 子路徑 | 描述 |
|---|
| glass-dark-ui | surfaces-and-pages/glass-dark-ui | 霧面玻璃態暗色模式面板、偽元素漸層邊框，以及可讀的對比度。 |
| skeuomorphic-ui | surfaces-and-pages/skeuomorphic-ui | 觸覺式實體風格：分層漸層、堆疊的內/外陰影，以及浮雕細節。 |
| framed-grid-layout | surfaces-and-pages/framed-grid-layout | 精準的細線網格邊界、L 形角落支架，以及結構化的編輯區塊。 |
| landing-page | surfaces-and-pages/landing-page | 高轉換率的單一方案 SaaS 登陸頁面結構、敘事弧線以及文案撰寫。 |
| pricing-page | surfaces-and-pages/pricing-page | 高轉換率的定價表、方案比較矩陣、功能核取清單以及常見問題。 |