ziqingchuan/landingPageSkill

Compose Landing Page

Converte uma configuração user_config_info.json em um HTML de página de destino educacional completo, correto em termos de negócio, visualmente distinto e executável diretamente no navegador. O fluxo é autocontido, sem dependência de sistemas externos.

Versão do contrato de configuração 3.0, núcleo: conversionFlow é a única fonte da verdade para o fluxo de conversão.

Entrada

Arquivo	Função
user_config_info.json	Configuração real do projeto atual (fornecida pelo usuário)
references/user-config-spec.md	Especificação dos campos: significado, tipo, valores permitidos, valor padrão
references/business-rules.md	Barreiras de negócio: invariantes de comportamento como conversão, agendamento, múltiplos filhos e disciplinas
references/frontend-design.md	Direção visual: inspiração temática, tipografia, layout, critérios anti-template
references/engineering-conventions.md	Barreiras de engenharia: adaptação CJK, modo de renderização i18n, isolamento de nomes, carregamento inicial
references/question-bank.json	Banco de questões padrão: enunciados, opções, mapeamento de categorias por disciplina

Os arquivos de referência já estão embutidos. O usuário só precisa fornecer o user_config_info.json.

Prioridade

Configuração válida → Invariantes de negócio → Requisitos explícitos do usuário → Convenções de engenharia → Direção estética

A configuração é um fato somente leitura: não gerar, não completar, não validar. A ordem das fases e nós em conversionFlow não pode ser ajustada. Em caso de conflito, aponte os campos e regras específicas, sem adivinhar silenciosamente.

Fluxo de Trabalho

Passo 1: Obter configuração

Leia user_config_info.json. Se não for fornecido, pare; se a análise falhar, aponte a posição do erro. Quando project.notes não estiver vazio, considere como preferências complementares do usuário sobre estrutura, tom e estilo visual, impactando diretamente a direção estética do Passo 5, mas sem sobrescrever campos estruturados e chaves de funcionalidade.

Passo 2: Ler especificação dos campos

Leia completamente user-config-spec.md, entenda a semântica de cada campo. Foco especial na ordem de dois níveis de conversionFlow (ordem das fases + ordem dos nós) e nos 5 tipos de item (field / question / verification / booking / calendarSync). Não execute validação de schema.

Passo 3: Estabelecer modelo de negócio somente leitura

Com base na configuração e na especificação, extraia mentalmente o modelo de negócio do projeto atual:

• Disciplinas: disciplina de entrada (project.subject) + disciplinas extras (extraSubjects)
• Fluxo de conversão: ordem das fases e nós em conversionFlow, nó verification indica a fase onde o código de verificação está
• Campos: quais estão ativados, quais são obrigatórios, pertencimento (parent/child), campos condicionais por disciplina
• Chaves: booking / multiChild / multiSubject / syncCalendar / contactMode / flowMode
• Unidades de requisitos prévios: todos os nós field e question na fase lead (na ordem dos items)
• Correspondência do banco de questões: nós com kind=question têm questionId correspondente em question-bank.json, selecione o texto em chinês ou inglês conforme project.language, dados de submissão usam optionId

Passo 4: Ler regras de negócio

Leia completamente business-rules.md e extraia os invariantes de negócio que devem ser cumpridos. As regras são restrições de resultado, não uma lista de módulos — o AI decide a arquitetura da informação baseado nessas restrições.

Passo 5: Formar direção estética

Leia completamente frontend-design.md e siga seu plano de design em duas fases:

1. brainstorm: Color (4-6 hex), Type (2+ papéis tipográficos), Layout (uma frase + wireframe ASCII), Signature (um elemento único)
2. critique: Em relação a project.theme, project.adScene, project.notes, autocrítica — qualquer parte que pareça genérica ou padrão deve ser alterada, confirme a singularidade antes de codificar

Passo 6: Gerar código da página

Primeiro leia engineering-conventions.md para entender as restrições de engenharia acionadas pela configuração atual (unidades CJK, modo de renderização i18n, isolamento de nomes, carregamento inicial). Estas são barreiras de qualidade de código, não alteram o resultado de negócio.

Produza um HTML único completo:

• <head> com meta, title, importação CDN do Google Fonts, <style> inline; <body> com <script> inline
• Sem dependência de ferramentas de build externas, pacotes npm ou arquivos locais
• CSS inline, atenção à especificidade dos seletores; JS inline, implementando todo o fluxo de negócio exigido pela configuração
• Todas as interações executáveis no navegador (submissão de formulário pode ser mock, mas deve ser claramente marcada)
• Elementos decorativos priorizam SVG inline; imagens fotográficas usam links diretos de bibliotecas CDN gratuitas, com restrições de tamanho
• Responsivo até dispositivos móveis, foco visível no teclado, respeita prefers-reduced-motion

Comportamentos de negócio implementados conforme seções 5-11 de business-rules.md, requisitos adicionais de codificação:

• Contêiner de verificação usa data-verification-stage para marcar a fase
• Sem dados reais de horário, use dados de protótipo claramente marcados, não finja estoque
• Campos ocultos, funcionalidades não ativadas e dados de ramos não selecionados não entram no resultado da submissão

Passo 7: Auto-verificação

Antes da entrega, verifique contra a lista de verificação:

• Correção de negócio: Confirme cada item da lista de aceitação em business-rules.md
• Qualidade de design: Plano aprovado por autocrítica, fontes e cores derivadas do plano, Signature único, responsivo, foco de teclado, prefers-reduced-motion, seletores CSS sem anulação
• Estabilidade de engenharia: Confirme cada item da lista de auto-verificação em engineering-conventions.md (unidades CJK, modo de renderização i18n, prefixo de nomes, isolamento de escopo, carregamento inicial)
• Executabilidade do código: Arquivo único pode ser aberto e executado diretamente, sem dependências externas, fontes via CDN

Passo 8: Entrega

Salve como arquivo no diretório de trabalho do usuário, nome baseado em project.name. Explique em linguagem natural breve: qual configuração foi usada, quais capacidades principais foram implementadas, elemento Signature, quais dados são protótipo e precisam ser substituídos.

Modos de falha

Situação	Tratamento
user_config_info.json não fornecido	Pare, informe que o arquivo de configuração é necessário
Falha na análise JSON	Aponte a posição do erro, não adivinhe a correção
Conflito entre configuração e regras de negócio	Aponte os campos e regras específicas, peça confirmação ao usuário
conversionFlow com tipo desconhecido	Aponte o nó específico, não pule silenciosamente
Dados reais necessários mas ausentes	Use dados de protótipo claramente marcados, não finja que são reais
Solicitação do usuário conflita com a configuração	Processe conforme cadeia de prioridade e explique ao usuário