MLiang0920/mliang-ui-design-skill

Gerador de Código de UI Web — Gerador de Código UI Premium

Gere código de UI que parece um Dribbble ou Behance em destaque — NÃO um resultado genérico de IA. O objetivo é produzir código indistinguível do trabalho de um designer de produto sênior em estúdios de ponta.

Problema Central que Este Skill Resolve

UIs geradas por IA geralmente parecem "tecnicamente corretas, mas sem alma":

• Layouts planos e sem vida, sem emoção visual
• Grade mecânica sem ritmo ou espaço para respirar
• Cores genéricas que não criam atmosfera
• Sem profundidade, sem luz, sem dimensão
• Texto que apenas "está lá" sem chamar a atenção

Este skill transforma a saída em experiências visuais de nível de design.

Quando Usar

Este skill DEVE ser invocado quando:

• Construindo qualquer página web, aplicação ou landing page
• Criando componentes de UI que precisam de polimento
• O usuário espera um design bonito e moderno
• Qualquer tarefa HTML/CSS/JS, React ou Vue com expectativas de qualidade visual

---

O SISTEMA DE DESIGN

1. Fundo: Atmosfera com Gradiente Difuso

NUNCA use cores sólidas planas. Os fundos devem criar atmosfera e emoção.

Técnica — Gradientes Difusos em Camadas:

/* Camada de fundo 1: gradiente base */
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%);
}

/* Versão tema claro: */
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%);
}

Regras:

• Use 2 a 4 camadas de radial-gradient com posições e cores diferentes
• Mantenha a opacidade BAIXA (0.06-0.15 no escuro, 0.08-0.15 no claro)
• As cores devem ser complementares ou análogas — NÃO aleatórias
• Posicione os gradientes fora do centro e nas bordas para uma sensação natural
• Use a forma ellipse, não circle — mais orgânica

Paletas de humor para fundos:

• Calmo/Tech: roxo-azulado + verde-água (rgba(120,119,198) + rgba(78,205,196))
• Quente/Criativo: laranja-rosa + dourado (rgba(255,107,107) + rgba(255,193,68))
• Fresco/Natureza: verde + azul (rgba(52,211,153) + rgba(96,165,250))
• Premium/Luxo: roxo profundo + rosa (rgba(139,92,246) + rgba(244,114,182))
• Neutro/Corporativo: azul-ardósia + prata (rgba(100,116,139) + rgba(148,163,184))

---

2. Tipografia: Hierarquia Cinematográfica

A #1 diferença entre UI amadora e profissional: contraste tipográfico extremo.

/* Título hero — domina a tela */
.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);
}

/* Título de seção — ancora o conteúdo */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Subtítulo / título de card */
.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Texto do corpo — deliberadamente leve */
.body-text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 540px; /* medida de leitura */
}

/* Rótulo pequeno / tag */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

Regras:

• Proporção título/corpo: mínimo 3:1 (ex.: título 48px / corpo 16px)
• Texto hero: SEMPRE use clamp() para escalonamento fluido
• Espaçamento entre letras: NEGATIVO em títulos (-0.02 a -0.04em), POSITIVO em rótulos (+0.03 a +0.06em)
• Altura da linha: 1.0-1.1 para títulos, 1.5-1.6 para corpo
• No máximo, uma tela deve ter 2-3 tamanhos de fonte
• Contraste de peso: 700 títulos / 400 corpo — nunca use 500 para tudo

---

3. Layout: Respire & Bento

A Regra do Respiração: 60% da tela deve ser ESPAÇO VAZIO. O conteúdo é precioso — envolva-o com ar.

Escala de espaçamento:

: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);
}

Grade Bento (para seções de recursos, dashboards):

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

/* Card de recurso ocupa 2 colunas */
.bento-item-wide { grid-column: span 2; }
/* Card hero ocupa 2 colunas + 2 linhas */
.bento-item-hero { grid-column: span 2; grid-row: span 2; }
/* Card alto */
.bento-item-tall { grid-row: span 2; }

Regras:

• Padding vertical da seção: 80-160px (use --space-section)
• Largura máxima do conteúdo: 1120px (não 1200 — um pouco mais estreito parece mais projetado)
• Padding lateral da página: 48-80px desktop, 20-24px mobile
• Padding do card: 32-48px (generoso, não apertado)
• Entre o título e o texto do corpo: 16-24px
• Entre seções de cards: gap de 16-20px
• Seção hero: conteúdo verticalmente centralizado, altura mínima de 80vh
• NUNCA preencha a largura inteira — deixe margens generosas

---

4. Cards e Superfícies: Vidro com Alma

/* === Card de vidro tema escuro === */
.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);
}

/* Reflexo de luz na borda superior */
.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);
}

/* Hover: levantar + brilho */
.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 de vidro tema claro === */
.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);
}

Regras:

• Border-radius: 20-32px para cards (GRANDE — esta é a aparência moderna)
• Borda: sempre rgba, nunca cores sólidas — no máximo 0.06-0.1 de opacidade
• Sempre adicione destaque na borda superior (truque ::before linear-gradient)
• Hover deve incluir translateY (levantar) E sombra realçada
• Cards claros usam sombra inset para brilho interno
• Padding do card: mínimo 32px, nunca menos

---

5. Botões: Pílula + Emoção

/* CTA primário — pílula com presença */
.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;
}

/* Fantasma / secundário — pílula de contorno sutil */
.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);
}

Regras:

• TODOS os botões usam border-radius: 50px (formato pílula)
• Botão primário: preenchimento sólido + brilho de sombra na cor correspondente
• Botão secundário: transparente/fantasma com borda fina
• Padding: 14-16px vertical, 28-36px horizontal (generoso)
• Hover: SEMPRE translateY + boost de escala + aumento de brilho
• Ativo: scale(0.97) com transição rápida (100ms)
• Nunca use botões quadrados ou levemente arredondados — sempre pílula completa

---

6. Ícones: Somente SVG — NUNCA Emoji

REGRA ABSOLUTA: Nunca use emoji (🎬🎮💼🎵) como ícones de UI. Este é o #1 sinal de código amador gerado por IA.

Opção A: Ícones Lucide via CDN (PREFERIDA)

Lucide é a biblioteca de ícones de código aberto mais moderna e leve (mais de 1000 ícones).

<!-- Adicione ao <head> -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- Use em HTML com atributo 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>

<!-- Inicialize ao final do body -->
<script>lucide.createIcons();</script>

/* Estilize ícones com CSS */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
}

Nomes de ícones comuns: 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

Opção B: SVG Inline (quando CDN não estiver disponível)

Escreva caminhos SVG mínimos diretamente. Mantenha os ícones simples (caminho único, viewBox 24x24):

<!-- Ícone Play -->
<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>

<!-- Ícone Search -->
<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>

<!-- Ícone Home -->
<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>

Regras de estilo de ícones:

• Tamanho: 18-24px para padrão, 16px para compacto, 28-32px para ícones de recursos
• Largura do traço: 1.5-2 (mais fino = mais refinado)
• Cor: use currentColor para que os ícones herdem a cor do texto
• Container de ícone: envolva em um div arredondado com fundo sutil para ênfase

/* Container de ícone — dá um "lar" aos ícones */
.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. Tokens de Cor

:root {
  /* Tema escuro (padrão) */
  --bg: #0a0a0f;
  --text-primary: #f0f0f3;
  --text-secondary: #8b8b99;
  --text-muted: #4a4a58;
  --accent: #6366f1;        /* índigo — mude por projeto */
  --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;
}

/* Tema claro */
: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;
}

Opções de cor de destaque (escolha UMA por projeto):

• Índigo: #6366f1 — tecnologia, IA, SaaS
• Azul: #3b82f6 — confiança, corporativo, finanças
• Violeta: #8b5cf6 — criativo, premium
• Rosa: #f43f5e — ousado, energia, social
• Âmbar: #f59e0b — quente, cripto, fintech
• Esmeralda: #10b981 — saúde, natureza, crescimento
• Ciano: #06b6d4 — fresco, moderno, viagem

---

7. Microinterações e Movimento

/* Presets de transição */
--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);

/* Hover do card — flutuar para cima */
.card { transition: all 0.4s var(--ease-out-expo); }
.card:hover { transform: translateY(-4px); }

/* Hover do botão — escala com bounce */
.btn { transition: all 0.25s var(--ease-bounce); }
.btn:hover { transform: translateY(-2px) scale(1.03); }

/* Animação de entrada sutil */
@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;
}

Regras:

• Cards: 0.4s ease-out-expo, translateY(-4px) no hover
• Botões: 0.25s bounce, translateY(-2px) + scale(1.03)
• Inputs: 0.2s smooth, mudança de cor da borda + brilho sutil
• NUNCA use transition: all 0.3s ease — esta é a marca da IA
• Ativo/pressionado: scale(0.97), duração 0.1s
• Carregamento da página: animação fadeUp escalonada (atraso de 0.1s por elemento)

---

8. Elementos de Profundidade Visual

Adicione estes para criar a sensação "projetada":

/* Orbe de gradiente flutuante (decorativo) */
.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;
}

/* Sobreposição de textura de ruído (sutil) */
.noise-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* Linhas de grade sutis (decorativo) */
.grid-lines {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

---

EXEMPLO: Página Completa

Aqui está um exemplo mínimo de página de destino que incorpora todos os elementos do sistema de design:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gerador de UI Premium</title>
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    /* Reset & base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      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%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f0f0f3;
    }
    .hero {
      text-align: center;
      max-width: 800px;
      padding: 48px;
    }
    .hero-title {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
    }
    .hero-subtitle {
      font-size: 1.25rem;
      color: #8b8b99;
      line-height: 1.6;
      max-width: 540px;
      margin: 0 auto 40px;
    }
    .cta-group {
      display: flex;
      gap: 16px;
      justify-content: center;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      font-size: 0.9rem;
      font-weight: 500;
      color: #fff;
      background: #6366f1;
      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(99, 102, 241, 0.3);
    }
    .btn-primary:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 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: #f0f0f3;
      background: transparent;
      border: 1px solid rgba(240, 240, 243, 0.15);
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-ghost:hover {
      background: rgba(240, 240, 243, 0.05);
      border-color: rgba(240, 240, 243, 0.3);
    }
    .icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; }
  </style>
</head>
<body>
  <div class="hero">
    <h1 class="hero-title">Design de UI Premium</h1>
    <p class="hero-subtitle">Código bonito, gerado por IA. Com gradientes difusos, tipografia cinematográfica e microinterações suaves.</p>
    <div class="cta-group">
      <button class="btn-primary">
        <i data-lucide="zap" class="icon"></i>
        Começar Agora
      </button>
      <button class="btn-ghost">
        <i data-lucide="book-open" class="icon"></i>
        Saber Mais
      </button>
    </div>
  </div>
  <script>lucide.createIcons();</script>
</body>
</html>

---

Diretrizes de Implementação

Ao gerar código:

1. Sempre inclua o sistema de design completo (CSS custom properties, gradientes de fundo, tipografia)
2. Use o estilo de botão pílula para todas as ações
3. Implemente glassmorfismo em cards e superfícies
4. Nunca use emoji como ícones — apenas SVG (Lucide ou inline)
5. Adicione microinterações (hover, animações de entrada)
6. Mantenha o layout arejado com amplo espaçamento
7. Gere HTML/CSS/JS autônomo ou componentes React/Vue
8. Inclua temas claro e escuro quando apropriado

Lembre-se: O objetivo não é código funcional — é código bonito que funcione. Priorize a excelência visual em cada decisão.