Links Úteis
Guia de referência com links organizados por categoria.
Sumário
- Chats de IA
- Ferramentas de IA para Código
- Ferramentas de Desenvolvimento
- Controle de Versão
- Editores de Código Locais
- Sites Estáticos (Frameworks)
- Hospedagem e Deploy
- Referência de Cores e Design
- Galerias de Inspiração
- Formatação de Imagens
- Auditoria e Acessibilidade
- Acesso via API (Roteadores de IA)
- Recursos Educacionais
1. Chats de IA
Assistentes de IA para conversar e tirar dúvidas.
Gratuitos
| Ferramenta |
Link |
Origem |
Modelo |
Características |
| ChatGPT |
chat.openai.com |
🇺🇸 EUA |
GPT-5.3, GPT-5.5 |
O mais popular, versão gratuita disponível |
| Claude |
claude.ai |
🇺🇸 EUA |
Claude Sonnet 4.6, Opus 4.8 |
Ótimo para código e análises longas |
| Gemini |
gemini.google.com |
🇺🇸 EUA |
Gemini 3.1 Pro, 3.5 Flash |
Integrado ao ecossistema Google |
| Microsoft Copilot |
copilot.microsoft.com |
🇺🇸 EUA |
GPT-5.3 |
Integrado ao Edge e Windows |
| Google AI Studio |
aistudio.google.com |
🇺🇸 EUA |
Gemini 3.5 Flash, 3.1 Pro |
Plataforma de IA do Google — prompts, API keys, vibe coding, deploy. Gratuito |
| Perplexity |
perplexity.ai |
🇺🇸 EUA |
Multi-modelo |
Ótimo para pesquisas com fontes |
| DeepSeek |
chat.deepseek.com |
🇨🇳 China |
DeepSeek-V4 Pro/Flash, R1 |
Melhor raciocínio, código aberto |
| MiMo |
aistudio.xiaomimimo.com |
🇨🇳 China |
MiMo-V2.5, V2.5-Pro |
Multimodal, 1.1M tokens, código aberto (MIT) |
| MiniMax |
agent.minimax.io |
🇨🇳 China |
abab6.5 |
Código e agentes |
| Kimi |
kimi.com |
🇨🇳 China |
moonshot-v1 |
Contexto ultra-longo (1M+ tokens) |
| Qwen (通义千问) |
tongyi.aliyun.com |
🇨🇳 China |
Qwen-2.5, Qwen-Max |
Melhor qualidade em chinês |
| Doubao (豆包) |
doubao.com |
🇨🇳 China |
Doubao Pro |
Maior base de usuários da China |
| ERNIE Bot (文心一言) |
yiyan.baidu.com |
🇨🇳 China |
ERNIE 4.0, 3.5 |
Integrado ao ecossistema Baidu |
🇧🇷 Modelos Brasileiros
| Ferramenta |
Link |
Empresa |
Modelo |
Características |
| Maritaca AI |
chat.maritaca.ai — plataforma.maritaca.ai |
Maritaca AI |
Sabiá 4, Sabiá 4 Thinking, Sabiazinho 4 |
Treinado em português brasileiro, dados oficiais (IBGE, BC, TSE), inferência 100% no Brasil, API compatível com OpenAI |
| Amazônia IA |
amazoniaia.com.br |
Widelabs |
Golia, Harpia, Guara |
LLM focado em cultura brasileira, parceria Oracle + NVIDIA, seções temáticas (cultura, literatura, negócios) |
2. Ferramentas Online de IA
Ferramentas de IA acessíveis direto no navegador — sem instalação.
| Ferramenta |
Link |
Uso no Curso |
| Replit AI |
replit.com |
IA integrada no Replit |
| v0 by Vercel |
v0.dev |
Gerar interfaces React com IA |
| Bolt.new |
bolt.new |
Criar apps completos com IA |
| Lovable |
lovable.dev |
Criar apps com IA sem código |
3. Ferramentas de Desenvolvimento
Ferramentas essenciais para criar e rodar projetos no seu computador.
Editores e Agentes de Código
Ferramentas de IA para criar e editar código — IDEs com interface gráfica e agentes via terminal.
| Ferramenta |
Tipo |
Link |
Características |
| OpenCode |
CLI/IDE |
opencode.ai |
Nosso assistente principal — Planejar e Construir |
| Claude Code |
CLI |
claude.ai/code |
Agente CLI da Anthropic |
| VS Code + Copilot |
IDE |
code.visualstudio.com |
Editor da Microsoft + GitHub Copilot (agentes e autocomplete) |
| Google Antigravity |
IDE |
antigravity.google |
IDE agentic do Google, agentes autônomos, Gemini 3 Pro |
| Cursor |
IDE |
cursor.sh |
Fork do VS Code com IA, agent Composer, suporta Claude/GPT/Gemini |
| Windsurf |
IDE |
windsurf.com |
IDE com agente Cascade, integração com Devin, tier gratuito |
| Trae |
IDE |
trae.ai |
IDE nativo de IA, multi-modelo |
OpenCode — Componentes
MCP servers, plugins e skills do OpenCode.
Instalando Componentes
Todos os componentes são instalados diretamente no chat do OpenCode.
Plugins:
| Plugin |
Descrição |
| @slkiser/opencode-quota |
Monitora cotas e limites de uso de recursos/APIs |
| @xberg-io/opencode-xberg |
Extensões e integrações da suíte xberg.io |
| @xberg-io/opencode-crawlberg |
Rastreamento web e extração automatizada de dados |
| @xberg-io/opencode-html-to-markdown |
Conversor de HTML para Markdown |
| superpowers |
Metodologia de desenvolvimento agentic (TDD, plans, subagents, debug) |
opencode plugin add @slkiser/opencode-quota
opencode plugin add @xberg-io/opencode-xberg
opencode plugin add @xberg-io/opencode-crawlberg
opencode plugin add @xberg-io/opencode-html-to-markdown
opencode plugin add superpowers@git+https://github.com/obra/superpowers.git
Servidores MCP:
| Nome |
Tipo |
Descrição |
| context7 |
Remoto |
Documentação e dados atualizados para bibliotecas e frameworks |
| cloudflare-docs |
Remoto |
Documentação oficial da Cloudflare |
| cloudflare-builds |
Remoto |
Monitoramento de builds e implantações na Cloudflare |
| cloudflare-browser |
Remoto |
Automação e navegação web via Cloudflare Browser Rendering |
| css |
Local |
Análise, geração e manipulação de estilos CSS |
| Astro docs |
Remoto |
Documentação oficial do framework web Astro |
| chrome-devtools |
Local |
Integração com Chrome DevTools para inspeção e depuração |
mcp add context7 --transport sse https://mcp.context7.com/mcp
mcp add cloudflare-docs --transport sse https://docs.mcp.cloudflare.com/mcp
mcp add cloudflare-builds --transport sse https://builds.mcp.cloudflare.com/mcp
mcp add cloudflare-browser --transport sse https://browser.mcp.cloudflare.com/mcp
mcp add css --transport stdio npx css-mcp
mcp add astro-docs --transport sse https://mcp.docs.astro.build/mcp
mcp add chrome-devtools --transport stdio npx chrome-devtools-mcp@latest
Habilidades — Avulsas:
| Habilidade |
Link |
Descrição |
| notebooklm |
notebooklm |
Consulta ao Google NotebookLM via navegador com suporte a Gemini |
| frontend-design |
frontend-design |
Direção de arte para interfaces — estilização e tipografia |
| canvas-design |
canvas-design |
Criação de arte visual em PNG/PDF (posters, banners) |
| image-enhancer |
image-enhancer |
Aprimoramento de imagens — nitidez e clareza |
| changelog-generator |
changelog-generator |
Histórico de alterações a partir do Git |
| cloudflare |
cloudflare |
Gestão completa de serviços Cloudflare (Workers, Pages, KV, D1, R2, AI) |
| file-organizer |
file-organizer |
Organização inteligente de arquivos — duplicatas e limpeza |
| diagram-maker |
diagram-maker |
Criação de diagramas e visualizações |
| video-editing-workflow |
video-editing-workflow |
Workflow de edição de vídeo com IA |
| remotion-video-creation |
remotion-video-creation |
Criação de vídeos em React usando Remotion |
| seo |
seo |
Auditoria e otimização técnica de SEO e Core Web Vitals |
| lgpd-compliance-check |
lgpd-compliance-check |
Verificação de conformidade com a LGPD |
| age-verification |
age-verification |
Fluxos de verificação de idade (LGPD, GDPR, ECA) |
| ai-usage-policy |
ai-usage-policy |
Políticas corporativas sobre uso ético de IA |
Habilidades — Via Superpowers:
| Habilidade |
Descrição |
| brainstorming |
Brainstorm estruturado antes de trabalho criativo |
| test-driven-development |
TDD com ciclo red/green/refactor |
| writing-plans |
Quebra de features em tarefas de 2-5 minutos |
| subagent-driven-development |
Execução via subagentes com code review |
| systematic-debugging |
Debug sistemático com análise de causa raiz |
| using-git-worktrees |
Git worktrees para isolamento |
| verification-before-completion |
Verificação obrigatória antes de concluir |
Controle de Versão (Git)
| Ferramenta |
Link |
Características |
| Git |
git-scm.com |
Sistema de versionamento — obrigatório para projetos locais |
| GitHub Desktop |
desktop.github.com |
Interface visual para Git — ideal para iniciantes |
Runtime e Gerenciadores de Pacotes
| Ferramenta |
Link |
Características |
| Node.js |
nodejs.org |
Runtime JavaScript — necessário para frameworks modernos (Astro, Next.js, etc.) |
| npm |
npmjs.com |
Gerenciador de pacotes — vem com o Node.js |
| nvm |
github.com/nvm-sh/nvm |
Gerenciador de versões do Node — instalar múltiplas versões |
| pnpm |
pnpm.io |
Gerenciador de pacotes alternativo — mais rápido que npm |
4. Sites Estáticos (Frameworks)
Geradores de sites estáticos — frameworks que transformam Markdown/HTML em sites rápidos e seguros.
| Framework |
Link |
Linguagem |
Características |
| Astro |
astro.build |
JavaScript/TypeScript |
Zero JS por padrão, islands architecture, suporta React/Vue/Svelte. Recomendado para 2026 |
| Hugo |
gohugo.io |
Go |
Ultra-rápido (1000 páginas em ~2s), ideal para sites grandes |
| Eleventy (11ty) |
11ty.dev |
JavaScript |
Flexível, múltiplos engines de template, mínimo config |
| Jekyll |
jekyllrb.com |
Ruby/Liquid |
Simples, integração nativa com GitHub Pages |
| Next.js |
nextjs.org |
JavaScript/TypeScript |
Híbrido (estático + dinâmico), ideal para apps complexas |
Documentações
Quando usar cada um
| Situação |
Recomendado |
| Blog, docs, landing page |
Astro (zero JS, SEO perfeito) |
| Site com 1000+ páginas |
Hugo (build ultra-rápido) |
| Controle total sem framework |
Eleventy (flexível) |
| GitHub Pages grátis |
Jekyll (integração nativa) |
| App com partes dinâmicas |
Next.js (estático + server-side) |
5. Hospedagem e Deploy
Plataformas para publicar seu site na internet gratuitamente.
6. Referência de Cores e Design
Ferramentas para escolher e combinar cores.
| Ferramenta |
Link |
Uso |
| Open Design |
open-design.ai |
IA de design open-source — protótipos, landing pages, slides (alternativa ao Claude Design) |
| Figma |
figma.com |
Editor de design colaborativo — referência profissional para UI/UX |
| Google Stitch |
stitch.withgoogle.com |
IA para design de UI — gera protótipos, landing pages e exporta para Figma/código (gratuito) |
| Google Flow |
labs.google/fx/tools/flow |
Estúdio criativo de IA — gera vídeos, imagens e ferramentas customizadas com Veo 3.1 e Imagen |
| Refero Styles |
styles.refero.design |
Referência de estilos de UI — padrões de botões, cards, formulários e mais |
7. Galerias de Inspiração
Sites para encontrar ideias de design.
Ferramentas para criar e editar imagens para seus sites.
9. Auditoria e Acessibilidade
Ferramentas para testar performance, acessibilidade e SEO do seu site.
| Ferramenta |
Link |
Características |
| PageSpeed Insights |
pagespeed.web.dev |
Análise de velocidade do Google — dados reais de usuários (CrUX) + Lighthouse |
| Lighthouse |
developer.chrome.com/docs/lighthouse |
Auditoria integrada ao Chrome DevTools — performance, acessibilidade, SEO, boas práticas |
| GTmetrix |
gtmetrix.com |
Análise detalhada de velocidade com waterfall chart |
| WebPageTest |
webpagetest.org |
Testes avançados de performance com múltiplas localizações |
Acessibilidade
| Ferramenta |
Link |
Características |
| WAVE |
wave.webaim.org |
Análise visual de acessibilidade — mostra erros diretamente na página |
| axe DevTools |
deque.com/axe |
Extensão para Chrome — detecção automática de problemas de acessibilidade |
| Accessibility Insights |
accessibilityinsights.io |
Ferramenta da Microsoft — testes guiados para WCAG 2.2 |
| Colour Contrast Analyser |
tpgi.com/color-contrast-checker |
Verificador de contraste de cores |
SEO
Boas Práticas e Validadores
10. Acesso via API (Roteadores de IA)
Gateways unificados que dão acesso a múltiplos modelos de IA com uma única chave de API.
| Ferramenta |
Link |
Tipo |
Características |
| OpenRouter |
openrouter.ai |
Gerenciado |
500+ modelos, uma chave API, roteamento automático, modelos gratuitos |
| OmniRoute |
github.com/diegosouzapw/OmniRoute |
Open-source |
268+ provedores, gratuito, 90+ com tier grátis, auto-fallback em 4 camadas |
11. Recursos Educacionais
Materiais para aprender mais — tutoriais, cursos, guias e comunidades.
Tutoriais de HTML/CSS/JS
Tutoriais de Design/UX
IA para Programação
Guias e tutoriais sobre como usar IA para criar código.
| Recurso |
Link |
Descrição |
| Anthropic Learn |
anthropic.com/learn |
Guias oficiais da Anthropic para trabalhar com Claude |
| IBM Prompt Engineering Guide |
ibm.com/think/prompt-engineering |
Guia completo de prompt engineering com exemplos práticos |
| DEV Community — AI for Developers |
dev.to |
Guia de prompts para devs (framework CRTSE) |
| DataCamp — Vibe Coding Guide |
datacamp.com |
Introdução a vibe coding com ferramentas e fluxos |
Vibe Coding
Programação assistida por IA — descrever o que quer em linguagem natural e deixar a IA gerar o código.
| Recurso |
Link |
Descrição |
| LearnAI — Vibe Coding Tutorial |
uselearnai.com |
Tutorial passo-a-passo para iniciantes |
| Skilzy — Complete Guide |
skilzy.io |
Guia completo com ferramentas e exemplos práticos |
| Hostinger — How to Learn Vibe Coding |
hostinger.com |
Guia por nível de habilidade (iniciante a avançado) |
Cursos Gratuitos de IA
Cursos online gratuitos, muitos com certificado.
Uso Ético e Responsável de IA
Guias sobre boas práticas, transparência e governança no uso de IA.
Comunidades e Fóruns
Espaços para tirar dúvidas, compartilhar e aprender com outros.
Documentação de Ferramentas