Markup
Entrada única em HTML
O index.html reúne a estrutura da página, as quatro seções, os alvos de texto bilíngue e o diagrama de publicação em SVG em um único arquivo.
Stack principal
O guia é intencionalmente mínimo e nativo do navegador, assim como os projetos que documenta.
Estilo
Estilos inline
Todo o layout, tipografia e a navegação superior fixa com seletor de idioma vivem em uma única folha de estilo inline, mantendo o guia totalmente autocontido.
i18n
Dicionário de tradução customizado
Um objeto JavaScript mapeia cada chave data-i18n para strings em inglês e português. Trocar de idioma reescreve o innerHTML dos elementos correspondentes e salva a escolha no localStorage.
Modelo de interação
Ler, instalar, construir, publicar
O leitor rola pelas quatro seções em ordem: instalar o Claude Code e o Codex, iniciar um primeiro projeto, publicá-lo no GitHub e na Vercel, e onde aprender mais.
Modelo de runtime
Sem framework ou ferramenta de build
O projeto não possui manifesto de pacotes, bundler ou camada de API. Tudo roda como um arquivo estático servido diretamente, com manipulação direta do DOM para tradução e persistência de idioma.
Diagrama de publicação
Fluxo em SVG feito à mão
A seção Publique inclui um diagrama SVG inline (Pasta Local → GitHub → Vercel) construído com markup e CSS puros, sem biblioteca externa de diagramas.
Como roda
O guia é uma única página estática que recebe o leitor em português por padrão e permite trocar de idioma a qualquer momento.
1
O navegador carrega a base estática
index.html renderiza a barra superior fixa com a marca sugiro.ai e o seletor de idioma, seguida pelas quatro seções de conteúdo dentro do main.
2
O objeto de traduções inicializa ao carregar
Um script lê o idioma salvo no localStorage (com português como padrão) e aplica o dicionário correspondente a cada elemento data-i18n.
3
O leitor instala as ferramentas
A seção Instalação percorre os comandos npm install do Claude Code e do Codex no Mac, os pré-requisitos de Node.js e notas específicas para Windows.
4
O leitor constrói e publica algo
A seção Construa alguma coisa sugere um primeiro projeto e linka a ferramenta Prompt Builder, e a seção Publique percorre Git, GitHub e deploy na Vercel com o diagrama de fluxo inline.
5
O leitor explora mais
As seções Aprenda mais e Meus projetos linkam para pessoas a seguir, recursos externos e a vitrine de AI Projects do sugiro.ai.
Mapa da arquitetura
Esta é uma das arquiteturas mais simples deste conjunto de projetos: um único arquivo HTML com tudo inline.
Arquivos principais
index.htmlEstrutura da página, as quatro seções, estilos inline, o diagrama SVG de publicação e o script de traduções.
favicon-cg.pngO favicon do site e a imagem de Open Graph.
Análise da Arquitetura
index.html favicon-cg.png
Não há separação entre markup, estilo e comportamento; o guia inteiro é mantido propositalmente em um único arquivo para máxima portabilidade.
Conteúdo e runtime
A página roda inteiramente no navegador e persiste apenas a preferência de idioma do leitor; não há backend nem armazenamento remoto.
Guiado por conteúdo
Quatro seções estáticas
Instalação: comandos de setup e links de documentação do Claude Code e do Codex.
Construa alguma coisa: um fluxo mínimo de primeiro projeto e um link para a ferramenta Prompt Builder.
Publique: um passo a passo de Git, GitHub e Vercel com diagrama de fluxo inline.
Aprenda mais e Meus projetos: pessoas a seguir, recursos externos e um link para a vitrine de AI Projects do sugiro.ai.
Modelo de persistência
Apenas a escolha de idioma é salva
O idioma escolhido (inglês ou português) é salvo no localStorage e restaurado na próxima visita.
Nenhum dado de leitor, formulário ou analytics de uso é coletado.
Não há sistema de contas, banco de dados ou chamadas de API de qualquer tipo.
O guia continua sendo uma página de referência somente leitura.
Comandos para rodar
Não existe instalação via package manager nem workflow de framework.
Uso local
open index.html # ou python -m http.server
Você pode abrir o arquivo diretamente ou servir a pasta com um servidor estático mínimo se preferir URLs locais em vez de file://.
Ambiente esperado
O que o projeto precisa
Nenhuma etapa de npm install.
Nenhuma variável de ambiente.
Nenhuma API key.
Nenhum serviço de backend ou dependência externa de runtime.
Resumo final
AI Coding Guide é uma página de referência bilíngue e leve construída com HTML, CSS e JavaScript puros, usando um dicionário de tradução customizado e um diagrama de fluxo inline para documentar o próprio ciclo de aprendizado do autor com o Claude Code e o Codex.