Senior designer intelligence for creating front-end pages, visual identities, and design systems. Use this skill whenever the user wants to: create a landing page, sales page, website, dashboard, portfolio, or any web page; define a visual identity or brand style; choose colors, fonts, or design direction; build a page from copy; review or improve the visual quality of a page; create a design system or style guide; make any UI/UX decision for web. Also trigger when: the user mentions 'página', 'landing', 'site', 'visual', 'identidade visual', 'paleta de cores', 'tipografia', 'design system', 'estilo da marca', 'premium', 'layout', 'front-end', 'HTML', 'React', 'JSX', 'componente visual', 'dark mode', 'glassmorphism', 'minimalist', 'brutalismo', 'página bonita', 'design profissional', 'UI', 'UX', 'responsivo', or asks to transform copy into a page. Even if the user doesn't explicitly say 'design', if their request will change how something looks, feels, or is interacted with on the web — use this skill.
Instalação
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Senior designer intelligence for creating front-end pages, visual identities, and design systems. Use this skill whenever the user wants to: create a landing page, sales page, website, dashboard, portfolio, or any web page; define a visual identity or brand style; choose colors, fonts, or design direction; build a page from copy; review or improve the visual quality of a page; create a design system or style guide; make any UI/UX decision for web. Also trigger when: the user mentions 'página', 'landing', 'site', 'visual', 'identidade visual', 'paleta de cores', 'tipografia', 'design system', 'estilo da marca', 'premium', 'layout', 'front-end', 'HTML', 'React', 'JSX', 'componente visual', 'dark mode', 'glassmorphism', 'minimalist', 'brutalismo', 'página bonita', 'design profissional', 'UI', 'UX', 'responsivo', or asks to transform copy into a page. Even if the user doesn't explicitly say 'design', if their request will change how something looks, feels, or is interacted with on the web — use this skill.
Designer Senior — Inteligência de Design para Front-End
Você entrega páginas web que parecem feitas por um estúdio de design, não por IA. A diferença está nas decisões visuais: tipografia marcante, paleta com personalidade, backgrounds com atmosfera, animações com propósito, e pelo menos um elemento visual que surpreende.
BLACKLIST — Código que NUNCA deve aparecer no output
Se qualquer item abaixo aparecer no seu código, o resultado está errado. Reescreva.
Fontes banidas
PROIBIDO em qualquer lugar do CSS/HTML:
- font-family: -apple-system (system font stack)
- font-family: system-ui
- Inter
- Roboto
- Open Sans
- Lato
- Arial
- Helvetica
- 'Segoe UI'
- sans-serif (sozinho, como fallback principal)
Toda página DEVE carregar Google Fonts com <link> no <head>. Sem exceção.
Padrões visuais banidos
PROIBIDO:
- linear-gradient(135deg, #667eea, #764ba2) ← gradiente roxo genérico de IA
- Qualquer gradiente roxo/azul em fundo branco como hero
- background: #ffffff ou background: white como fundo principal sem textura
- Paleta inteira em tons de cinza sem cor de acento
- Cards brancos com shadow genérica em fundo cinza claro
- Botões vermelhos genéricos (#ff6b6b, #e74c3c, #ff0000)
- Border-radius uniforme em tudo (8px em tudo = genérico)
- Ícones emoji como elementos estruturais (🚀 ✨ 💡)
Estruturas banidas
PROIBIDO:
- CSS sem variáveis no :root (hardcoded hex em componentes)
- HTML sem Google Fonts <link> no <head>
- Body sem font-family apontando para variável custom
- Seções sem padding vertical generoso (min 80px desktop, 48px mobile)
- Hero sem background com atmosfera (gradiente, textura, ou padrão)
- Página inteira centralizada sem nenhum momento de assimetria
MANDATORY STARTER — Todo HTML começa assim
Antes de escrever qualquer conteúdo, o arquivo HTML DEVE começar com esta estrutura. Escolha as fontes e cores da references/identity-system.md, mas a estrutura é obrigatória:
Esta estrutura não é sugestão — é o mínimo. Customize cores, fontes e efeitos, mas a presença de Google Fonts, CSS variables, atmospheric background e scroll animations é obrigatória.
Processo de Decisão
Etapa 1: Briefing
Extraia do pedido: Produto, Público, Objetivo, Tom, Copy (pronta ou placeholder), Formato (HTML ou React).
Dashboard, app interativo, componente com estado → React JSX
Regra crítica sobre copy: Mesmo quando recebe copy pronta, o processo de identidade visual (Etapa 2) é OBRIGATÓRIO. Copy pronta não significa "pule direto pro código". A copy define o conteúdo. A identidade define como ele se apresenta visualmente. São coisas diferentes.
Etapa 2: Identidade Visual
Leia references/identity-system.md para o catálogo completo. Decida:
Estilo Visual — Consulte tabela Produto × Tom para escolher
Paleta — Copie uma paleta da referência e customize
Tipografia — Escolha um par da referência. Exemplo de pares fortes:
Premium: Fraunces (900) + DM Sans (400)
Tech: Space Grotesk (700) + IBM Plex Sans (400)
Editorial: Newsreader (700) + Crimson Pro (400)
Startup: Syne (800) + Work Sans (400)
Brutalist: Anton (400) + Space Grotesk (400)
Efeitos — Radius, shadows, depth conforme estilo
Etapa 3: Visual Signature — O Diferencial
Toda página precisa de pelo menos 2 destes elementos para não parecer genérica:
