weiguo-long/lwg-haibao-design

Páginas HTML de Apresentação no Estilo Cartaz/Pôster

Projeta páginas HTML individuais no estilo 'cartaz/pôster' para apresentações e palestras, e extrai regras reutilizáveis a partir de imagens de design fornecidas pelo usuário. Dois fluxos de trabalho:

• Fluxo A · Extrair: O usuário fornece imagens de design gráfico → analisar cor/composição/tipografia/elementos decorativos → escrever em references/rules.md conforme o modelo.
• Fluxo B · Gerar: O usuário fornece requisitos (conteúdo + tom + proporção) → selecionar estilo por pontuação via references/selection.md → gerar HTML autocontido na proporção especificada → validar conforme references/checklist.md.

Disciplina mais importante: não inventar layouts próprios. Quase todas as versões rejeitadas pelo usuário surgiram de 'inventar um estilo do zero'. A biblioteca contém 24 amostras e 9 paletas; só recorra à baseline.md se nenhuma for adequada. Quando o usuário mencionar explicitamente um número S / C, siga exatamente.

Fluxo A: Fornecer Imagens de Design, Extrair Regras

Dois modos de análise:

• Análise completa (padrão): Analisa todos os campos conforme o modelo e extrai uma entrada de amostra (S-{número}).
• Análise apenas de cores: Quando o usuário sinalizar 'só preciso da paleta' / 'analisar só cores', ou quando a imagem for claramente uma paleta/amostra de cores (blocos de cor pura, cartela de cores), extrair apenas a paleta e definir a atribuição de papéis de cor, gerando uma entrada de esquema de cores (C-{número}), pulando composição/tipografia/decorativos.

1. Ler imagens: Use ferramenta de visualização de imagem (ex.: ViewImage) para examinar cada imagem uma a uma; se o texto estiver muito pequeno ou detalhes ilegíveis, recorte e amplie a região. Para múltiplas imagens, veja todas primeiro antes de extrair. Analise apenas o design em si: ignore marcas d'água, logotipos de plataforma/ conta, e partes supérfluas como barra de status superior, barra de navegação inferior de capturas de tela; para capturas cortadas ou achatadas, infira a intenção original do design com base no conteúdo visível.
2. Analisar cada imagem: Siga os campos de references/analysis-template.md (no modo apenas cores, use os campos da seção 'Modo apenas cores' desse arquivo), focando em pontos de implementação diretamente reutilizáveis:
   • Cores: hex da cor principal/secundária/destaque/neutra, proporção de área, relação claro-escuro. Priorize o uso de python3 scripts/extract_palette.py <caminho_da_imagem> para obter valores exatos; se Pillow estiver ausente ou o script falhar, use valores aproximados a olho e marque 'aproximado' na entrada.
   • Composição: método de divisão da página, posição do ponto focal, proporção de espaço em branco, grid, simetria, hierarquia de leitura.
   • Tipografia: estilo do título, hierarquia de tamanhos (em porcentagem do lado menor da tela), peso da fonte, alinhamento, espaçamento entre caracteres.
   • Decorativos e texturas: elementos gráficos, texturas, bordas, gradientes/ruído/blocos de cor, etc.
   • Densidade de conteúdo e proporção adequada: quantidade de informação e relação largura/altura adequadas.
   • Cenário de uso: para que tipo de tema e tom essa amostra é adequada.
3. Extrair: Adicione o resultado da análise como uma entrada em references/rules.md — análise completa como entrada de amostra (S-{número}), análise apenas de cores como entrada de esquema de cores (C-{número}). Ambas registradas na tabela de índice (o número deve ser obtido a partir da linha placeholder no final da tabela de índice; após usar, adicione uma nova linha placeholder; veja regras em analysis-template.md). Se for muito semelhante a uma entrada existente, mescle ou marque como variante, sem acumular duplicatas. Salve também a imagem original em references/samples/ (imagem única: S-XX.jpg, variante: S-XXa.jpg / S-XXb.jpg) e atualize o README desse diretório — apenas a descrição textual perde a técnica que faz o design ser bonito (ex.: o bloco branco de três linhas do S-13 foi omitido por isso e depois corrigido na entrada).
4. Sincronizar tabela de seleção: Em references/selection.md, adicione uma linha na tabela de tags de amostra (tom / claro-escuro / material / densidade / elemento assinatura / proporção) e inclua a nova amostra na seção 4 'Matriz C × S' de acordo com seu claro-escuro; caso contrário, a nova amostra ficará 'invisível' na seleção.
5. Relatar: Informe ao usuário qual nova regra foi adicionada e para qual cenário ela é adequada, facilitando a reutilização direta.

Fluxo B: Fornecer Requisitos, Gerar Página

1. Interpretar requisitos: Conteúdo do tema, tom emocional (sério/neutro/animado/artístico/leve), densidade de conteúdo (frase única vs. pontos-chave vs. dados vs. texto + imagem), proporção de página especificada (qualquer valor), necessidade de foto real.
2. Selecionar por pontuação (não pular): Leia references/selection.md, faça filtragem dura e pontuação com base nas tags de 5 eixos, selecione os 3 primeiros; justifique em uma frase por que a amostra selecionada é adequada (relação entre elemento assinatura e semântica do conteúdo) e, em seguida, vá para a próxima etapa. Simultaneamente, use a seção 4 'Matriz C × S' para definir a paleta, preenchendo os 5 papéis de cor (bg / text / mid / accent / decor) com valores hex. Após selecionar, consulte references/samples/README.md para a lista de arquivos; se houver imagem original correspondente, veja obrigatoriamente (nomes de imagens variantes: S-XXa / S-XXb; não adivinhe o caminho com S-XX.jpg), compare a forma real do elemento assinatura antes de prosseguir. Use baseline.md apenas quando a biblioteca estiver vazia ou nenhuma amostra corresponder.
3. Estruturar conteúdo: Organize o conteúdo do usuário em uma estrutura de página única no estilo cartaz/pôster (título principal, subtítulo, pontos-chave, dados, linha do tempo, etc.), com uma tela fechada, hierarquia clara e ponto focal único.
4. Ajustar proporção: Defina a tela da página de acordo com a proporção especificada (veja 'Especificação de ajuste de proporção' e 'Convenções de unidades' em baseline.md); tamanho da fonte e espaçamento são calculados com base no lado menor da tela — .stage declara container-type:inline-size, use cqw para orientação retrato e cqh para orientação paisagem, uma única alteração escala globalmente.
5. Gerar HTML: A skill html é uma dependência opcional: se já estiver instalada, leia completamente seu SKILL.md e references/design/frontend-design.md como complemento; se não estiver instalada, apenas pule, execute conforme references/baseline.md (princípios de design, hierarquia tipográfica, ajuste de proporção, convenções de unidades) e references/checklist.md (validação de 12 itens), sem interromper a entrega. A saída deve ser um único .html autocontido: CSS/JS inline, nome de arquivo semântico (não index.html), otimizado para mobile, sem botões zumbis, sem emoji, com favicon; imagens usando caminhos relativos locais ou data URI; imagens de links externos devem ser baixadas primeiro para o local. Antes de revisar, faça cp da versão atual para _backup/ (se o diretório não existir, crie com mkdir -p).
6. Validar: Conforme os 12 itens de references/checklist.md, calcule manualmente (cqw / cqh → px), faça uma captura de tela renderizada se possível e confira (texto excedendo borda / elementos cobrindo texto / contraste de cor). Se não passar, corrija e reentregue (use present_files com files: [caminho absoluto do HTML]). Na descrição da entrega, informe claramente o motivo da seleção, parâmetros alterados e o método real de verificação.
7. Registrar rejeições: Quando o usuário rejeitar uma versão, adicione uma linha na seção 5 de references/selection.md (amostra/paleta, citação original do usuário, diagnóstico do problema), e na próxima seleção evite ativamente a mesma combinação.

Manutenção do Banco de Regras

• references/rules.md: Banco de regras incremental, ativo central desta skill. A cada imagem fornecida, extrai uma amostra; ao gerar páginas, prioriza a seleção dele. Ao ler seus trechos de CSS, veja primeiro as 'Convenções de unidades' no topo.
• references/selection.md: Decisor de seleção de estilo. Tags de 5 eixos das amostras, regras de pontuação, matriz de compatibilidade C×S (cobrindo todas as 24 amostras), 5 papéis de cor da paleta, registros de rejeição. Novas amostras devem ser registradas na tabela de tags e na matriz simultaneamente.
• references/checklist.md: Lista de validação pré-entrega. 12 itens verificáveis + 2 regras rígidas.
• references/baseline.md: Linha de base genérica. Usada quando o banco de regras está vazio ou não corresponde, contém princípios de design de cartaz/pôster, hierarquia tipográfica, especificação de ajuste de proporção, convenções de unidades e proibições.
• references/analysis-template.md: Modelo de campos para análise de imagens fornecidas e regras de numeração; ao extrair entradas, escreva conforme esta estrutura.
• references/samples/: Arquivo de imagens originais e lista de arquivos.

Dependências Externas (Opcionais, Não Bloqueantes)

1. Obrigatório: scripts/extract_palette.py (depende de Pillow). Se Pillow estiver ausente, use valores aproximados a olho e marque 'aproximado' na entrada.
2. Opcional: skill html. O diretório raiz da skill varia conforme o ambiente (no nível do usuário local: ~/.workbuddy/skills/); use Glob para buscar **/html/SKILL.md para localizá-lo; se encontrado, leia sequencialmente <html-skill>/SKILL.md e <html-skill>/references/design/frontend-design.md como regras de design complementares. O script de captura de tela (shot.py) geralmente não existe; não force.
3. Se não encontrar a skill html / script de captura: Entregue e valide diretamente conforme baseline.md + checklist.md, e na descrição da entrega informe honestamente 'não foi feita captura de tela renderizada' ou o método alternativo de verificação usado. É proibido interromper o fluxo B por não encontrar uma skill externa.