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 与专业 UI 的首要区别：极致的排版对比。

/* 主标题——占据屏幕 */
.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 正文）
主标题文本：始终使用 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; }
/* 主卡片跨越 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 间隙
主视觉区域：内容垂直居中，最小高度 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. 按钮：胶囊形状 + 情感化

/* 主要行动号召按钮 — 胶囊形状且有存在感 */
.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. 颜色令牌

: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 — 清新、现代、旅行

8. 微交互与动效

/* 过渡预设 */
--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 bounce，悬停时 translateY(-2px) + scale(1.03)
输入框：0.2s smooth，边框颜色变化 + 微弱的发光
绝对不要使用 transition: all 0.3s ease——这是 AI 的标志
激活/按下：scale(0.97)，持续时间 0.1s
页面加载：交错 fadeUp 动画（每个元素延迟 0.1s）

9. 视觉深度元素

添加以下元素以营造“设计感”：

/* 浮动渐变光晕（装饰性） */
.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;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,...");
  pointer-events: none;
  z-index: 9999;
}

规则：

装饰性光晕：位于内容下方（z-index: 0），使用大模糊半径（40-80px），低不透明度（0.2 及以下）
顶部导航栏：使用 backdrop-filter: blur(20px) 的半透明背景，并带 1px 底部边框
分隔线：使用渐变（linear-gradient(90deg, transparent, rgba(...), transparent)），不高于 1px，不透明度最大 0.1
滚动指示器：微妙的渐隐（使用 mask-image: linear-gradient(to bottom, black 80%, transparent)）

后续改进

创建 .cursorrules 文件，自动将此设计系统应用于所有 UI 生成任务。
添加高级图标配置：处理图标变体（描边宽度、大小、动画）。
扩展至更多框架：添加 Tailwind CSS、Chakra UI、shadcn/ui 的生成规则。
包含响应式设计模式：在生成时自动添加移动端优先的断点和自适应调整。
添加无障碍性：添加对比度检查、焦点样式和语义化 HTML 结构。

MLiang0920/mliang-ui-design-skill

mliang-ui-design-skill 是什么？

在你喜欢的 AI 中提问

文档

Web UI 代码生成器 — 高级 UI 代码生成器

本技能要解决的核心问题

使用时机

设计系统

1. 背景：漫射渐变氛围

2. 排版：电影级层级

3. 布局：呼吸感与 Bento

4. 卡片与表面：有灵魂的玻璃

5. 按钮：胶囊形状 + 情感化

6. 图标：仅限 SVG —— 绝对不要使用 Emoji

7. 颜色令牌

8. 微交互与动效

9. 视觉深度元素

后续改进

相关技能

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me