Publique seu portfólio com Claude Code: workspace guiado
Escolha uma de três rotas e publique um portfólio operável: prompts únicos, checklists verificáveis, revisão segura e manutenção.
Você não precisa saber programar pra publicar um bom portfólio. Precisa especificar o que importa, limitar cada mudança e exigir prova do que foi verificado. Este workspace, um painel de trabalho que salva seu progresso, transforma isso em processo: seis etapas de entrega, uma área de manutenção e três rotas com consequências diferentes para site novo, base existente ou site pronto pra publicar.
Separe cerca de 45 minutos para ler e configurar o workspace. Executar a rota completa leva de 5,5 a 8,5 horas quando conteúdo e imagens precisam ser organizados; a rota de publicação leva de 1,5 a 2,5 horas se a verificação não revelar falhas. Tudo o que você marcar fica salvo neste navegador, sem cadastro.
Antes de entrar, tenha acesso de administrador ao computador, conta no GitHub (o serviço que guarda a pasta e o histórico do projeto), conta no Netlify (o serviço que publica o site na internet), acesso pago ao Claude Code ou créditos de API, a forma técnica de pagar pelo uso conforme o consumo, e a pasta do seu projeto. Se vai começar do zero, leve também conteúdo de pelo menos dois projetos. O workspace não inventa case, resultado nem responsabilidade que você não forneceu.
Guia verificado em 6 de agosto de 2026. O GitHub Free oferece quantidade ilimitada de repositórios públicos e privados, as pastas de projeto guardadas com histórico, e bloqueia arquivos acima de 100 MB. Contas novas do Netlify Free recebem 300 créditos mensais; cada deploy de produção, a publicação de uma nova versão, usa 15 créditos, cada GB de banda, um gigabyte de dados entregue aos visitantes, usa 20 e o site pausa sem cobrança ao esgotar. O Claude Code exige plano pago da Anthropic, a partir do Pro, ou créditos de API. O plano gratuito do Claude não inclui a ferramenta. As fontes oficiais mandam se os valores mudarem.
Do conteúdo cru ao portfólio no ar
Seis etapas de entrega e uma de manutenção, cada uma com objetivo, prompt e critério de validação. Resultado esperado: um site seu, publicado num endereço que qualquer pessoa consegue abrir na internet, com um recibo do que foi verificado. Seu progresso fica salvo neste navegador, sem cadastro.
De onde você está partindo?
Você começa pela etapa 1
Tempo de execução estimado: 5,5 a 8,5 horas, normalmente divididas em dois blocos.
Tenha em mãos
- Conteúdo de pelo menos dois projetos ou tempo reservado pra organizá-lo
- Acesso de administrador ao computador pra instalar ferramentas
Risco principal
Começar pelo visual e deixar o Claude preencher lacunas com conteúdo genérico.
Glossário rápido dos termos que este guia usa
- Terminal
- A janela onde você digita instruções de texto pro computador. É por onde o Claude Code trabalha.
- Git
- O sistema que registra versões dos arquivos na sua máquina.
- URL
- O endereço exato de uma página na internet.
- Repositório
- A pasta do projeto hospedada no GitHub, com as versões registradas em commits.
- Commit
- Um ponto de salvamento com descrição. Cada commit é uma versão à qual dá pra voltar.
- Push
- Enviar seus commits da sua máquina pro GitHub.
- Build
- O processo que transforma o código na versão final do site.
- Deploy
- Publicar: pegar o build e disponibilizar na internet, numa URL.
- Framework
- Kit pronto de estrutura de código (Next.js, Astro). O Claude escolhe e justifica; você não precisa dominar.
- Domínio
- O endereço do site (seunome.com). Começa com um endereço gratuito do Netlify; domínio próprio é compra à parte.
- API
- A interface técnica usada por programas para conversar entre si. Créditos de API pagam esse uso conforme o consumo.
- Token de acesso
- Chave de acesso em formato de texto. Funciona como senha: nunca entra em código, repositório ou print.
- MCP
- Ponte padronizada entre a IA e serviços externos (com sua autorização). Opcional neste fluxo inteiro.
- Variável de ambiente
- Configuração que vive fora do código (ex: uma chave), definida na sua máquina ou no painel do Netlify.
- SEO
- Dados e estrutura que ajudam buscadores e cartões de compartilhamento a entender uma página.
- Open Graph
- Dados usados para montar o cartão de uma página quando o link é compartilhado.
- Sitemap
- Arquivo que lista as páginas públicas do site para mecanismos de busca.
- Favicon
- O pequeno ícone que identifica o site na aba do navegador.
- GB de banda
- Um gigabyte de dados entregue pelo site aos visitantes.
Progresso
0 de 6 etapas validadas na sua rota
Etapa 1 de 7 · 1 a 2 h
Conteúdo
Objetivo: separar bio, projetos, imagens e contato antes de abrir qualquer ferramenta.
Por que importa: é a única parte que nenhuma IA faz por você. Conteúdo pronto evita rodadas desnecessárias e tende a consumir menos limite de uso: o Claude não precisa voltar pra perguntar o que escrever.
Ação
Crie uma pasta pro projeto, copie o checklist abaixo para um arquivo chamado CONTEUDO.md dentro dela e preencha. Não precisa ficar perfeito. Precisa existir no lugar que o Claude vai ler durante a construção.
PREPARAÇÃO DE CONTEÚDO Identidade [ ] Nome como quero aparecer [ ] Título profissional em uma linha [ ] Bio curta: 3 a 5 frases [ ] Foto ou imagem de apresentação [ ] Email profissional [ ] Links: LinkedIn e o que mais fizer sentido Trajetória [ ] Experiências principais: empresa, cargo, período, uma linha do que fiz [ ] Formação relevante Projetos (2 a 4) Para cada um: [ ] Nome + uma frase de resumo [ ] Imagem de capa [ ] Contexto (produto, empresa ou estudo, momento) [ ] Problema que existia [ ] Minha responsabilidade específica [ ] 2 ou 3 decisões importantes e o porquê [ ] Resultado com fonte, ou aprendizado honesto [ ] 3 a 6 imagens de processo ou solução Direção [ ] 3 referências visuais (links) [ ] O que quero delas e o que NÃO quero
Ainda não tem conteúdo? Abra o kit inicial
Três ferramentas pra sair do zero. Nenhuma inventa nada por você: elas puxam o que já está na sua memória e na sua pasta de projetos antigos.
Sou [NOME], [TÍTULO] com [X anos ou "experiência em"] [ÁREA]. Trabalho principalmente com [TIPO DE PRODUTO OU PROBLEMA]. Me interessa [O QUE TE MOVE NO DESIGN, uma frase concreta]. No momento, busco [OPORTUNIDADE].
Sobre aquele projeto que você lembra mas não documentou: 1. Qual era o produto e pra quem? 2. O que estava quebrado ou faltando quando você chegou? 3. O que VOCÊ fez, especificamente? (não o time: você) 4. Qual decisão gerou discussão? Como se resolveu? 5. O que mudou depois que entregou? (número, feedback, consequência) 6. Que imagem, print ou arquivo ainda existe disso?
Vou colar notas soltas sobre um projeto meu. Organize no formato: resumo, contexto, desafio, minha responsabilidade, decisões, resultado. Use somente o que está nas notas: não invente nada. O que faltar vira [FALTA: o quê]. No final, me faça as 3 perguntas que mais fortaleceriam o case. Notas: [COLE AQUI]
Funcionou se
Problema mais comum
O método por trás do workspace #
Este guia é a versão operacional de um argumento maior sobre trabalhar com IA sendo designer: o valor não está em decorar prompts, está em organizar contexto, limitar escopo e revisar com olho de dono. O resultado é um portfólio operável, cujo conteúdo você controla, cuja publicação você consegue explicar e cuja verificação você consegue provar. O raciocínio completo, com os quatro vícios do portfólio feito por IA e o modelo de estudo de caso que foge do formato escolar, está no artigo Como criar e publicar seu portfólio com Claude Code, mesmo sem saber programar.
Pra continuar dali:
- Biblioteca de prompts para designers: prompts de auditoria e geração pro dia a dia, além do portfólio
- Vocabulário de frontend para designers: os termos certos mudam a qualidade do que o agente gera
- Referências de design com IA: a biblioteca de referências citada no guia, por categoria
Continue lendo
Design no Figma com Claude: setup guiado (Desktop ou terminal)
Conecte o Figma ao Claude por MCP e peça auditorias de tokens, frames e variantes por prompt. Setup guiado em 5 passos, com checklist de validação em cada um.
Vocabulário de frontend para designers
134 termos de CSS, layout, acessibilidade e rendering organizados por camada do problema, com exemplos de prompt pra dirigir agentes de código.