Travel Guidebook Maker
Motor de geração de guias de viagem completo, da pesquisa ao livro — zero ilustrações de IA, zero emoji, puro CDN. Combinando Tabler Icons + SVG inline + estética de design Claude, crie guias de viagem em PDF com design e personalidade.
Filosofia de Design
O gosto editorial da Monocle + a narrativa visual da DK + a profundidade informacional da Lonely Planet + a estética acolhedora do Claude
Este não é um manual de navegação frio, mas um companheiro de viagem com alma — sobre um fundo quente cor de pergaminho, use fontes serifadas para contar a história do destino, use sistemas de ícones para marcar informações funcionais e use elementos decorativos para criar uma sensação editorial.
Ideia central: Tipografia é design. Sem depender de imagens geradas por IA ou fotos, usando hierarquia de fontes, sistema de cores funcionais, SVG inline, pseudo-elementos CSS, para que o guia em si tenha um design.
Fluxo Geral
Estágio 0 Preparação do Ambiente → Estágio 1 Confirmação de Requisitos
→ Estágio 2 Pesquisa Profunda [5 agentes explore em paralelo]
→ Estágio 3 Arquitetura do Roteiro
→ Estágio 4 Redação do Conteúdo [agente general-purpose dedicado]
→ Estágio 5 Entrega e Verificação HTML → Estágio 6 Exportação PDF
O Estágio 0 detecta automaticamente o ambiente Node.js + Playwright; o Estágio 2 acelera a coleta de informações com pesquisa paralela; o Estágio 4 usa um agente dedicado em contexto limpo para escrever HTML garantindo consistência; o Estágio 5 é o ponto de verificação HTML — o usuário confirma a satisfação antes de prosseguir para o Estágio 6 e exportar o PDF.
Estágio 0: Preparação do Ambiente
Antes de iniciar a produção do guia de viagem, garanta que o ambiente de exportação PDF esteja pronto.
Verifique cada item na seguinte ordem. Se qualquer etapa falhar, pare e avise o usuário:
1. Node.js
node --version
- ✅ v18.x ou superior → Continuar
- ❌ Comando não encontrado → Parar, avisar para instalar: https://nodejs.org/
2. package.json
ls package.json
- ✅ Existe → Continuar
- ❌ Não existe →
npm init -y
3. Playwright
node -e "require('playwright')"
- ✅ Sem erro → Continuar
- ❌ Com erro →
npm install playwright && npx playwright install chromium
4. html2pdf.mjs
Já incluído em scripts/html2pdf.mjs, será copiado para o diretório de trabalho no Estágio 6.
5. MCP de Mapas Amap (Opcional, Aprimoramento)
Tente chamar a ferramenta MCP do Amap para verificar a disponibilidade:
chamar maps_whether("{cidade_destino}")
- ✅ Retorna dados meteorológicos → Marcar
AMAP_AVAILABLE = true - ❌ Ferramenta não existe ou erro → Marcar
AMAP_AVAILABLE = false
O MCP do Amap é uma camada de aprimoramento — quando não disponível, o guia é gerado normalmente, apenas os dados precisos são substituídos por estimativas do LLM.
Aviso ao usuário não configurado (mencionar apenas uma vez, sem bloquear o fluxo):
"💡 Detectado que o MCP de Mapas Amap não está configurado. O guia ainda será gerado normalmente, mas dados de distância/trânsito/clima usarão valores estimados. Para dados precisos, adicione
@amap/amap-maps-mcp-serverna configuração MCP."
Confirmação de Ambiente Pronto
Após todas as verificações passarem, exiba:
"✅ Ambiente pronto (Node.js {versão} + Playwright + Chromium{se Amap disponível adicionar: + MCP Mapas Amap}). Iniciando produção do guia."
Estágio 1: Confirmação de Requisitos
Confirme com o usuário os seguintes parâmetros (não pergunte o que pode ser inferido da instrução, pergunte apenas o que não puder ser inferido):
Recebido, preparando para criar o guia de viagem. Confirme as seguintes informações:
- Nome do Roteiro: «{inferido da instrução}», pode ser?
- Tipo de Viagem: Viagem de Carro / Caminhada / Passeio Urbano / Misto?
- Público-Alvo: Turismo Cultural Aprofundado / Turismo Relaxado / Turismo de Aventura e Desafio?
- Dias Totais: {dias inferidos}, correto?
- Informações Personalizadas: Precisa adicionar informações pessoais/da equipe na capa ou no final?
Responda diretamente com os itens a modificar. Se estiver tudo certo, começarei.
Modo Rápido: Quando o usuário já forneceu informações suficientes, pule a confirmação e execute diretamente.
Valores Padrão: Tipo de Viagem = Viagem de Carro, Público-Alvo = Turismo Cultural Aprofundado, Dias = inferido do roteiro, Informações Personalizadas = nenhuma.
Roteamento Inteligente
Após a confirmação dos requisitos, decida o Estágio inicial com base na entrada do usuário:
| O que o usuário forneceu | Pular para | Descrição |
|---|---|---|
| Apenas destino/dias | Estágio 2 | Fluxo completo padrão |
| Já possui arquivo de itinerário (Markdown/texto) | Estágio 3 | Ler itinerário, extrair arquitetura, pular pesquisa |
| Já possui itinerário + "já confirmado/sem necessidade de pesquisa" | Estágio 4 | Ir direto para redação e formatação |
| Já possui guia HTML | Estágio 5 | Ir direto para verificação, pode modificar e exportar PDF |
Critério de decisão: Se o usuário anexou uma referência @nome_do_arquivo, disse explicitamente "itinerário confirmado", "não precisa de pesquisa", etc. Em caso de dúvida, siga o fluxo completo, mas pergunte ativamente: "Precisa que eu faça a pesquisa ou posso começar a escrever diretamente?"
Estágio 2: Pesquisa Profunda (Sub-Agentes Paralelos)
A pesquisa para o guia de viagem precisa cobrir simultaneamente informações práticas e profundidade cultural. Use agentes explore paralelos para acelerar a pesquisa — cada direção um agente independente, partindo simultaneamente, sem bloqueio mútuo.
Arquitetura de Pesquisa Paralela
Agente Principal Pool de agentes explore (paralelo)
┌──────────┐ ┌─────────────────────────┐
│ Construir │ ── background ──→│ research-transport │
│ prompt │ ── background ──→│ research-attractions │
│ para 5+1 │ ── background ──→│ research-food │
│ agentes │ ── background ──→│ research-culture │
│ │ ── background ──→│ research-practical │
│ │ ── background ──→│ research-spatial (Amap) │
│ │ └─────────────────────────┘
│ Aguardar │ ←── Notificação automática ←── (cada agente conclui)
│ Coletar e │ ── read_agent ──→ Obter resultado de cada agente
│ Consolidar │
│ Relatório │
└──────────┘
research-spatialsó é iniciado quandoAMAP_AVAILABLE = true. Quando não disponível, apenas 5 agentes são iniciados.
Divisão de Agentes
Use a ferramenta task, com agent_type: "explore", mode: "background", iniciando simultaneamente 5+1 agentes:
| Nome do Agente | Direção de Pesquisa | Exemplos de Palavras-chave de Busca (chinês + inglês) |
|---|---|---|
research-transport | Rotas de Transporte | "{partida} para {destino} trem/carro horário preço", "{destination} transport" |
research-attractions | Atrações Principais | "{destino} atrações imperdíveis ingresso horário TOP10", "{destination} attractions" |
research-food | Gastronomia Local | "{destino} comida típica restaurantes recomendados rua gastronômica preço médio", "{destination} local food" |
research-culture | História e Cultura | "{destino} história cultura tradição folclore dialeto", "{destination} history culture" |
research-practical | Informações Práticas | "{destino} {mês} clima orçamento segurança dicas", "{destination} travel tips" |
Para viagem de carro, adicione um 7º agente
research-road(condições da estrada, postos de gasolina, variação de altitude).
Agente de Dados Espaciais Amap (quando AMAP_AVAILABLE = true)
O 6º agente research-spatial, dedicado a coletar dados do mapa Amap:
Você é um especialista em coleta de dados espaciais. Use as ferramentas MCP do mapa Amap para coletar os seguintes dados.
Destino: {destino}
Lista de atrações conhecidas: {todos os nomes de atrações extraídos da confirmação de requisitos}
## Tarefa 1: Dados POI das Atrações
Para cada atração, chame maps_text_search("{nome_da_atração}"), extraia:
- ID POI, Nome, Endereço Completo, Latitude/Longitude, Avaliação, Horário de Funcionamento, Telefone de Contato
## Tarefa 2: Descobertas ao Redor
Para cada atração principal (atração principal de cada dia), chame maps_around_search:
- Palavras-chave="restaurante|petiscos", location={coordenadas_da_atração}, radius=1000 → top 5 restaurantes próximos
- Palavras-chave="loja de conveniência|farmácia", location={coordenadas_da_atração}, radius=500 → instalações de emergência
## Tarefa 3: Previsão do Tempo
maps_whether("{nome da cidade destino ou adcode}")
## Tarefa 4: Geocodificação
Para todos os nomes de lugares, chame maps_gep para obter coordenadas precisas, para uso no planejamento de rota do Estágio 3
## Formato de Saída
### Resumo POI das Atrações
| Atração | Endereço | Latitude/Longitude | Avaliação | Horário de Funcionamento |
|---------|----------|--------------------|-----------|---------------------------|
| ... | ... | ... | ... | ... |
### Descobertas ao Redor
#### Ao redor de {nome_da_atração}
| Nome | Tipo | Distância | Avaliação |
|------|------|-----------|-----------|
| ... | ... | ... | ... |
### Previsão do Tempo
| Data | Clima | Temperatura | Vento |
|------|-------|-------------|-------|
| ... | ... | ... | ... |
Para viagem de carro, adicione um 6º agente
research-road(condições da estrada, postos de gasolina, variação de altitude).
Modelo de Prompt do Agente
O prompt de cada agente segue esta estrutura:
Você é um especialista em pesquisa de viagem, responsável pela pesquisa de 【{direção}】.
## Parâmetros da Tarefa
- Destino: {destino}
- Local de Partida: {partida}
- Data: {data específica}
- Dias: {N} dias
- Tipo de Viagem: {carro/trem/misto}
## Requisitos de Pesquisa
1. Use bash para executar curl ou web_fetch para obter as seguintes URLs (tente uma a uma, pule se falhar):
- {lista de URLs predefinidas, 3-5 sites relevantes}
2. Extraia pontos de dados principais de cada fonte
3. Se todas as URLs falharem, organize com base no conhecimento existente, marcando com "⚠️ Conhecimento do Modelo"
## Formato de Saída (Seguir Rigorosamente)
### {nome_da_direção}
#### Principais Descobertas
- Descoberta 1: {dados específicos} (Fonte: {URL})
- Descoberta 2: ...
#### Lista de Recomendações
| Nome | Detalhes | Preço | Observações |
|------|----------|-------|-------------|
| ... | ... | ... | ... |
#### Fontes
- {URL1}
- {URL2}
#### Atualização dos Dados
- As informações acima foram obtidas em {data atual}, recomenda-se verificar preços e horários de funcionamento antes da viagem
Coleta e Consolidação de Resultados
Após todos os agentes concluírem:
- Obtenha os resultados de cada um com
read_agent - Consolide em um relatório de pesquisa unificado, por capítulo de direção
- Marque a fonte de cada ponto de dados (URL ou "Conhecimento do Modelo")
- Se algum agente falhar, o agente principal complementa o conhecimento LLM para essa direção
Estratégia de Degradação
| Cenário | Tratamento |
|---|---|
| Ferramenta task não disponível | Reverter para modo serial: agente principal web_fetch por direção |
| Algum agente timeout/falha | Agente principal complementa com conhecimento LLM para a direção falha |
| research-spatial falha | Distância/tempo estimados por LLM, marcar com prefixo "aprox." |
| Completamente sem internet | Modo offline: totalmente baseado em conhecimento LLM, marcar com "⚠️ Recomenda-se verificar antes da viagem" |
Requisitos de Qualidade da Pesquisa
- Modo paralelo: cada agente pelo menos 3 fontes válidas, total ≥ 15 fontes
- Modo serial: total de fontes ≥ 20 (para curta duração ≤3 dias: ≥ 10 fontes)
- Modo offline: o mais rico possível, marcar dados com data de atualização incerta
- Priorizar: sites oficiais de turismo, blogueiros de viagem experientes, mídia local, fóruns profissionais
- Informações de preço devem indicar a data de validade
- Fatos principais devem ser verificados de forma cruzada em pelo menos 2 fontes independentes
Estágio 3: Arquitetura do Roteiro
Gere a estrutura do itinerário diário com base nos resultados da pesquisa. Quando os dados espaciais Amap estiverem disponíveis, use o planejamento de rota real em vez da estimativa do LLM.
Planejamento de Rota Amap (quando AMAP_AVAILABLE = true)
O agente research-spatial do Estágio 2 já forneceu as coordenadas precisas de todas as atrações. Com base nisso, o agente principal chama a API de planejamento de rota Amap:
Para pares de atrações consecutivas no itinerário diário, escolha a API com base no tipo de viagem:
Tipo de Viagem │ API │ Descrição
─────────┼──────────────────────────────────────┼──────────
Carro │ maps_direction_driving(coordA, coordB) │ Distância/tempo/pedágio
Passeio Urbano│ maps_direction_walking (≤3km) │ Distância/tempo a pé
│ maps_direction_transit_integrated (>3km)│ Opções de metrô/ônibus
Trecho de Bicicleta│ maps_bicycling │ Rota/distância de bicicleta
Movimento entre cidades│ maps_direction_transit_integrated │ Opções de trem/ônibus
Todos os modos│ maps_distance │ Verificação da distância total diária
Quando Amap não estiver disponível, use conhecimento LLM para estimar distância e tempo, marcando com prefixo "aprox." no guia.
Estágio 3.1: Gate de Viabilidade do Itinerário (Feasibility Gate)
Princípio Fundamental: O itinerário é um planejamento sob restrições físicas, não uma combinação livre de atrações.
Antes de escrever qualquer itinerário diário, deve-se passar pela seguinte verificação — se não passar, force a divisão ou remoção de atrações.
Regra 1: Fórmula de Viabilidade de Ida e Volta no Mesmo Dia
Tempo total disponível = Horário de partida até horário de retorno (geralmente 12h, áreas de planalto 10h)
Fórmula de Verificação:
Ponto de Partida → Atração A (tempo de ida) × 2 ← Transporte de ida e volta
+ Soma dos tempos de visita de cada atração
+ Soma dos tempos de transporte entre atrações
+ Tempo de buffer (1h)
≤ Tempo total disponível
Não satisfaz → Deve ser dividido em vários dias ou remover a atração mais distante
Ferramenta de Cálculo (Prioridade):
- AMAP_AVAILABLE = true → Chame
maps_direction_driving/maps_distancepara obter tempo real - AMAP_AVAILABLE = false → Use conhecimento LLM para estimar e marcar "aprox." no guia
Regra 2: Isolamento Obrigatório de Atrações Fora da Cidade
| Distância de ida do ponto de partida | Regra Obrigatória |
|---|---|
| ≤ 80km | Pode estar no mesmo dia que outras atrações |
| 80–150km | No mesmo dia, só pode ter esta atração, sem outros destinos |
| > 150km | Obrigatoriamente um dia independente, ou providenciar hospedagem ao longo do caminho |
Armadilha Típica: Saindo de Lhasa, Yamdrok Lake (100km) pode ser um passeio de um dia separado; Tashilhunpo Mosteiro / Palácio Pelkor em Shigatse (280km) absolutamente não pode ser combinado com qualquer atração em Lhasa ou Yamdrok no mesmo dia.
Regra 3: Restrições para Destinos Especiais
Áreas de Planalto (altitude 3500m+) :
| Dias após a chegada | Atividades Permitidas | Proibido |
|---|---|---|
| Dia 1 | Caminhada ao redor do hotel, ≤1h | Todas as visitas a atrações |
| Dia 2 | Atrações planas no centro da cidade, ≤3h | Atrações com altitude 4000m+ |
| Dia 3+ | Visita normal ao centro da cidade | Atrações com altitude 4500m+ recomendado apenas a partir do Dia 4 |
| Dia 4+ | Pode ir a altas altitudes (Yamdrok Lake 4441m) | — |
| Dia 5+ | Pode tentar altitudes muito altas (Lago Namtso 4718m) | Ainda precisa de oxigênio |
Execução Obrigatória: No Dia 1 de um itinerário de planalto, não deve haver nenhuma atração paga. Se violar, mova automaticamente a atração para o dia seguinte.
Regra 4: Lista de Verificação Pós-Geração
Após gerar o rascunho do itinerário diário, deve-se verificar cada item:
□ A quilometragem total do dia (ida e volta) está dentro do viável?
□ Todas as atrações estão na mesma região razoável? (Não pode atravessar várias cidades)
□ Existe um "salto de longa distância" implícito? (Ex: A→B→C parecem adjacentes, mas na verdade são um desvio)
□ Itinerário de planalto: Violou as regras de adaptação à altitude?
□ Passeio de um dia que inclui carro fretado/próprio: Tem tempo suficiente para vistas/paradas (≥2h)?
□ O tempo de retorno está suficientemente reservado? (Retornar antes de escurecer)
Se qualquer item não passar → Alerta Vermelho, replaneje o itinerário daquele dia antes de prosseguir para o Estágio 4.
Design de Ritmo
- Alternância: Dia de direção longa + Dia de visita aprofundada alternados
- Clímax: Os destinos mais essenciais no meio do itinerário (Dia 3-5)
- Tempo de Buffer: A cada 3-4 dias, inclua um "Dia Livre" ou "Dia de Descanso"
- Curva Emocional: Empolgação da partida → Período de adaptação → Clímax → Reflexão → Tristeza da despedida
Estrutura do Itinerário Diário
Dia X: [Ponto de Partida] → [Ponto de Chegada]
├─ Quilometragem: XXkm (Medido pelo Amap / Estimado pelo LLM)
├─ Tempo estimado: Xh (incluindo tempo de visita)
├─ Opções de Transporte (quando Amap disponível):
│ ├─ Atração A→Atração B: Caminhada 12min / 0,9km
│ ├─ Atração B→Atração C: Metrô linha 2, 3 paradas / 15min
│ └─ Atração C→Hotel: Ônibus 537 / 25min
├─ Clima (quando Amap disponível): ☁️ Nublado 26°C
├─ Destaque de Hoje: Resumo em uma frase
├─ Paradas Obrigatórias: 2-3 selecionadas (incluindo avaliação Amap)
├─ Descobertas ao Redor (quando Amap disponível): Restaurantes/cafés com alta avaliação perto das atrações
├─ Recomendações Gastronômicas: 1-2
├─ Recomendações de Hospedagem: 1-2
└─ Dicas: Incluindo sugestões de clima + sugestões de transporte prático
Campos marcados com "quando Amap disponível" são omitidos ou substituídos por estimativas LLM quando
AMAP_AVAILABLE = false.
Confirmação do Usuário
Apresente a estrutura do itinerário para confirmação ou modificação. Após a confirmação, prossiga para o Estágio 4.
Modo Rápido: Pule quando o usuário disser "escreva direto, sem confirmação".
Estágio 4: Redação e Formatação do Conteúdo
Esta é a fase central do guia — transformar a pesquisa e a arquitetura em um guia HTML belamente projetado.
Seleção do Modo de Execução
Com base nas ferramentas disponíveis, selecione automaticamente o modo ideal:
| Condição | Modo | Descrição |
|---|---|---|
| Ferramenta task disponível | Modo Agente Dedicado (Recomendado) | Inicie 1 agente general-purpose em contexto limpo para escrever todo o HTML |
| task não disponível | Modo Escrita Direta pelo Agente Principal | Agente principal escreve em lotes usando heredoc (método tradicional) |
Modo Agente Dedicado (Recomendado)
Vantagem Principal: O agente de escrita HTML tem um contexto limpo — sem ruído do processo de pesquisa, conversa histórica, discussão de rota. Do início ao fim, estilo completamente uniforme.
Inicie 1 agente general-purpose (mode: "background"), passando o seguinte conteúdo completo no prompt:
Você é um especialista em escrita de guias de viagem em HTML. Gere um guia HTML completo em um único arquivo.
## Parâmetros do Guia
- Nome do Roteiro: {nome}
- Nome do Arquivo: {nome}_guidebook.html
- Data da Viagem: {data}
- Dias: {N} dias
- Tipo de Viagem: {tipo}
## Especificações CSS (Copiar completo o conteúdo de references/layout-css.md)
{layout-css.md completo}
## Modelo de Capítulo (Copiar completo o conteúdo de references/chapter-templates.md)
{chapter-templates.md completo}
## Dados da Pesquisa (Relatório Consolidado do Estágio 2)
{relatório de pesquisa completo}
## Arquitetura do Roteiro (Versão Confirmada do Estágio 3)
{estrutura do itinerário diário}
## Estilo de Escrita
Impulsionado por três camadas de necessidade:
- Onde (Where) — Preciso e claro: nomes de lugares, direções, quilometragem e tempo precisos
- O quê (What) — Filtrar pelo usuário: 2-3 paradas obrigatórias por dia
- Porquê (Why) — Dar significado: Incorporar histórias e perspectivas locais
## Requisitos Técnicos
1. Use heredoc para escrever em lotes (cat > para o primeiro lote, cat >> para os subsequentes), aspas simples << 'HTMLEOF'
2. Substitua ¥ por ¥, — por —, → por →, ° por °
3. Após cada lote, use wc -c para confirmar o crescimento do arquivo
4. Total de lotes: 3-5, divididos por parágrafos lógicos
5. Todo CSS embutido em <style>, todo SVG inline, zero imagens externas
6. O último lote deve incluir as tags de fechamento </body></html>
Enquanto o agente principal espera: Pode fazer outros trabalhos leves ou avisar o usuário "Gerando HTML, previsto 2-3 minutos".
Após a conclusão do agente:
read_agentpara obter o resultado, confirmar que o arquivo HTML foi geradowc -cpara verificar o tamanho do arquivo (itinerário de 5 dias deve ter 50-80KB)- Ir para o Estágio 5
Modo Escrita Direta pelo Agente Principal (Degradação)
Quando a ferramenta task não estiver disponível, o agente principal usa heredoc para escrever em lotes.
Estrutura de Capítulos
O guia adota uma estrutura de cinco partes. Leia references/chapter-templates.md para obter o modelo HTML completo de cada capítulo:
- Antes da Partida: Capa / Visão Geral da Viagem / Preparação Pré-Viagem
- Itinerário Diário: Dia a Dia (corpo principal) — Cartões de agenda, descrição da rota, paradas obrigatórias, comida, hospedagem, dicas, área de notas
- Aprofundamento no Destino: Apresentação aprofundada de 2-3 destinos importantes
- Apêndice Prático: Contatos de emergência, idiomas úteis, detalhamento de custos, playlist recomendada
- Contracapa: Citação de viagem + informações personalizadas + espaço para reflexão de viagem
Especificações de Formatação
O design visual do guia herda a estética de tons quentes do Claude. Leia references/layout-css.md para obter as especificações CSS completas, cobrindo:
- Recursos externos (apenas Google Fonts + CDN do Tabler Icons)
- Layout da página (A4, max-width 680px)
- Sistema de fontes (Noto Serif SC / Noto Sans SC / JetBrains Mono)
- Esquema de cores (Fundo Parchment + Terracotta + Sistema de cores funcionais)
- Elementos decorativos (Bússola, linhas de separação, emblemas DAY, cantos de cartão, capitular)
- Controle de quebra de página (Capa exclusiva, nova página para Day, cartões não quebram)
- Adaptação para impressão (manter fundo de tons quentes)
Estilo de Escrita
Escrita impulsionada por três camadas de necessidade:
- Onde (Where) — Preciso e claro: nomes de lugares, direções, quilometragem e tempo devem ser precisos, use descrições corporificadas ("à esquerda", "200 metros à frente")
- O quê (What) — Filtrar pelo usuário: cada destino recomende apenas 2-3 paradas obrigatórias, marque a prioridade com "Obrigatório/Opcional/Pode ir se tiver tempo"
- Porquê (Why) — Dar significado: cada lugar diga "por que vale a pena", incorpore histórias e perspectivas locais, use linguagem literária para descrever paisagens
Escrita com Aprimoramento Emocional (Impulsionada por Dados Amap)
Quando os dados espaciais Amap estiverem disponíveis, aplique os seguintes quatro modos de aprimoramento emocional:
1. Narrativa de Distância — Transforme distâncias precisas em experiências perceptíveis:
- ≤500m → "poucos minutos a pé" + o que se pode ver/cheirar/ouvir no caminho
- 500m-2km → "distância de uma caminhada" + descrição da paisagem ao longo do caminho
- >2km → sugestão de transporte + paisagem da janela
- Exemplo: "Saindo do Portão Sul da Torre da Garça Amarela, vire à esquerda e caminhe 600 metros pela Wuluo Road — o tempo de uma música — e você chegará à Hubu Alley."
2. Surpresas ao Redor — Apresente POIs com alta avaliação descobertos pelo Amap (que o LLM pode não conhecer):
- Apresente com um cartão "💡 Descoberta de Viagem"
- Inclua: Nome, Distância, Avaliação, um motivo de recomendação
3. Percepção do Tempo — Clima + distância + período de tempo = sugestão de experiência específica:
- Exemplo: "Hoje 26°C nublado — clima perfeito para caminhar na Ponte do Rio Yangtze. A ponte tem 1,6km, caminhando sem pressa leva cerca de 22 minutos. Sugiro sair às 16:00, chegar ao meio da ponte bem a tempo do pôr do sol."
4. Sensação de Segurança — Incorpore instalações próximas nas dicas diárias:
- Exemplo: "A 200m da acomodação de hoje há uma loja de conveniência FamilyMart (24h). A farmácia mais próxima fica a 400m na Wuluo Road."
Quando Amap não estiver disponível, esses quatro modos são omitidos automaticamente — o guia ainda terá narrativa cultural completa e dados estimados pelo LLM.
Geração de HTML (Estratégia de Lotes Heredoc)
Gere um arquivo HTML completo em um único arquivo, com todo CSS embutido em <style>, toda decoração SVG inline, zero imagens externas.
A estratégia heredoc abaixo se aplica à execução interna do agente dedicado e ao modo degradado de escrita direta pelo agente principal.
Estratégia de Escrita de Arquivos Grandes
O HTML do guia geralmente tem 50-80KB (itinerário de 5 dias com cerca de 30 páginas), excedendo o limite único da ferramenta write/create. Use a estratégia de heredoc em lotes com acréscimo:
# Lote 1: Head HTML + CSS completo (tag <style>)
cat > {nome}_guidebook.html << 'HTMLEOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>...</head>
<style>/* Todo CSS, conforme references/layout-css.md */</style>
<body>
HTMLEOF
# Lote 2: Capa + Visão Geral + Preparação Pré-Viagem
cat >> {nome}_guidebook.html << 'HTMLEOF'
<div class="cover">...</div>
<div class="overview">...</div>
<div class="preparation">...</div>
HTMLEOF
# Lotes 3-N: Itinerário Diário (um lote por dia ou a cada 2 dias)
cat >> {nome}_guidebook.html << 'HTMLEOF'
<div class="day-chapter">...</div>
HTMLEOF
# Último lote: Aprofundamento + Apêndice + Contracapa + Tags de fechamento
cat >> {nome}_guidebook.html << 'HTMLEOF'
<div class="deep-dive">...</div>
<div class="appendix">...</div>
<div class="back-cover">...</div>
</body></html>
HTMLEOF
Atenções Principais:
- Use heredoc com aspas simples (
<< 'HTMLEOF') para evitar expansão de variáveis do shell - Substitua o símbolo
¥por¥no heredoc para evitar problemas de codificação - Após cada lote, use
wc -cpara confirmar que o arquivo cresceu normalmente - Controle o total de lotes em 3-5, divididos por parágrafos lógicos (não quebre no meio de tags HTML)
Estágio 5: Entrega e Verificação HTML
Conteúdo da Entrega
- Arquivo HTML:
{nome_do_roteiro}_guidebook.html(arquivo único, zero dependências externas) - Relatório de Trabalho: Registro do processo de produção (modelo em
references/report-template.md)
Ponto de Verificação HTML
Após a conclusão do HTML, o usuário deve primeiro verificar antes de pular para o PDF:
"Guia HTML gerado:
{nome_do_arquivo}_guidebook.html. Por favor, abra no navegador para verificar o conteúdo e a formatação. Quando estiver satisfeito, me avise que exportarei o PDF. Se precisar de ajustes, me diga o que precisa ser alterado."
- Usuário disser "OK / Satisfeito / Exportar PDF" → Ir para o Estágio 6
- Usuário disser "Modificar xxx" → Voltar ao Estágio 4, modificar e reexibir para verificação
Estágio 6: Exportação PDF
Só execute após o usuário confirmar a satisfação com o HTML no Estágio 5.
Etapas de Execução
1. Preparar o Script de Exportação
Certifique-se de que o diretório de trabalho tenha o arquivo html2pdf.mjs. Procure:
# Primeiro, verifique o diretório atual
ls html2pdf.mjs 2>/dev/null || \
# Procure o script bundled no diretório da skill
find ~/.agents/skills/travel-guidebook -name "html2pdf.mjs" 2>/dev/null | head -1 | xargs -I{} cp {} ./html2pdf.mjs || \
find . -path "*/travel-guidebook/scripts/html2pdf.mjs" 2>/dev/null | head -1 | xargs -I{} cp {} ./html2pdf.mjs
Se ainda não encontrar, crie com o seguinte script mínimo:
// html2pdf.mjs — Exportação A4 PDF com Playwright
import { chromium } from 'playwright';
import { resolve } from 'path';
const html = resolve(process.argv[2]);
const pdf = html.replace(/\.html$/, '.pdf');
const b = await chromium.launch();
const p = await b.newPage();
await p.goto('file://' + html, { waitUntil: 'networkidle' });
await p.waitForTimeout(2000);
await p.pdf({ path: pdf, format: 'A4', margin: { top: '2cm', right: '1.8cm', bottom: '2.5cm', left: '1.8cm' }, printBackground: true });
await b.close();
console.log('PDF salvo:', pdf);
2. Executar a Exportação
node html2pdf.mjs {nome_do_arquivo}_guidebook.html
3. Verificar e Entregar
Verifique se o PDF existe e exiba o tamanho, avise o usuário para abrir e visualizar:
"✅ Guia PDF exportado:
{nome_do_arquivo}_guidebook.pdf({número de páginas} páginas, {tamanho do arquivo})."
Parâmetros PDF
| Parâmetro | Valor | Descrição |
|---|---|---|
| Papel | A4 | Tamanho padrão de impressão |
| Margem Superior | 2cm | |
| Margem Inferior | 2.5cm | Espaço para numeração de página |
| Margens Laterais | 1.8cm | |
| Rodapé | Numeração de página centralizada | JetBrains Mono 9pt |
| Estratégia de Espera | networkidle + 2s | Garantir carregamento de recursos CDN |
| Fundo | printBackground: true | Preservar textura quente de pergaminho |
Plano Alternativo
Se o Playwright falhar, oriente a impressão manual pelo navegador: Abra o HTML no Chrome/Edge → Cmd/Ctrl+P → Salvar como PDF