Web UI 程式碼生成器 — 高階 UI 程式碼產生器

產生看起來像 Dribbble 熱門作品或 Behance 精選專案的 UI 程式碼 — 而非一般的 AI 輸出。目標是產出與頂尖工作室資深產品設計師作品難以區分的程式碼。

此技能解決的核心問題

AI 生成的 UI 通常看起來「技術正確但缺乏靈魂」：

扁平、沒有生命的佈局，缺乏視覺情感
機械式的網格，沒有節奏感與呼吸空間
無法營造氛圍的通用顏色
沒有深度、光線與立體感
文字只是「放在那裡」，無法吸引注意力

此技能將輸出轉變為設計等級的視覺體驗。

使用時機

在以下情況必須調用此技能：

建立任何網頁、應用程式或登陸頁面
建立需要精緻化的 UI 元件
使用者期望獲得美觀、現代化的設計輸出
任何有視覺品質要求的 HTML/CSS/JS、React 或 Vue 任務

設計系統

1. 背景：擴散漸層氛圍

絕對不要使用純色平面背景。背景必須營造氛圍與情感。

技巧 — 分層擴散漸層：

/* 背景層 1：基礎漸層 */
body {
  background: #0a0a0f;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(255, 107, 107, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(78, 205, 196, 0.06) 0%, transparent 50%);
}

/* 淺色主題版本： */
body.light {
  background: #f8f6f4;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 60%, rgba(251, 191, 146, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(147, 197, 253, 0.08) 0%, transparent 40%);
}

規則：

使用 2-4 層不同位置與顏色的 radial-gradient 圖層
保持低不透明度（深色 0.06-0.15，淺色 0.08-0.15）
顏色應互補或相似 — 不要隨機挑選
將漸層定位在偏離中心與邊緣的位置以營造自然感
使用 ellipse 形狀而非 circle — 更為有機

背景的配色情緒板：

冷靜/科技：紫藍色 + 青綠色 (rgba(120,119,198) + rgba(78,205,196))
溫暖/創意：橙粉色 + 金色 (rgba(255,107,107) + rgba(255,193,68))
清新/自然：綠色 + 藍色 (rgba(52,211,153) + rgba(96,165,250))
高級/奢華：深紫色 + 玫瑰色 (rgba(139,92,246) + rgba(244,114,182))
中性/企業：石板藍 + 銀色 (rgba(100,116,139) + rgba(148,163,184))

2. 排版：電影級層次

業餘與專業 UI 之間的第一大差異：極端的排版對比。

/* Hero 標題 — 主宰整個畫面 */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

/* 區塊標題 — 錨定內容 */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* 副標題 / 卡片標題 */
.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* 正文 — 刻意使用較輕的字重 */
.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px; /* 閱讀行長 */
}

/* 小型標籤 */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

規則：

標題與正文的字體大小比例：至少 3:1（例如 48px 標題 / 16px 正文）
Hero 文字：一律使用 clamp() 實現流暢縮放
字距：標題使用負值（-0.02 至 -0.04em），標籤使用正值（+0.03 至 +0.06em）
行高：標題 1.0-1.1，正文 1.5-1.6
同一個畫面最多使用 2-3 種字體大小
字重對比：標題 700 / 正文 400 — 切勿到處使用 500

3. 佈局：呼吸與 Bento

呼吸規則：螢幕的 60% 應為空白空間。內容是珍貴的 — 用空氣將其環繞。

間距比例尺：

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-section: clamp(80px, 12vw, 160px);
}

Bento 網格（用於功能區塊、儀表板）：

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

/* 功能卡片佔 2 欄 */
.bento-item-wide { grid-column: span 2; }
/* Hero 卡片佔 2 欄 + 2 列 */
.bento-item-hero { grid-column: span 2; grid-row: span 2; }
/* 高卡片 */
.bento-item-tall { grid-row: span 2; }

規則：

區塊垂直內距：80-160px（使用 --space-section）
內容最大寬度：1120px（不是 1200 — 稍微緊湊一點感覺更有設計感）
頁面側邊內距：桌機 48-80px，手機 20-24px
卡片內距：32-48px（要寬敞，不要擁擠）
標題與正文之間的距離：16-24px
卡片區域之間的距離：16-20px 間隙
Hero 區塊：內容垂直居中，最小高度 80vh
絕不填滿整個寬度 — 保留足夠的邊距

4. 卡片與表面：有靈魂的玻璃

/* === 深色主題玻璃卡片 === */
.card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 頂部邊緣光反射 */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 50%, transparent);
}

/* 懸停效果：升起 + 發光 */
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* === 淺色主題玻璃卡片 === */
.card-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

規則：

邊框圓角：卡片使用 20-32px（要大 — 這是現代風格）
邊框：一律使用 rgba，絕不使用純色 — 不透明度最高 0.06-0.1
務必添加頂部邊緣高光（::before 線性漸層技巧）
懸停效果必須包含 translateY（升起）與增強的陰影
淺色卡片使用 inset 陰影實現內部發光
卡片內距：最小 32px，請勿低於此值

5. 按鈕：藥丸形 + 情感

/* 主要 CTA — 具有存在感的藥丸形 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.btn-primary:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* 幽靈 / 次要按鈕 — 細邊框藥丸形 */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: rgba(var(--text-rgb), 0.3);
}

規則：

所有按鈕使用 border-radius: 50px（藥丸形狀）
主要按鈕：實心填滿 + 匹配顏色的陰影光暈
次要按鈕：透明/幽靈 + 細邊框
內距：垂直 14-16px，水平 28-36px（要寬敞）
懸停：一律加上 translateY + scale 增強 + 光暈提升
作用中：scale(0.97) 搭配快速過渡（100ms）
切勿使用方形或微圓角按鈕 — 一律使用完整的藥丸形

6. 圖示：僅限 SVG — 禁止使用 Emoji

絕對規則：切勿使用 emoji（🎬🎮💼🎵）作為 UI 圖示。這是 AI 生成業餘程式碼的首要特徵。

選項 A：透過 CDN 使用 Lucide 圖示（優先採用）

Lucide 是最現代、輕量級、開源的圖示庫（1000+ 個圖示）。

<!-- 加入到 <head> -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- 在 HTML 中使用 data-lucide 屬性 -->
<i data-lucide="music" class="icon"></i>
<i data-lucide="play" class="icon"></i>
<i data-lucide="search" class="icon"></i>
<i data-lucide="heart" class="icon"></i>

<!-- 在 body 結尾處初始化 -->
<script>lucide.createIcons();</script>

/* 使用 CSS 設定圖示樣式 */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
}

常見圖示名稱：home, search, settings, user, heart, play, pause, skip-forward, skip-back, volume-2, music, headphones, mic, star, bookmark, share-2, download, arrow-left, arrow-right, chevron-down, plus, x, check, bell, mail, calendar, clock, globe, camera, image, film, book-open, briefcase, code, terminal, zap, trending-up, bar-chart-2, pie-chart, layers, grid, list, filter, edit-3, trash-2, eye, eye-off, lock, unlock, sun, moon, menu, more-horizontal, more-vertical, external-link, link, send, message-circle, phone, map-pin

選項 B：內嵌 SVG（當 CDN 不可用時）

直接撰寫最小的 SVG 路徑。保持圖示簡單（單一路徑，24x24 viewBox）：

<!-- 播放圖示 -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="5 3 19 12 5 21 5 3"/>
</svg>

<!-- 搜尋圖示 -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>

<!-- 首頁圖示 -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
</svg>

圖示樣式規則：

大小：標準 18-24px，緊湊 16px，功能圖示 28-32px
描邊寬度：1.5-2（越細 = 越精緻）
顏色：使用 currentColor，讓圖示繼承文字顏色
圖示容器：包裹在圓角 div 中，搭配淡色背景以突出重點

/* 圖示容器 — 為圖示提供「歸屬」 */
.icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

7. 色彩 Token

:root {
  /* 深色主題（預設） */
  --bg: #0a0a0f;
  --text-primary: #f0f0f3;
  --text-secondary: #8b8b99;
  --text-muted: #4a4a58;
  --accent: #6366f1;        /* 靛藍 — 可依專案變更 */
  --accent-rgb: 99, 102, 241;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-border: rgba(255, 255, 255, 0.06);
  --text-rgb: 240, 240, 243;
}

/* 淺色主題 */
:root.light {
  --bg: #f8f6f4;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b80;
  --text-muted: #a0a0b0;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --surface: rgba(255, 255, 255, 0.6);
  --surface-border: rgba(255, 255, 255, 0.7);
  --text-rgb: 26, 26, 46;
}

強調色選項（每個專案選一個**）：**

靛藍：#6366f1 — 科技、AI、SaaS
藍色：#3b82f6 — 信任、企業、金融
紫羅蘭：#8b5cf6 — 創意、高級
玫瑰色：#f43f5e — 大膽、活力、社交
琥珀色：#f59e0b — 溫暖、加密貨幣、金融科技
祖母綠：#10b981 — 健康、自然、成長
青色：#06b6d4 — 清新、現代、旅遊

7. 微互動與動畫

/* 過渡預設 */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

/* 卡片懸停 — 浮起 */
.card { transition: all 0.4s var(--ease-out-expo); }
.card:hover { transform: translateY(-4px); }

/* 按鈕懸停 — 彈跳縮放 */
.btn { transition: all 0.25s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px) scale(1.03); }

/* 微妙的入場動畫 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeUp 0.6s var(--ease-out-expo) forwards;
}

規則：

卡片：0.4s ease-out-expo，懸停時 translateY(-4px)
按鈕：0.25s 彈跳，translateY(-2px) + scale(1.03)
輸入框：0.2s 平滑，邊框顏色變化 + 微光暈
絕對不要使用 transition: all 0.3s ease — 這是 AI 的特徵
作用中/按壓：scale(0.97)，持續時間 0.1s
頁面載入：交錯 fadeUp 動畫（每個元素延遲 0.1s）

8. 視覺深度元素

添加以下元素以營造「設計過」的感覺：

/* 浮動漸層光暈（裝飾用） */
.orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* 噪點紋理疊加層（微妙的） */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  op

…

[內容因翻譯限制而截斷]

MLiang0920/mliang-ui-design-skill

mliang-ui-design-skill 是什麼？

在你喜歡的 AI 中提問

說明文件

Web UI 程式碼生成器 — 高階 UI 程式碼產生器

此技能解決的核心問題

使用時機

設計系統

1. 背景：擴散漸層氛圍

2. 排版：電影級層次

3. 佈局：呼吸與 Bento

4. 卡片與表面：有靈魂的玻璃

5. 按鈕：藥丸形 + 情感

6. 圖示：僅限 SVG — 禁止使用 Emoji

7. 色彩 Token

7. 微互動與動畫

8. 視覺深度元素

相關技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me