前端美學提升
獨特的字體個性深色賽博龐克美學非對稱動態佈局精心編排的載入動畫沉浸式的氛圍營造
Featured by
Lynne Lau
Why we love this skill
厭倦了千篇一律的「AI slop」設計？此技能將幫助您擺脫平庸，透過獨特的排版、大膽的色彩、精妙的動效、創新的空間佈局和富有深度的背景，打造令人驚豔的前端介面。它提供了一套實用的美學指南，讓您的作品在眾多網站中脫穎而出，真正實現視覺上的突破。
指令
避免平庸的"AI slop"美學，創造令人驚喜的獨特前端。
## 五大核心維度
**1. 排版Typography**
- ❌ 禁止：Inter、Roboto、Arial、系統字體
- ✅ 選擇：獨特、有個性的字體
- ✅ 搭配：展示字體+ 正文字體，高對比
- ✅ 技巧：字重極端對比（100 vs 900），字號大跨距（3x+）
**2. 色彩Color & Theme**
- ✅ 統一美學，用CSS 變數維護
- ✅ 主導色+ 鮮明點綴色
- ❌ 避免：紫色漸層+ 白色背景
- ✅ 靈感：IDE 主題、文化美學
**3. 動效Motion**
- ✅ CSS 動畫優先（HTML）
- ✅ Motion 庫
- ✅ 聚焦高影響力：一次精心編排的頁面載入> 散亂的微交互
- ✅ 滾動觸發、懸停驚喜
**4. 空間佈局Spatial**
- ✅ 非對稱、重疊、對角線流動
- ✅ 打破網格、大膽留白OR 受控密集
**5. 背景細節Backgrounds**
- ✅ 創造氛圍與深度
- ✅ 漸層網格、雜訊、幾何圖案
- ✅ 分層透明、戲劇陰影、裝飾邊框
## 關鍵原則
- 每個設計都應不同，避免重複收斂
- 實現複雜度匹配美學願景
- 極繁需精心設計，極簡需克制精確
- 跳出思維定式，做出真正獨特的選擇
⚡ 一行精華版
獨特字體+ 大膽配色+ 精心動畫+ 突破版面配置+ 氛圍背景= 令人難忘的前端
拒絕：Inter/Roboto、紫色漸層白底、千篇一律佈局
📋 快速檢查清單
維度 檢查項
字體 是否避開Inter/Roboto？是否有特色搭配？
色彩 是否有統一主題？是否避免紫色漸層？
動畫 是否有精心編排的載入效果？
佈局 是否突破常規網格？
背景 是否創造深度和氛圍？
Related Skills
View allZara Zhang 前端投影片
告別傳統幻燈片，輕鬆創建豐富多彩、動畫效果出色的 HTML 演示文稿，無需任何依賴項。無需任何工具——只需直接在瀏覽器中運行，即可讓您的內容栩栩如生。
Webpage 四維品質評估
對YouMind 中的webpage 進行四維品質評估，產生詳細的評分報告和改進建議。
Job Intelligence Research｜JD 情報深度解碼
Stop guessing and start knowing. From hidden business risks to real office culture, we turn every JD into your personal 'insider playbook'—so you can interview like an owner and land the offeryou actually want."拒絕面試開盲盒！
前端美學提升
獨特的字體個性深色賽博龐克美學非對稱動態佈局精心編排的載入動畫沉浸式的氛圍營造
Featured by
Lynne Lau
Why we love this skill
厭倦了千篇一律的「AI slop」設計？此技能將幫助您擺脫平庸，透過獨特的排版、大膽的色彩、精妙的動效、創新的空間佈局和富有深度的背景，打造令人驚豔的前端介面。它提供了一套實用的美學指南，讓您的作品在眾多網站中脫穎而出，真正實現視覺上的突破。
指令
避免平庸的"AI slop"美學，創造令人驚喜的獨特前端。
## 五大核心維度
**1. 排版Typography**
- ❌ 禁止：Inter、Roboto、Arial、系統字體
- ✅ 選擇：獨特、有個性的字體
- ✅ 搭配：展示字體+ 正文字體，高對比
- ✅ 技巧：字重極端對比（100 vs 900），字號大跨距（3x+）
**2. 色彩Color & Theme**
- ✅ 統一美學，用CSS 變數維護
- ✅ 主導色+ 鮮明點綴色
- ❌ 避免：紫色漸層+ 白色背景
- ✅ 靈感：IDE 主題、文化美學
**3. 動效Motion**
- ✅ CSS 動畫優先（HTML）
- ✅ Motion 庫
- ✅ 聚焦高影響力：一次精心編排的頁面載入> 散亂的微交互
- ✅ 滾動觸發、懸停驚喜
**4. 空間佈局Spatial**
- ✅ 非對稱、重疊、對角線流動
- ✅ 打破網格、大膽留白OR 受控密集
**5. 背景細節Backgrounds**
- ✅ 創造氛圍與深度
- ✅ 漸層網格、雜訊、幾何圖案
- ✅ 分層透明、戲劇陰影、裝飾邊框
## 關鍵原則
- 每個設計都應不同，避免重複收斂
- 實現複雜度匹配美學願景
- 極繁需精心設計，極簡需克制精確
- 跳出思維定式，做出真正獨特的選擇
⚡ 一行精華版
獨特字體+ 大膽配色+ 精心動畫+ 突破版面配置+ 氛圍背景= 令人難忘的前端
拒絕：Inter/Roboto、紫色漸層白底、千篇一律佈局
📋 快速檢查清單
維度 檢查項
字體 是否避開Inter/Roboto？是否有特色搭配？
色彩 是否有統一主題？是否避免紫色漸層？
動畫 是否有精心編排的載入效果？
佈局 是否突破常規網格？
背景 是否創造深度和氛圍？
Related Skills
View allZara Zhang 前端投影片
告別傳統幻燈片，輕鬆創建豐富多彩、動畫效果出色的 HTML 演示文稿，無需任何依賴項。無需任何工具——只需直接在瀏覽器中運行，即可讓您的內容栩栩如生。
Webpage 四維品質評估
對YouMind 中的webpage 進行四維品質評估，產生詳細的評分報告和改進建議。
Job Intelligence Research｜JD 情報深度解碼
Stop guessing and start knowing. From hidden business risks to real office culture, we turn every JD into your personal 'insider playbook'—so you can interview like an owner and land the offeryou actually want."拒絕面試開盲盒！
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
