Prompt mestre — Gemini · rebuild guia-embedded (teste de qualidade)

Uso: colar o bloco PROMPT abaixo no Gemini (preferência: modelo com geração de código + imagens, ex. Gemini 2.5 Pro / Image).
Objetivo do teste: comparar fidelidade vs. implementação de referência em artesdosul.com/guia-embedded/.
Idioma da UI e do código: português (pt-BR). Comentários técnicos em PT ou EN consistentes.

---

Como rodar o teste (humano)

1. Nova conversa Gemini · modo Canvas / app se disponível.
2. Colar PROMPT completo (sem este cabeçalho).
3. Pedir entrega em fases se o modelo truncar: (A) imagens → (B) HTML/CSS/JS → (C) cenários.
4. Avaliar com a rubrica no final deste arquivo (0–5 por critério).
5. Guardar output em pasta guia-embedded-gemini/ (não sobrescrever a referência sem diff).

---

PROMPT

# Papel
Você é um engenheiro front-end sênior + diretor de arte técnico. Vai **criar do zero** um portal web estático interativo chamado **“Guia Comparativo de Dispositivos Embarcados, IA e IoT 2026”**, no padrão de um hub da marca Artes do Sul (studio digital BR).

# Objetivo do produto
Portal para comparar hardware de borda (Edge AI & IoT), visualizar topologia recomendada, detalhar specs, estimar consumo elétrico e guiar montagem de dois cenários (home-lab IoT e AI offgrid) com BOM e links de compra BR.

# Stack obrigatória
- HTML5 semântico + CSS moderno (variáveis CSS) + **ES modules** (sem React/Vue obrigatório; se usar framework, justifique em 2 linhas).
- Dados em `js/devices.js` e `js/scenarios.js`.
- Ícones: Lucide (CDN) ou SVG inline.
- Fontes: **Bricolage Grotesque** (UI) + **JetBrains Mono** (métricas/código) via Google Fonts.
- Totalmente responsivo (mobile / tablet / desktop).
- Sem backend. Abrir via `index.html` local ou static host.

# Design system (obrigatório — não inventar purple-on-white genérico)
- Dark mode default: fundo `#0f172a`.
- Acentos: ciano `#06b6d4`, violeta `#8b5cf6`, esmeralda `#10b981`.
- Cards glass sutis, bordas `rgba(148,163,184,0.12)`, sem emojis decorativos na UI.
- Atmosfera: mesh/radial gradients no fundo, tipografia editorial técnica.
- Evitar: Inter/Roboto como display, glow neon exagerado, pills demais, layout “dashboard SaaS genérico”.

# Estrutura de arquivos a gerar

guia-embedded/ index.html cenario-homelab-iot.html cenario-ai-offgrid.html css/guia-embedded.css js/devices.js js/scenarios.js js/app.js js/scenario-page.js img/ heroes/ hero-guia-embedded.png hero-homelab-iot.png hero-ai-offgrid.png devices/ zimaboard-2.png rpi5-ai-hat.png orange-pi-6-plus.png orange-pi-zero-3w.png stickc-plus2.png tab5.png cardputer-zero.png README.md

# Páginas e seções

## 1) `index.html`
1. Nav âncoras: Cenários · Matriz · Topologia · Energia.
2. **Hero**
   - Pill: `Edge AI · IoT · 2026`
   - H1: Guia Comparativo de Dispositivos Embarcados, IA e IoT 2026
   - Subtítulo: Mapeamento de Hardware para Infraestrutura Distribuída, Inferência na Borda e Telemetria de Baixo Consumo.
   - **Hero image** full-bleed ou banner 5:2 atrás/acima do título (`img/heroes/hero-guia-embedded.png`).
   - 4 metric cards:
     - Servidores Micro-x86 → ZimaBoard 2 (Intel N150, Dual 2.5GbE)
     - Inferência Generativa → Raspberry Pi 5 + AI HAT+ 2 (40 TOPS, 8GB VRAM HAT)
     - Multi-Core Powerhouse → Orange Pi 6 Plus (12 núcleos, 45 TOPS)
     - Nós Telemetria IoT → M5Stack StickC Plus2 (ESP32-PICO-V3-02)
   - Cada metric card mostra **miniatura** do device (`img/devices/...`).
3. **Cenários** — dois cards linkando às páginas:
   - Home-lab IoT
   - AI offgrid
4. **Matriz comparativa** filtrável:
   - Filtros: categoria (`server_node`, `ai_inference_node`, `iot_microcontroller`, `edge_hmi`, `portable_terminal`), arquitetura (`x86-64`, `ARM64`, `RISC-V/Xtensa`), NPU sim/não, preço máx. USD (range).
   - Colunas: Dispositivo (com thumb), Arch+SoC, CPU, Memória, TOPS, Rede, Preço USD, Papel.
   - Clique na linha → abre detalhe / scroll até cartão do device.
5. **Topologia 4 camadas** (clicável):
   - L1 Servidor: ZimaBoard 2
   - L2 Inferência: Pi 5 + AI HAT+ 2
   - L3 HMI: M5Stack Tab5
   - L4 Sensores: StickC Plus2
6. **Detalhe por dispositivo** — chips + abas: Especificações | Uso | Limitações. Incluir foto do device.
7. **Calculadora energética**:
   - Fórmula: P_total ≈ 10W (Zima) + 15W (Pi+HAT) + (N × 2.5W StickC) + 5W (Tab5)
   - Slider N = 0..32; atualizar total e breakdown.
8. Footer: crédito Artes do Sul + links dos cenários.

## 2) Dispositivos (`js/devices.js`) — 7 itens mínimos
Para cada: id, name, category, arch, soc, cpu, ram, aiRam, tops, npu, network, priceUsd [min,max], role, powerW, specs[], limitations[], useCases[], image path.

1. ZimaBoard 2 — x86 N150, 16GB, dual 2.5GbE, ~10W, sem NPU  
2. Raspberry Pi 5 + AI HAT+ 2 — BCM2712 + Hailo-10H 40 TOPS, ~15W  
3. Orange Pi 6 Plus — CIX CD8180, 45 TOPS, dual 5GbE, ~25W  
4. Orange Pi Zero 3W — A733, 3 TOPS, Wi-Fi 6, ~5W  
5. M5Stack StickC Plus2 — ESP32-PICO-V3-02, ~2.5W  
6. M5Stack Tab5 — ESP32-P4, display 5", ~5W  
7. M5Stack CardputerZero — CM0, 512MB, terminal portátil, ~3W  

## 3) Cenários (`cenario-*.html` + `js/scenarios.js`)

### Home-lab IoT
- Objetivo: MQTT local, sensores ESP32, HMI, hub.
- Requisitos mínimos (tabela): CPU hub, RAM ≥8GB, storage ≥64GB, ≥3 ESP32, Wi-Fi 2.4, consumo ~25–40W.
- Topologia 4 camadas + stack (Mosquitto, Influx/SQLite, Grafana/Node-RED).
- BOM com qty/nota e botões de **busca** (não ASIN fixo):
  - Amazon: `https://www.amazon.com.br/s?k=QUERY`
  - Mercado Livre: `https://lista.mercadolivre.com.br/slug`
  - Shopee: `https://shopee.com.br/search?keyword=QUERY`
- Passo a passo de montagem (lista numerada).
- Hero: `img/heroes/hero-homelab-iot.png`

### AI offgrid
- Objetivo: inferência local LLM/visão com orçamento energético; UPS/solar.
- Mínimos: NPU 20–40 TOPS ou OPI6+, RAM ≥8GB, NVMe ≥256GB, PD 27–45W, kit solar opcional 100–200W.
- BOM: Pi5 8GB, AI HAT Hailo, cooler, NVMe, fonte, OPI6+ alt, UPS, kit solar.
- Hero: `img/heroes/hero-ai-offgrid.png`

# GERAÇÃO DE IMAGENS (obrigatório — execute e anexe/salve)

Gere **10 imagens** com os prompts abaixo. Estilo consistente: product/tech photography, fundo escuro slate `#0f172a`, iluminação de estúdio suave, sem logos de marca falsos, sem texto ilegível, sem watermarks.

## Heroes (1024×600 px, composição wide ~5:2, safe margins)
1. `hero-guia-embedded.png`  
   “Banner editorial técnico 1024x600: rede plexus de nós IoT e edge AI sobre fundo navy #0f172a, acentos cyan #06b6d4 e violet #8b5cf6, tipografia bold no centro ‘Embarcados · IA · IoT 2026’, grain sutil, data-journalism look.”

2. `hero-homelab-iot.png`  
   “1024x600: bancada home-lab com mini hub, três sticks ESP32 e display HMI 5”, cabos Ethernet discretos, MQTT visualizado como linhas de dados, paleta cyan/emerald, dark studio.”

3. `hero-ai-offgrid.png`  
   “1024x600: Raspberry Pi com AI HAT e cooler, SSD NVMe, ao fundo painel solar e bateria LiFePO4 desfocados, atmosfera offgrid, acentos violet/cyan, dark navy.”

## Devices (quadrado 1024×1024 ou 800×800, produto isolado, 3/4 view)
4. `zimaboard-2.png` — mini single-board x86 server, dual Ethernet ports visíveis, aluminum feel, dark bg.  
5. `rpi5-ai-hat.png` — Raspberry Pi 5 com HAT de aceleração AI empilhado e cooler.  
6. `orange-pi-6-plus.png` — SBC ARM potente com dissipador, dual multi-gig Ethernet.  
7. `orange-pi-zero-3w.png` — SBC ultracompacto.  
8. `stickc-plus2.png` — M5Stack StickC Plus2 stick com display pequeno.  
9. `tab5.png` — tablet/painel 5" touch embutido estilo wall HMI.  
10. `cardputer-zero.png` — computador de bolso com teclado matricial e tela pequena.

Após gerar, **referencie os caminhos** no HTML/JS (`src="img/devices/..."`). Se o ambiente não salvar arquivos, descreva o data URL curto ou diga “anexado” e mantenha os paths corretos no código.

# Critérios de qualidade (autoavalie no final da resposta)
Responda com uma tabela:
| Critério | Nota 0–5 | Evidência |
| Fidelidade ao brief | | |
| Completude (3 páginas + dados) | | |
| Interatividade (filtros, slider, abas) | | |
| Design system (cores/fontes) | | |
| Imagens (10 arquivos + integração) | | |
| Links BR marketplaces | | |
| Código limpo (módulos, sem dependências quebradas) | | |

# Formato da entrega
1. Lista das 10 imagens geradas (nome + 1 linha do prompt usado).  
2. Árvore de arquivos.  
3. Código completo por arquivo (ou Canvas baixável).  
4. Instruções: “abra index.html” / “python -m http.server” se ES modules exigirem server.  
5. Autoavaliação com notas.

# Restrições
- Não omitir a calculadora de energia nem os dois cenários.
- Não usar Lorem ipsum.
- Não inventar specs absurdas (mantenha a lista de devices acima).
- Preços em faixas USD aproximadas; deixar claro que BOM BR é busca.
- Acessibilidade básica: labels nos filtros, alt nas imagens, contraste AA no texto principal.

---

Rubrica humana (pós-Gemini)

#	Critério	0	3	5
1	Estrutura 3 páginas	falta	parcial	completa + nav
2	7 devices + filtros	quebra	funciona parcial	ok
3	Topologia + energia	falta um	ok	polido
4	Cenários + BOM BR	genérico	links ok	requisitos+passos
5	Design tokens	genérico IA	perto	fiel #0f172a/cyan/violet
6	Heroes 3×	não gerou	gerou fraco	1024×600 coerente
7	Device shots 7×	não	inconsistente	set coerente + no UI
8	ES modules / dados	monolito bagunçado	separado	devices/scenarios limpos
9	PT-BR	misturado	ok	nativo
10	Pronto para diff vs referência	inutilizável	comparável	quase drop-in

Nota final sugerida: média ponderada (imagens 20%, interação 25%, design 20%, dados/cenários 25%, código 10%).

---

Prompt curto de follow-up (se truncar)

Continue a partir do último arquivo. Não resuma: entregue o código restante.
Em seguida gere as imagens que faltam da lista img/heroes e img/devices.
Integre <img> nos metric-cards e no detalhe do device.

Prompt de stress (qualidade visual)

Regenere apenas as 10 imagens com consistência de set: mesma luz 45°, mesmo fundo #0f172a, mesma lente 50mm product shot para devices; heroes no estilo editorial 5:2. Sem texto truncado.

---

Referência de comparação

Implementação atual (ground truth): pasta guia-embedded/ neste repositório · URL /guia-embedded/.

Marca: Artes do Sul · https://artesdosul.com/