Use isto quando o leitor precisa ajustar algumas entradas e ver o resultado atualizar ao vivo — aqui, os controles à esquerda montam um prompt de LLM que se re-renderiza na pré-visualização à direita conforme você os altera.
Exemplar copiável. Leve os blocos <section> abaixo para uma lição construída a partir de assets/lesson-template.html — mantenha os tokens de design e o padrão .tech-toggle ao pé da letra.
Um prompt é apenas a instrução que você entrega a uma IA. Pequenas mudanças de redação — um tom mais amigável, um tamanho menor, dizer quem é o público — orientam discretamente o que volta. Um ajustador transforma essas escolhas em botões: você mexe num controle à esquerda, e a instrução pronta se reconstrói à direita, palavra por palavra, para que você veja exatamente como cada botão reescreve o pedido antes mesmo de enviá-lo.
Pense nisso como… uma máquina de café com botões para intensidade, tamanho e leite. Você não reinstala o encanamento da máquina a cada vez — você gira um botão e a próxima xícara muda. Aqui a "xícara" é o texto do prompt, e cada botão que você gira o reescreve instantaneamente.
O padrão é um fluxo de dados unidirecional minúsculo: cada controle escreve num único objeto state (tone, length, audience, examples), e uma função pura buildPrompt(state) mapeia esse estado para a string do prompt montado. Nenhum controle escreve na pré-visualização diretamente — eles apenas atualizam o estado e chamam render(), então a pré-visualização é sempre uma função determinística das entradas. É essa separação que permite adicionar um quinto botão depois sem tocar nos outros quatro.
O laço causa→efeito é imediato: mude uma variável, veja a única parte da saída que se moveu (ela é destacada brevemente). Esse feedback rápido é todo o valor de ensino — o leitor constrói um modelo mental de como cada alavanca mapeia para o resultado, em vez de adivinhar.
Cada controle alimenta o mesmo pequeno construtor; o construtor devolve uma string montada; a pré-visualização a exibe. Leia da esquerda → direita.
Gire qualquer botão à esquerda. O prompt montado à direita se reconstrói imediatamente, e a parte que mudou pisca para você ver quais palavras se moveram.
Cada controle atualiza um objeto state compartilhado e chama render(). A pré-visualização é o que buildPrompt(state) retorna — nada escreve nela diretamente:
// o único lugar onde o estado vira texto function buildPrompt(state) { const len = LENGTHS[state.length]; // "2–3 frases" const lines = [ `Você é um assistente ` + TONE_VOICE[state.tone] + `.`, `Escreva para ` + (state.audience || "um leitor geral") + `.`, `Mantenha a resposta em cerca de ` + len + `.` ]; if (state.examples) lines.push("Inclua um exemplo concreto."); return lines.join("\n"); }
Como buildPrompt é pura (mesmo estado → mesma string, sem efeitos colaterais), a pré-visualização é sempre reproduzível, e o destaque é apenas um diff em relação à renderização anterior. Adicione um botão acrescentando um campo a state e uma linha aqui.
O tom usa toggles reais <button aria-pressed>; o tamanho é um <input type="range"> nativo com aria-describedby apontando para sua leitura; a pré-visualização é uma região aria-live="polite" para que os leitores de tela anunciem cada reconstrução sem roubar o foco.