Run any Skill in Manus with one click

designer-senior

Stars1

Forks1

UpdatedApril 28, 2026 at 02:07

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

inematds

inematds/skillmktv4

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

5 files

SKILL.md

readonly

More from this repository

same repository

criador-criativos

inematds/skillmktv4

Use this skill whenever the user wants to create, analyze, optimize, or iterate on ad creatives (criativos, anúncios) for paid traffic. Trigger for: "criar criativo", "escrever anúncio", "hook para anúncio", "body do criativo", "variações de hook", "roteiro de anúncio", "script de ad", "criativo para VSL", "criativo para página", "criativo estático", "UGC", "caixinha de pergunta", "bullets de curiosidade", "engenharia reversa de anúncio", "bater o controle", "oxigenar criativos", "ad campeão", "hook rate", "body rate", "anúncio para tráfego frio", "criativo low ticket", "criativo para ingresso", "ângulo de anúncio", "big idea do criativo", "estrutura invisível", "frase de aterrissagem", "disparo de dopamina", "lead associativa", "future pacing no ad". Covers: full creative creation, hook arsenal, body writing, static ads, UGC, bullet writing, invisible structure extraction, ad diagnosis, A/B testing, metrics optimization, and the critical VSL vs low-ticket distinction.

2026-04-281

criador-paginas-low-ticket

inematds/skillmktv4

Use this skill whenever the user wants to create, iterate, optimize or diagnose a sales page (página de vendas, landing page, página de ingresso) for cold traffic and low-ticket offers. Trigger for: "criar página de vendas", "página de ingresso", "página para tráfego frio", "headline para página", "variações de headline", "reescrever dobra", "nova versão da página", "micro-ajuste na página", "versão vencedora", "testar ângulo", "otimizar conversão da página", "engenharia reversa de página", "dobra de preço", "transferência de culpa", "prova social", "mecanismo proprietário na página", "escada de crenças", "arquitetura de página", "página low ticket", "página de evento pago". Covers: full page creation from scratch, page diagnosis, headline generation, section rewriting, A/B testing strategy, and screenshot-based iteration. Always runs diagnostic-first before generating any copy.

2026-04-281

criador-reels-c1

inematds/skillmktv4

Gera 3 roteiros completos de Reels C1 (conteúdo de autoridade, sem venda direta) para o nicho de Marketing e Vendas. Use esta skill sempre que o usuário quiser criar roteiros de reels de conteúdo, scripts de autoridade para Instagram Reels, TikTok ou YouTube Shorts — mesmo que não mencione "C1", "roteiro" ou "script" explicitamente. Também use quando o usuário pedir "ideia de reel", "conteúdo de autoridade", "reel sem venda", "script de reel" ou "conteúdo para Instagram". A skill escolhe temas estratégicos, cria 3 roteiros com gancho nos primeiros 15 segundos, 2 camadas de valor e um CTA solto ao final, entregando cada roteiro em formato estruturado + versão corrida pronta para gravar.

2026-04-281

lancamento-pago-semanal

inematds/skillmktv4

Use for lançamento pago semanal (paid weekly launch) with 5+1 event model. Triggers: "lançamento pago", "evento pago semanal", "5+1", "desafio pago", "página de ingresso", "vender ingresso", "estrutura de aulas", "pitch do evento", "nomes das aulas", "seeding progressivo", "ficha de interesse", "conversão D1", "criativos para ingresso", "otimizar lançamento", "montar evento pago", "transformar projeto em lançamento pago", "tear operacional", "hook rate", "body rate". Also trigger for paid challenges, event class structure, cold traffic sales pages, pitch scripts, weekly launch optimization. Covers: diagnosis, ticket sales, page, creatives, traffic, event architecture, pitch, messaging, operations, and weekly optimization.

2026-04-281

mensageria-lancamento

inematds/skillmktv4

Use this skill whenever the user wants to create, structure or adapt messaging (mensageria) for a paid weekly launch event (lançamento pago, desafio pago, evento 5+1). Trigger for: "mensageria do evento", "mensagens do grupo", "mensageria do lançamento", "roteiro de áudio", "script de áudio pro expert", "mensagens de WhatsApp do evento", "antecipação de aula", "mensagem de ao vivo", "mensagem de gravação", "API ManyChat", "fluxo de onboarding", "ficha de interesse mensagem", "carrinho aberto mensageria", "abertura de vendas D1", "mensagens do desafio", "adaptar mensageria", "coreografia do grupo", "nome do grupo WhatsApp".

2026-04-281

name

designer-senior

description

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:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Título]</title>

  <!-- OBRIGATÓRIO: Google Fonts com fontes marcantes -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=[DISPLAY_FONT]:wght@300;700;900&family=[BODY_FONT]:wght@300;400;500;700&display=swap" rel="stylesheet">

  <style>
    /* ══════════ DESIGN SYSTEM ══════════ */
    :root {
      /* Colors — ESCOLHA DA references/identity-system.md */
      --color-primary: ;
      --color-primary-hover: ;
      --color-secondary: ;
      --color-accent: ;
      --color-bg: ;
      --color-bg-alt: ;
      --color-text: ;
      --color-text-muted: ;
      --color-border: ;

      /* Typography — FONTES DO GOOGLE FONTS ACIMA */
      --font-display: '[Display Font]', serif;
      --font-body: '[Body Font]', sans-serif;

      /* Scale */
      --text-sm: 0.875rem;
      --text-base: 1rem;
      --text-lg: 1.125rem;
      --text-xl: 1.25rem;
      --text-2xl: 1.5rem;
      --text-3xl: 2rem;
      --text-4xl: 2.5rem;
      --text-5xl: 3.5rem;
      --text-6xl: 4.5rem;
      --text-hero: clamp(2.5rem, 6vw, 5rem);

      /* Spacing */
      --space-xs: 0.25rem;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --space-xl: 2rem;
      --space-2xl: 3rem;
      --space-3xl: 4rem;
      --space-section: clamp(4rem, 8vw, 7rem);

      /* Effects */
      --radius-sm: ;
      --radius-md: ;
      --radius-lg: ;
      --radius-full: 999px;
      --shadow-sm: ;
      --shadow-md: ;
      --shadow-lg: ;

      /* Transitions */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --duration-fast: 150ms;
      --duration-base: 300ms;
      --duration-slow: 500ms;
    }

    /* ══════════ RESET ══════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      color: var(--color-text);
      background: var(--color-bg);
      line-height: 1.6;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
    }

    /* ══════════ ATMOSPHERIC BACKGROUND (obrigatório no hero) ══════════ */
    .hero-bg {
      position: relative;
      overflow: hidden;
    }
    .hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-secondary) 8%, transparent) 0%, transparent 50%);
      pointer-events: none;
    }
    /* Noise texture overlay */
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      pointer-events: none;
    }

    /* ══════════ SCROLL ANIMATIONS ══════════ */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity var(--duration-slow) var(--ease-out),
                  transform var(--duration-slow) var(--ease-out);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ══════════ TYPOGRAPHY ══════════ */
    h1, h2, h3, h4 {
      font-family: var(--font-display);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    h1 { font-size: var(--text-hero); font-weight: 900; }
    h2 { font-size: var(--text-4xl); font-weight: 700; }
    h3 { font-size: var(--text-2xl); font-weight: 700; }
    p { max-width: 65ch; }

    /* ══════════ SECTION RHYTHM ══════════ */
    section { padding: var(--space-section) var(--space-lg); }
    .container { max-width: 1200px; margin: 0 auto; width: 100%; }
    .narrow { max-width: 800px; }

    /* ══════════ CTA BUTTONS ══════════ */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 2rem;
      background: var(--color-primary);
      color: #fff;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: var(--text-base);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      text-decoration: none;
      transition: all var(--duration-base) var(--ease-out);
    }
    .btn-primary:hover {
      background: var(--color-primary-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px color-mix(in srgb, var(--color-primary) 30%, transparent);
    }
    .btn-primary:active { transform: translateY(0); }
  </style>
</head>
<body>
  <!-- CONTEÚDO COMEÇA AQUI -->

  <!-- OBRIGATÓRIO: Scroll reveal JS no final -->
  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry, i) => {
        if (entry.isIntersecting) {
          setTimeout(() => entry.target.classList.add('visible'), i * 80);
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  </script>
</body>
</html>

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).

Regra de formato:

Landing, vendas, portfólio, institucional → HTML/CSS/JS puro (auto-contido)
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:

Headline como elemento visual — Tamanho extremo (clamp 3rem-6rem), weight 900, letter-spacing negativo (-0.03em)
Background atmosférico — Radial gradients em camadas, noise texture, ou grid sutil (nunca fundo sólido puro)
Assimetria controlada — Pelo menos uma seção que quebra o grid centralizado (offset, overlap, split assimétrico)
Transição de seção — Pelo menos uma divisão entre seções que não é borda reta (SVG wave, diagonal via clip-path, gradiente de transição)
Hover states elaborados — Além de color change: translate, scale, shadow transition, border-color, glow
Texto estilizado — Gradient text, text-stroke, lettering como textura, ou tipografia em escala extrema como elemento decorativo
Cor de destaque em uso inesperado — Um elemento que usa a accent color de forma que chama atenção (underline custom, background highlight, badge)
Micro-animações no load — Staggered fade-in nos elementos do hero (título → subtítulo → CTA com delays de 100-200ms)

Escolha 2-3 destes. A página deve ter pelo menos UM momento que faz o visitante pensar "isso é diferente".

Etapa 4: Layout

Leia references/page-patterns.md para a estrutura por tipo de página. Princípios:

Seções com padding generoso: padding: clamp(4rem, 8vw, 7rem) var(--space-lg)
Alternância de fundos entre --color-bg e --color-bg-alt
Max-width: conteúdo 1200px, texto body 800px (65-75ch)
Mobile-first. Breakpoints: 768px e 1024px
CTA repetido 2-3x na página

Etapa 5: UX Quality Check

Leia references/ux-guidelines.md. Verificação rápida:

Contraste ≥4.5:1 para texto
Touch targets ≥44px
prefers-reduced-motion respeitado
Viewport meta presente
Sem scroll horizontal em mobile
Focus rings em interativos
Fonte mínima 16px body no mobile

Etapa 6: Validação Final

Antes de entregar, verifique contra a BLACKLIST acima. Se qualquer item banido está presente → reescreva essa parte.

Depois, o teste do olho:

"Se eu trocar o conteúdo, essa página ainda pareceria IGUAL a qualquer outra landing?" → Se sim, faltou Visual Signature.
"Consigo identificar qual marca/projeto é só pelo visual, sem ler o texto?" → Se não, a identidade está fraca.

Para React JSX

Mesmos princípios, adaptados:

Componente funcional com export default
CSS variables definidas em <style> tag JSX ou objeto de estilo
Google Fonts: adicione comment no topo do arquivo indicando que a fonte precisa ser carregada
Imports: React, lucide-react, recharts, shadcn/ui, d3
Sem localStorage/sessionStorage
Responsivo via CSS media queries dentro do style tag

Integração com Copy

Com copy pronta: Aplica Etapas 1-6 normalmente. A copy define conteúdo, não visual.

Sem copy: Use placeholder inteligente — texto que parece real e demonstra hierarquia. Nunca Lorem ipsum. Sinalize ao usuário que precisa substituir.

Referências

Arquivo	Quando ler
`references/identity-system.md`	Etapa 2 — estilos, paletas, fontes, efeitos
`references/frontend-aesthetics.md`	Etapa 3 — anti-AI-slop, técnicas de atmosfera
`references/page-patterns.md`	Etapa 4 — estrutura por tipo de página
`references/ux-guidelines.md`	Etapa 5 — 99 regras UX priorizadas