🧭 Onboarding da stack C3digital

Como operar projetos com VS Code + Claude Code + GitHub

Guia oficial da equipe: instale o VS Code, ative a extensão do Claude Code e configure sua chave SSH no GitHub para começar a colaborar nos projetos da C3digital.

Começar o passo a passo Ver o time
Passo 1 de 3

Baixar e instalar o VS Code

O Visual Studio Code é o editor padrão da C3digital. Baixe o instalador oficial para o seu sistema operacional.

🪟 Baixar para Windows 🍎 Baixar para Mac

  1. Acesse a página oficial de download

    Clique em um dos botões acima ou acesse code.visualstudio.com/download e escolha o botão correspondente ao seu sistema (Windows, macOS ou Linux).

  2. Execute o instalador

    Windows: abra o arquivo .exe baixado, aceite os termos e mantenha marcadas as opções "Adicionar ao PATH" e "Abrir com Code".
    Mac: abra o .zip, arraste o ícone Visual Studio Code para a pasta Aplicativos.

  3. Abra o VS Code

    Após a instalação, abra o VS Code pelo menu Iniciar (Windows) ou pelo Launchpad (Mac). Você está pronto para o próximo passo.

Passo 2 de 3

Instalar as extensões do VS Code

Duas extensões são obrigatórias na stack da C3digital: o Claude Code, que traz o assistente direto para dentro do VS Code, e o Live Server, que abre suas landing pages no navegador com atualização automática a cada alteração.

  1. Abra a aba de Extensões

    No VS Code, pressione Ctrl+Shift+X (Windows) ou Cmd+Shift+X (Mac) para abrir o painel de extensões.

  2. Instale o Claude Code

    Digite Claude Code na busca e localize a extensão publicada pela Anthropic — ela também está disponível em marketplace.visualstudio.com. Clique em Install e aguarde a instalação finalizar.

    Abrir no Marketplace

  3. Faça login com sua conta Anthropic

    Abra o painel do Claude Code e entre com sua conta Anthropic (plano Pro, Max, Team ou Enterprise) ou uma conta do Claude Console. Nenhuma chave de API é necessária.

  4. Instale o Live Server

    Ainda na aba de Extensões, digite Live Server na busca e localize a extensão do autor Ritwick Dey — ela também está disponível em marketplace.visualstudio.com. Clique em Install.

    Abrir no Marketplace

  5. Use o Live Server para visualizar a página

    Com o projeto aberto no VS Code, clique com o botão direito no arquivo index.html e escolha "Open with Live Server". A página abre no navegador e atualiza sozinha a cada alteração salva.

Passo 3 de 3

Criar chave SSH e configurar no GitHub

A chave SSH permite que seu computador se autentique no GitHub sem precisar digitar usuário e senha a cada push.

  1. Abra um terminal

    Windows: abra o Git Bash (instalado junto com o Git) ou o terminal integrado do VS Code.
    Mac: abra o app Terminal.

  2. Gere a chave SSH

    Rode o comando abaixo trocando o e-mail pelo seu e-mail cadastrado no GitHub. Quando pedir um local para salvar, pressione Enter para aceitar o padrão.

    ssh-keygen -t ed25519 -C "seu-email@c3digital.com.br"

  3. Ative o ssh-agent e adicione a chave

    # inicia o agente
eval "$(ssh-agent -s)"

# adiciona a chave gerada
ssh-add ~/.ssh/id_ed25519

  4. Copie sua chave pública

    Use o comando do seu sistema para copiar a chave direto para a área de transferência.

    # Mac
pbcopy < ~/.ssh/id_ed25519.pub

# Windows (Git Bash)
clip < ~/.ssh/id_ed25519.pub

  5. Adicione a chave no GitHub

    No GitHub, acesse Settings → SSH and GPG keys → New SSH key, dê um título (ex.: "Meu notebook") e cole a chave copiada no campo Key. Confirme em Add SSH key.

    Abrir configurações do GitHub

  6. Teste a conexão

    ssh -T git@github.com

    Se aparecer uma mensagem de confirmação com seu usuário do GitHub, está tudo certo — pode clonar e enviar projetos normalmente.

Mão na massa

Agora é você e o Claudinho

Se você já seguiu os três passos acima, seu ambiente está pronto para a primeira interação de verdade com o Claudinho. O exercício é simples: subir o seu card na seção "Membros do time" e atualizar o projeto — colocando em prática tudo que você aprendeu.

Edite os campos destacados com seus dados antes de copiar

Clone o repositório https://github.com/salexvol/c3d-sistema-landing-page na minha máquina (se eu já tiver clonado, apenas abra a pasta).

Vamos trabalhar no projeto lp-treinamento, que fica em projetos/lp-treinamento/site/.

Adicione meu card na seção "Membros do time que já utilizam a stack" do arquivo index.html, seguindo o mesmo padrão do card do Lucas Bretas dentro de .team__grid: um avatar circular em SVG com fundo laranja (#e97424) e minhas iniciais, meu nome e meu cargo.

Meus dados:
- Nome: [SEU NOME AQUI]
- Cargo: [SEU CARGO AQUI]

Depois de adicionar o card, crie um commit descrevendo a alteração e envie (push) para o repositório remoto, na branch atual.

Nossa equipe

Membros do time que já utilizam a stack

Quem já configurou o ambiente e está colaborando nos projetos com VS Code + Claude Code.

Lucas Bretas

Lucas Bretas

Desenvolvedor Front-End

Francine Nunes

Francine Nunes

CEO