前端審美提升
指令
避免平庸的"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？是否有特色搭配？
色彩 是否有統一主題？是否避免紫色漸層？
動畫 是否有精心編排的載入效果？
佈局 是否突破常規網格？
背景 是否創造深度和氛圍？
描述
推薦自
nene@YouMind
為什麼我們推薦這個技能
厭倦了千篇一律的「AI slop」設計？此技能將助您擺脫平庸，透過獨特的排版、大膽的色彩、精妙的動效、創新的空間佈局和富有深度的背景，打造令人驚豔的前端介面。它提供了一套實用的美學指南，讓您的作品在眾多網站中脫穎而出，真正實現視覺上的突破。
獨特的字體個性 深色賽博朋克美學 非對稱動態佈局 精心編排的載入動畫 沉浸式的氛圍營造
相關技能
查看全部
網頁可探索式解說頁面建置器
報告是解釋。頁面讓人們自己去發掘。 YouMind 已經能建立網頁。Explorable Explainer 決定要建立什麼——它把一份研究、一份資料集或一個主題，變成單一互動頁面，承襲新聞圖表與可探索式解說的傳統：捲動驅動的敘事、真實的圖表、可以操作的控件、可以查證的來源。 它先規劃，再寫程式。你首先批准建置計畫：頁面要回答的那一個問題、那個揭示時刻——讀者應該感到「哦！」的瞬間——五到八個區段的捲動主軸、兩到四個互動（每個都說明讀者能從操作中學到什麼），以及一份資料契約，列出每個數字及其來源。 接著它建立一個單一、自包含的 HTML 檔案，無需建置步驟。語意化標記。所有數字集中在檔案頂部一個可編輯的 DATA 常數。捲動揭示在手機上不會出錯。每個控件都是真正可用鍵盤操作的表單元素，並以即時文字描述目前值。 無障礙是內建而非事後添加：4.5:1 對比度、可見的焦點框、處處有替代文字、不單靠顏色傳達意義、尊重減少動畫設定、從 360px 起皆為響應式。 交付之前，它會執行五點自我審查並誠實回報結果：揭示點是否真的奏效、關閉 JavaScript 後頁面是否仍可閱讀、Tab 順序是否合理、每個數字是否可追溯、是否有讀者會想停止的動畫。 它有兩條絕不打破的規則：絕不為了讓圖表好看而編造資料，而且當你的數字與草稿互相矛盾時，它會直接告訴你。 適合研究人員、分析師、記者、教育工作者、獨立創業者與顧問——他們希望自己的作品被探索，而不是被匆匆略過。
網頁柔光日間 浮世風格網頁
柔光日間風格的網頁設計系統：淡天藍畫布（#ebf5ff）、字重固定 500 的超大展示字（響應式最高 148px）、32px 圓角卡片 + 9999px 藥丸、近黑 #181d27 實心 CTA、粉彩色塊與漂浮 3D 黏土質插畫。深度只靠畫布到卡片的色階位移，內容卡片零陰影。適用於「柔光日間風格」「3D 插畫登陸頁」「淡藍畫布」「圓角卡片風」「SaaS 官網」「Linear/Framer 風格」等需求，內建無障礙與響應式約束。
網頁Fashion Creative Design 風格網頁
時尚編輯式海報風格的網頁設計系統：暖奶油紙質畫布（#fffef7）、300 字重超大標題（64–84px）、全出血攝影、零陰影、卡片直角 + 按鈕 1440px 藥丸圓角。 適用於「時尚設計風格」「雜誌排版」「海報風」「藝術畫冊網頁」「工作室作品集」「畫廊頁面」等需求，可將任意內容改寫為高級時裝編輯風頁面。
前端審美提升
指令
避免平庸的"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？是否有特色搭配？
色彩 是否有統一主題？是否避免紫色漸層？
動畫 是否有精心編排的載入效果？
佈局 是否突破常規網格？
背景 是否創造深度和氛圍？
描述
推薦自
nene@YouMind
為什麼我們推薦這個技能
厭倦了千篇一律的「AI slop」設計？此技能將助您擺脫平庸，透過獨特的排版、大膽的色彩、精妙的動效、創新的空間佈局和富有深度的背景，打造令人驚豔的前端介面。它提供了一套實用的美學指南，讓您的作品在眾多網站中脫穎而出，真正實現視覺上的突破。
獨特的字體個性 深色賽博朋克美學 非對稱動態佈局 精心編排的載入動畫 沉浸式的氛圍營造
相關技能
查看全部網頁可探索式解說頁面建置器
報告是解釋。頁面讓人們自己去發掘。 YouMind 已經能建立網頁。Explorable Explainer 決定要建立什麼——它把一份研究、一份資料集或一個主題，變成單一互動頁面，承襲新聞圖表與可探索式解說的傳統：捲動驅動的敘事、真實的圖表、可以操作的控件、可以查證的來源。 它先規劃，再寫程式。你首先批准建置計畫：頁面要回答的那一個問題、那個揭示時刻——讀者應該感到「哦！」的瞬間——五到八個區段的捲動主軸、兩到四個互動（每個都說明讀者能從操作中學到什麼），以及一份資料契約，列出每個數字及其來源。 接著它建立一個單一、自包含的 HTML 檔案，無需建置步驟。語意化標記。所有數字集中在檔案頂部一個可編輯的 DATA 常數。捲動揭示在手機上不會出錯。每個控件都是真正可用鍵盤操作的表單元素，並以即時文字描述目前值。 無障礙是內建而非事後添加：4.5:1 對比度、可見的焦點框、處處有替代文字、不單靠顏色傳達意義、尊重減少動畫設定、從 360px 起皆為響應式。 交付之前，它會執行五點自我審查並誠實回報結果：揭示點是否真的奏效、關閉 JavaScript 後頁面是否仍可閱讀、Tab 順序是否合理、每個數字是否可追溯、是否有讀者會想停止的動畫。 它有兩條絕不打破的規則：絕不為了讓圖表好看而編造資料，而且當你的數字與草稿互相矛盾時，它會直接告訴你。 適合研究人員、分析師、記者、教育工作者、獨立創業者與顧問——他們希望自己的作品被探索，而不是被匆匆略過。
網頁柔光日間 浮世風格網頁
柔光日間風格的網頁設計系統：淡天藍畫布（#ebf5ff）、字重固定 500 的超大展示字（響應式最高 148px）、32px 圓角卡片 + 9999px 藥丸、近黑 #181d27 實心 CTA、粉彩色塊與漂浮 3D 黏土質插畫。深度只靠畫布到卡片的色階位移，內容卡片零陰影。適用於「柔光日間風格」「3D 插畫登陸頁」「淡藍畫布」「圓角卡片風」「SaaS 官網」「Linear/Framer 風格」等需求，內建無障礙與響應式約束。
網頁Fashion Creative Design 風格網頁
時尚編輯式海報風格的網頁設計系統：暖奶油紙質畫布（#fffef7）、300 字重超大標題（64–84px）、全出血攝影、零陰影、卡片直角 + 按鈕 1440px 藥丸圓角。 適用於「時尚設計風格」「雜誌排版」「海報風」「藝術畫冊網頁」「工作室作品集」「畫廊頁面」等需求，可將任意內容改寫為高級時裝編輯風頁面。
發現下一個適合你的技能
繼續探索更多精選 AI 技能，用於研究、創作和日常工作。