Gere conteúdo didático de alta qualidade em HTML/CSS com ilustrações SVG, usando um sistema de Temas pré definidos e reutilizáveis. Capaz de criar ou editar apostilas, tutoriais e materiais educacionais que seguem filosofias pedagógicas claras.
Estas são instruções para criar Conteúdo Didático Visual - material educacional que é estruturado pedagogicamente e expresso visualmente com qualidade editorial. A saída final DEVE ser um único arquivo .html.
examples/: Contém exemplos de referência.themes.json: CRÍTICO. Este arquivo armazena as definições de estilo (cores, tipografia, CSS) dos temas pré definidos. O Agente DEVE ler este arquivo para operar.Sempre verifique qual destas ações abaixo o usuário deseja realizar:
Cria ou modifica um arquivo HTML único contendo o conteúdo didático completo, rico em visual e pedagogia.
Cabeçalho Editorial: Título (H1) impactante, Subtítulo (H2) explicativo, Badges de metadados. Uma caixa destacada no início com os pontos chave (TL;DR). O conteúdo dividido em seções claras (H3/H4).
Conclusão: Resumo final recapitulativo.
<article>, <section>, <aside>, <figure>, <figcaption>.<style> no <head>.max-width: 800px para o contêiner de leitura principal para ergonomia visual.@import para fontes do Google Fonts. Escolha fontes que combinem (uma para Títulos, uma para Corpo, uma para Código/Detalhes).
Merriweather (Corpo) + Oswald (Títulos) para um look clássico.Inter (Corpo) + Space Grotesk (Títulos) para tech.O agente DEVE ser capaz de ilustrar conceitos. Não use imagens externas quebradas.
<svg> diretamente no HTML. Isso garante vetores perfeitos em qualquer zoom.Gere um arquivo HTML único. Este arquivo deve ser uma OBRA DE ARTE EDITORIAL.
:root.googleFontsUrl do tema.1. Defina Tópico: Se o usuário não informar o tópico, pergunte. Confirme o assunto (tópico e subtópicos), o público-alvo e o objetivo do conteúdo.
2. Defina o Público-alvo: Se o usuário não informar o público-alvo, pergunte. O público-alvo (Ex: Crianças de 5 anos, Doutorandos, Engenheiros Sênior).
3. Defina o Tom: Se o usuário não informar o tom, pergunte. Socrático, Direto, Lúdico, Acadêmico, "Explain Like I'm 5" (ELI5).
4. Defina a Filosofia Didática: Antes de escrever o conteúdo, defina a abordagem pedagógica e visual. Não pule esta etapa, ela garante coerência. (faça isso mentalmente).
5. Defina a Estrutura Cognitiva: Como o conhecimento será construído? (Ex: Conceito -> Exemplo -> Prática; ou Problema -> Solução -> Teoria). (faça isso mentalmente).
6. Consulte Temas: Leia themes.json e apresente a lista de temas disponíveis (Nome + Descrição) para o usuário escolher, ou selecione caso o usuário já tenha informado.
7. Gere o HTML:
<head>.<style> com os dados do novo tema do themes.json.Cria ou atualiza definições no arquivo themes.json.
{
"id": "string-kebab-case",
"name": "Nome Legível",
"description": "Breve descrição de uso.",
"colors": {
"primary": "#hex",
"accent": "#hex",
"secondary": "#hex",
"text": "#hex",
"background": "#hex",
"surface": "#hex" // Para cartões/boxes
},
"typography": {
"display": "Font Family para títulos",
"body": "Font Family para texto",
"code": "Font Family para código",
"googleFontsUrl": "URL completa do Google Fonts"
},
"css_variables": {
"--custom-var": "value" // Variáveis extras específicas
},
"extra_styles": "CSS cru para overrides específicos (ex: bordas de botões, sombras específicas)"
}
Coletar Dados: Pergunte ao usuário o "mood" (sério, lúdico, dark, tech), cores de preferência ou peça liberdade criativa. Gerar Identidade:
cyber-punk, infantil-pastel, direito-classico).themes.json atual.themes.json com o novo conteúdo JSON.themes.json atualizado.