PROMPT DE DESIGN PARA CRIAÇÃO DE PÁGINAS WEB

📋 Visão Geral

Este documento contém um prompt completo e estruturado para criação de páginas web modernas, seguindo os princípios de Editorial Brutalist Design, Atomic Design, e as melhores práticas de desenvolvimento frontend. Use este prompt como referência para ferramentas de IA ou como guia de implementação.

🎯 PROMPT PRINCIPAL

Crie uma página web única (one-pager) que combine clareza editorial com impacto visual brutalist, seguindo os princípios e especificações detalhadas abaixo.

🎨 FILOSOFIA DE DESIGN

Conceito: Editorial Brutalist

Definição: Combinar a clareza editorial de publicações técnicas com a honestidade brutal e impacto visual do design brutalist.

Princípios Fundamentais:

  1. Bold Aesthetic Direction: Estética claramente definida e memorável
  2. Distinctive Typography: Evitar fontes genéricas (Inter, Roboto) - escolher tipografias com personalidade
  3. Cohesive Color System: Sistema de cores semântico e consistente
  4. Intentional Motion: Animações bem orquestradas, não micro-interações dispersas
  5. Unexpected Layouts: Composições assimétricas que quebram padrões esperados
  6. Atmosphere & Depth: Uso de grids, overlays e transparências para criar profundidade

📐 ESPECIFICAÇÕES TÉCNICAS

Stack Tecnológico

Requisitos Obrigatórios:

  • HTML5: Markup semântico, acessível e SEO-friendly
  • CSS3: Custom Properties, Flexbox, Grid, Animations
  • Vanilla JavaScript: Zero dependências externas
  • Performance: Lighthouse Score 95+ em todas as métricas
  • Acessibilidade: WCAG 2.1 AA compliant mínimo

Não Usar:

  • Frameworks CSS pesados (Bootstrap, Foundation) - apenas se absolutamente necessário
  • Bibliotecas JavaScript desnecessárias
  • Imagens não otimizadas
  • Fontes não otimizadas

🎨 SISTEMA DE DESIGN

Tipografia

Hierarquia de Fontes:

  1. Display Font (Títulos principais)
    • Características: Peso dramático, presença forte, impacto visual
    • Exemplos: Archivo Black, Bebas Neue, Bungee
    • Uso: Hero titles, section headers principais
    • Tamanho: clamp(3rem, 12vw, 10rem) para hero, clamp(3rem, 8vw, 6rem) para seções
  2. Body Font (Texto corrido)
    • Características: Legibilidade excepcional, moderna, versátil
    • Exemplos: Work Sans, Inter, System UI
    • Uso: Parágrafos, descrições, conteúdo geral
    • Tamanho: Base 1rem, line-height 1.6-1.8
  3. Monospace Font (Código e dados)
    • Características: Legibilidade técnica, espaçamento consistente
    • Exemplos: JetBrains Mono, Fira Code, Source Code Pro
    • Uso: Trechos de código, metadados, informações técnicas

Otimização de Fontes:

<!-- Preconnect para performance -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Font-display: swap para evitar FOIT -->
<link href="..." rel="stylesheet" media="print" onload="this.media='all'">

Sistema de Cores

Estrutura de Cores com CSS Custom Properties:

:root {
    /* Cores Base */
    --color-bg: #0a0a0a;           /* Fundo principal (preto profundo) */
    --color-text: #f5f5f5;         /* Texto principal (branco quente) */
    --color-accent: #ff6b6b;       /* Cor de destaque principal */
    
    /* Cores Semânticas (categorias) */
    --color-category-1: #ff6b6b;   /* Ex: HTML, Seção 1 */
    --color-category-2: #4ecdc4;  /* Ex: CSS, Seção 2 */
    --color-category-3: #ffe66d;   /* Ex: JavaScript, Seção 3 */
    --color-category-4: #a8e6cf;   /* Ex: Media, Seção 4 */
    --color-category-5: #ff8b94;   /* Ex: Performance, Seção 5 */
    --color-category-6: #c7ceea;   /* Ex: Acessibilidade, Seção 6 */
    
    /* Cores de Estado */
    --color-hover: rgba(255, 255, 255, 0.1);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-overlay: rgba(0, 0, 0, 0.5);
}

Princípios de Uso de Cores:

  • Cada categoria/seção tem sua cor identificadora
  • Sistema semântico facilita navegação visual
  • Cores vibrantes sobre fundo escuro criam contraste
  • Manter contraste mínimo 4.5:1 para acessibilidade

Layout e Composição

Grid System:

  • Container máximo: 1400px (desktop)
  • Padding lateral: 2rem (desktop), 1rem (mobile)
  • Grid de fundo sutil: 50px × 50px (opcional, para estrutura visual)

Princípios de Layout:

  1. Grid Assimétrico: Títulos com indentação progressiva criam ritmo visual
  2. Negative Space: Uso generoso de espaço em branco (mínimo 2rem entre seções)
  3. Overlapping Elements: Barras de cor sobre fundo escuro criam profundidade
  4. Mobile-First: Design responsivo com breakpoint principal em 768px

Estrutura de Seções:

<section class="section" id="section-name">
    <div class="container">
        <div class="section-header">
            <span class="section-number">01</span>
            <h2 class="section-title">Título da Seção</h2>
            <p class="section-description">Descrição contextual</p>
        </div>
        <!-- Conteúdo da seção -->
    </div>
</section>

🧩 COMPONENTES (ATOMIC DESIGN)

Átomos (Elementos Básicos)

Botões:

.button {
    padding: 1rem 2rem;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.button:hover {
    background: var(--color-hover);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

Links:

.link {
    color: var(--color-accent);
    text-decoration: none;
    position: relative;
}

.link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.link:hover::after {
    width: 100%;
}

Moléculas (Grupos de Átomos)

Card Component:

<div class="card" style="--card-color: var(--color-category-1);">
    <h3 class="card-title">Título do Card</h3>
    <div class="card-content">
        <p>Conteúdo do card</p>
        <ul class="card-list">
            <li>Item da lista</li>
        </ul>
    </div>
</div>

.card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--card-color, var(--color-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--card-color, var(--color-accent));
    background: rgba(255, 255, 255, 0.08);
}

.card:hover::before {
    transform: scaleX(1);
}

Organismos (Componentes Complexos)

Hero Section:

<section class="hero">
    <div class="container">
        <h1 class="hero-title">
            <span>TÍTULO</span>
            <span>PRINCIPAL</span>
            <span>EM LINHAS</span>
        </h1>
        <p class="hero-subtitle">Descrição impactante do conteúdo</p>
        <div class="hero-meta">
            <div class="hero-meta-item">
                <span class="hero-meta-label">Categoria</span>
                <span>Valor</span>
            </div>
        </div>
    </div>
</section>

Navigation (Sticky):

<nav class="nav" id="nav">
    <div class="nav-container">
        <div class="nav-logo">LOGO</div>
        <ul class="nav-links">
            <li><a href="#section" class="nav-link">Link</a></li>
        </ul>
    </div>
</nav>

🎬 ANIMAÇÕES E INTERAÇÕES

Princípios de Animação

Filosofia: “One well-orchestrated page load creates more delight than scattered micro-interactions”

Regras:

  1. Animações devem ter propósito (não decorativas)
  2. Duração: 0.3s - 1s (dependendo da importância)
  3. Easing: cubic-bezier(0.16, 1, 0.3, 1) para suavidade
  4. Performance: Usar transform e opacity (GPU-accelerated)

Animações Essenciais

1. Hero Title Staggered Reveal:

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title span {
    display: block;
    animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.hero-title span:nth-child(1) { animation-delay: 0.1s; }
.hero-title span:nth-child(2) { animation-delay: 0.2s; }
.hero-title span:nth-child(3) { animation-delay: 0.3s; }

2. Fade-in on Scroll:

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

// Intersection Observer para fade-in
const fadeElements = document.querySelectorAll('.fade-in');

const fadeInOnScroll = () => {
    fadeElements.forEach(element => {
        const elementTop = element.getBoundingClientRect().top;
        if (elementTop < window.innerHeight * 0.85) {
            element.classList.add('visible');
        }
    });
};

window.addEventListener('scroll', fadeInOnScroll);
fadeInOnScroll(); // Initial check

3. Scroll Progress Indicator:

<div class="scroll-indicator">
    <div class="scroll-progress" id="scrollProgress"></div>
</div>

.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 101;
}

.scroll-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--color-category-1), var(--color-category-2));
    width: 0%;
    transition: width 0.1s ease;
}

window.addEventListener('scroll', () => {
    const scrollProgress = document.getElementById('scrollProgress');
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const progress = (scrollTop / scrollHeight) * 100;
    scrollProgress.style.width = progress + '%';
});

4. Smooth Scroll Navigation:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

📱 RESPONSIVIDADE

Breakpoints

/* Mobile First - Base */
/* Estilos base para mobile */

/* Tablet */
@media (min-width: 768px) {
    /* Ajustes para tablet */
}

/* Desktop */
@media (min-width: 1400px) {
    /* Ajustes para desktop */
}

Estratégia Mobile

Problemas a Resolver:

  1. Títulos muito grandes → Usar clamp() para escalabilidade
  2. Indentação confusa → Remover indents em mobile
  3. Grid complexo → Single column em mobile
  4. Navegação horizontal → Ocultar ou usar hamburger menu

Exemplo de Ajustes Mobile:

@media (max-width: 768px) {
    .hero-title span {
        text-indent: 0 !important;
    }
    
    .nav-links {
        display: none; /* ou hamburger menu */
    }
    
    .cards-grid,
    .atomic-grid,
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .section {
        padding: 4rem 0; /* Reduzir padding */
    }
}

♿ ACESSIBILIDADE

Requisitos Obrigatórios

  1. Semantic HTML5:
    • Usar elementos semânticos (<nav>, <section>, <article>, <header>, <footer>)
    • Estrutura de headings hierárquica (H1 → H2 → H3)
  2. ARIA Labels: 
    <nav aria-label="Navegação principal">
<button aria-label="Fechar menu">
  3. Keyboard Navigation:
    • Todos os elementos interativos devem ser acessíveis via teclado
    • Indicadores de foco visíveis 
      *:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
  4. Color Contrast:
    • Mínimo 4.5:1 para texto normal
    • Mínimo 3:1 para texto grande (18px+)
    • Testar com ferramentas (WebAIM Contrast Checker)
  5. Screen Reader Support:
    • Textos alternativos para imagens
    • Labels descritivos para formulários
    • Anúncios de mudanças dinâmicas (aria-live)

⚡ PERFORMANCE

Otimizações Obrigatórias

  1. Fontes:
    • Preconnect para Google Fonts
    • font-display: swap para evitar FOIT
    • Limitar a 3 famílias de fontes
    • Carregar apenas pesos necessários
  2. CSS:
    • Single file (sem imports desnecessários)
    • Minificação em produção
    • CSS crítico inline (opcional, para above-the-fold)
  3. JavaScript:
    • Vanilla JS (zero dependências)
    • Event delegation
    • Passive scroll listeners
    • requestAnimationFrame para animações
  4. Imagens:
    • Zero imagens desnecessárias
    • SVG para ícones
    • Lazy loading se necessário
    • WebP/AVIF com fallback
  5. Métricas Alvo:
    • First Contentful Paint: < 1s
    • Time to Interactive: < 2s
    • Lighthouse Score: 95+ em todas as categorias

📐 ESTRUTURA DE CONTEÚDO

Arquitetura da Informação

Padrão de Seção:

1. CONTEXTUALIZAÇÃO
   └── Número da seção + título dramático + descrição

2. EXPLORAÇÃO
   └── 3 cards com aspectos principais (número mágico 3-5)

3. APROFUNDAMENTO
   └── Listas com 5 itens cada (chunking: 5±2)

4. AÇÃO
   └── Links, questionários ou CTAs para aplicação

Princípios de UX:

  • Chunking: Conteúdo em blocos de 3-5 itens
  • Visual Hierarchy: Tamanhos, cores e espaços estabelecem ordem
  • Feedback Imediato: Hover effects, scroll progress
  • Consistency: Padrões repetidos criam familiaridade
  • Recognition over Recall: Navegação sempre visível

🎯 CHECKLIST DE IMPLEMENTAÇÃO

Pré-Desenvolvimento

  • Definir paleta de cores semântica
  • Escolher 3 fontes (display, body, mono)
  • Criar estrutura de componentes (Atomic Design)
  • Definir breakpoints e estratégia mobile

Durante Desenvolvimento

  • Implementar HTML semântico
  • Criar sistema de cores com CSS Custom Properties
  • Implementar componentes reutilizáveis
  • Adicionar animações essenciais
  • Testar responsividade em múltiplos dispositivos
  • Validar acessibilidade (WCAG 2.1 AA)
  • Otimizar performance (Lighthouse)

Pós-Desenvolvimento

  • Testar em navegadores (Chrome, Firefox, Safari, Edge)
  • Validar HTML/CSS (W3C Validator)
  • Testar com leitores de tela
  • Verificar Core Web Vitals
  • Documentar componentes e decisões

📝 EXEMPLO DE ESTRUTURA HTML COMPLETA

<!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 da Página</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="..." rel="stylesheet">
    
    <style>
        /* CSS Custom Properties */
        :root {
            --color-bg: #0a0a0a;
            --color-text: #f5f5f5;
            --color-accent: #ff6b6b;
            /* ... */
        }
        
        /* Reset e Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: var(--color-bg);
            color: var(--color-text);
            font-family: var(--font-body);
            line-height: 1.6;
        }
        
        /* Grid Background (opcional) */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: 0;
        }
        
        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            position: relative;
            z-index: 1;
        }
        
        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 4rem 0;
        }
        
        /* Animações */
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 0 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- Grid Background -->
    <div class="grid-bg"></div>
    
    <!-- Scroll Progress -->
    <div class="scroll-indicator">
        <div class="scroll-progress" id="scrollProgress"></div>
    </div>
    
    <!-- Navigation -->
    <nav class="nav" id="nav" aria-label="Navegação principal">
        <div class="nav-container">
            <div class="nav-logo">LOGO</div>
            <ul class="nav-links">
                <li><a href="#section1" class="nav-link">Seção 1</a></li>
            </ul>
        </div>
    </nav>
    
    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1 class="hero-title">
                <span>TÍTULO</span>
                <span>PRINCIPAL</span>
            </h1>
            <p class="hero-subtitle">Descrição impactante</p>
        </div>
    </section>
    
    <!-- Main Content Sections -->
    <section class="section" id="section1">
        <div class="container">
            <div class="section-header fade-in">
                <span class="section-number">01</span>
                <h2 class="section-title">Título da Seção</h2>
                <p class="section-description">Descrição contextual</p>
            </div>
            <!-- Conteúdo -->
        </div>
    </section>
    
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>Créditos e informações</p>
        </div>
    </footer>
    
    <script>
        // JavaScript para interatividade
        // Scroll progress, fade-in, smooth scroll, etc.
    </script>
</body>
</html>

🎓 PRINCÍPIOS FINAIS

Design

  1. Bold Aesthetic Direction: Estética claramente definida
  2. Distinctive Typography: Fontes com personalidade
  3. Cohesive Color System: Sistema semântico consistente
  4. Intentional Motion: Animações com propósito
  5. Unexpected Layouts: Composições que quebram padrões
  6. Atmosphere & Depth: Profundidade visual

Desenvolvimento

  1. Semantic HTML: Estrutura acessível e SEO-friendly
  2. CSS Custom Properties: Sistema de design escalável
  3. Vanilla JavaScript: Zero dependências desnecessárias
  4. Performance First: Otimizações desde o início
  5. Mobile-First: Design responsivo por padrão
  6. Accessibility: WCAG 2.1 AA mínimo

UX

  1. Chunking: Conteúdo em blocos gerenciáveis (3-5 itens)
  2. Visual Hierarchy: Tamanhos, cores e espaços claros
  3. Feedback Imediato: Interações responsivas
  4. Consistency: Padrões repetidos
  5. Recognition over Recall: Navegação sempre visível

📚 REFERÊNCIAS

Última atualização: Novembro 2025

Versão: 1.0

Uso: Este prompt pode ser usado como referência para criação de páginas web modernas, adaptável a diferentes contextos e necessidades.