# Vibe Coding para não desenvolvedores: como profissionais de marketing, designers e PMs criam produtos com Claude e Cursor > Guia prático de Vibe Coding sem terminal: 45 técnicas de trabalho no Claude e no Cursor para profissionais de marketing, designers e PMs. Desde a edição de sites até a automação de tarefas rotineiras. A **Vibe Coding** é frequentemente percebida como um passatempo para programadores experientes cansados de escrever boilerplate manualmente. No entanto, o maior valor dos editores de IA modernos reside em atender àqueles que nunca estudaram a sintaxe das linguagens de programação e não sabem operar no terminal: profissionais de marketing, designers, UX writers e gerentes de produto. O repositório aberto contém 45 dicas práticas para superar a barreira técnica usando a combinação **Claude + Cursor**. O princípio central de toda a coleção está formulado diretamente na descrição: **o terminal não é necessário**. [Abrir o repositório no GitHub: baddiecodes/claude-cursor-tips-for-creatives →](https://github.com/baddiecodes/claude-cursor-tips-for-creatives) Todos os materiais estão divididos em três blocos lógicos: - **25 truques para Claude:** construção da base de contexto, UX writing, pesquisa, briefings criativos, refinamento iterativo de textos e crítica de ideias. - **10 truques para Cursor:** navegação pelos arquivos do projeto sem conhecimento de código, edição de textos diretamente no repositório, integração com geradores no-code e diagnóstico local de erros. - **10 princípios de AI-Workflow:** transformação de prompts caóticos e pontuais em fluxos de trabalho de equipe estáveis e reproduzíveis. > [!NOTE] > **A essência do Vibe Coding para não-desenvolvedores:** você não aprende JavaScript ou Python pelo código em si. Você usa sua linguagem natural habitual para interagir diretamente com arquivos, layout e dados do produto. --- ## Matriz de Capacidades: o que o especialista resolve sem ajuda de engenheiros A tabela abaixo mostra como as tarefas são distribuídas entre Claude e Cursor para diferentes papéis de produto: | Papel na Equipe | Tarefas no Claude (Geração e Conteúdo) | Tarefas no Cursor (Ação e Arquivos) | Resultado Real de Negócio | | :--- | :--- | :--- | :--- | | **Profissional de Marketing** | Títulos A/B, textos de landing pages, briefings de campanhas | Substituição de textos, preços e banners no código do site | Lançamento de edições em 5 minutos sem tickets no backlog | | **Designer UX/UI** | Microcopy, roteiros de onboarding, tom de voz (TOV) | Edição de componentes de UI, cores e fontes | Correspondência exata entre o mockup e a versão de produção | | **Gerente de Produto** | Análise de requisitos, decomposição de features, PRD | Busca da lógica da feature no projeto, prototipagem | Validação rápida de hipóteses sem distrair a equipe de Dev | | **Conteúdo / Operações** | Estruturação de tabelas, reescrita de materiais | Scripts de renomeação em massa, limpeza de CSV | Automação de manipulações rotineiras de conteúdo | --- ## Bloco Claude: 25 truques para trabalho sistemático com texto e conteúdo A seção mais extensa é dedicada a como construir uma interação previsível com o Claude. Não há aqui "prompts secretos" abstratos — o autor propõe um modelo operacional rigoroso. ### 1. Gerenciamento de Contexto Permanente via Claude Projects O principal erro dos iniciantes é explicar o contexto do seu produto novamente em cada nova sessão de diálogo. O autor recomenda criar **Projects** temáticos para cada área-chave: - **Base da Marca:** tom de voz, brandbook, missão, personas-alvo e palavras proibidas (stop-words). - **Base do Produto:** especificações de funcionalidades, grade de preços atual, segmentos de audiência. - **Biblioteca de Referências:** exemplos dos melhores textos, apresentações e briefings aprovados. Com um contexto permanente, o comprimento dos seus prompts é reduzido em 3–4 vezes, e o modelo deixa de sugerir formulações desconectadas da realidade. ### 2. Arquitetura de Quatro Partes para Solicitações Para qualquer tarefa de trabalho, utiliza-se uma estrutura minimalista, porém rigorosa: ```text PAPEL → CONTEXTO → TAREFA → FORMATO ``` Em vez de um pedido abstrato como *"Escreva títulos para o aplicativo"*, a solicitação de trabalho é construída assim: ```text PAPEL: Redator UX Sênior em uma startup de FinTech. CONTEXTO: Tela móvel de confirmação de transferência, onde o usuário se depara pela primeira vez com a taxa do banco. TAREFA: Elaborar 3 variações de título de aviso que reduzam a ansiedade. FORMATO: Lista com marcadores, até 6 palavras por linha, tom calmo e transparente. ``` ### 3. Regra dos 70%: Iterações em vez de Regenerações Completas Se o Claude entregar um resultado que atende a você em 70%, é categoricamente desaconselhável clicar no botão de regeneração (*Retry*) ou escrever *"Faça melhor"*. Divida o refinamento em microcorreções: - *"Mantenha a estrutura inalterada, mas reduza o comprimento de cada item pela metade"*. - *"Os dois primeiros parágrafos estão aprovados. Reescreva apenas o call-to-action (CTA) final, destacando o trial gratuito"*. - *"O tom está muito formal. Reescreva no nível de um diálogo vivo com um colega"*. ### 4. Claude como Crítico Implacável Usar a IA apenas para geração significa aproveitar apenas metade do seu potencial. O modelo funciona excelentemente como parceiro de sparring para validar hipóteses. Antes de enviar um documento aos stakeholders, teste-o com os seguintes prompts: - *"Encontre os 3 argumentos mais fracos neste texto e explique por que o cliente não nos acreditaria"*. - *"Quais objeções ocultas podem surgir na mente do diretor financeiro ao ler esta proposta comercial?"*. - *"Em qual ponto o usuário tem maior probabilidade de abandonar a leitura desta página?"*. --- ## Bloco Cursor: Vibe Coding sem habilidades de desenvolvimento O Cursor é um editor de código com IA integrada que entende toda a estrutura de arquivos do seu projeto. Para um especialista não técnico, isso é uma ponte que permite fazer alterações diretamente no produto. > [!IMPORTANT] > **Regra básica de segurança no Cursor:** > Comece sempre a solicitação com a frase: > `«Primeiro, explique exatamente o que você pretende alterar e quais arquivos serão afetados. Não aplique nada ainda».` > Isso elimina a sobrescrita acidental de trechos críticos do projeto. ### 1. Reconhecimento Seguro: Entendendo a estrutura sem edições O primeiro passo para conhecer o projeto é o modo "somente leitura". Abra a pasta do projeto no Cursor e use a janela de diálogo para perguntas em linguagem natural: ```text Em qual arquivo é armazenado o texto do bloco de planos tarifários na página inicial? ``` ```text Onde são definidos os títulos para a tela de pagamento bem-sucedido? ``` ```text Encontre todos os locais no projeto onde a antiga denominação de plano "Pro Basic" é mencionada. ``` O Cursor escaneará centenas de arquivos automaticamente e fornecerá caminhos precisos e números de linhas, libertando você da necessidade de recorrer aos desenvolvedores para links triviais. ### 2. Edições Diretas de Textos e Conteúdo Em muitos projetos modernos, os textos de marketing não são armazenados em CMSs pesados, mas diretamente em arquivos de configuração ou componentes de interface (arquivos `.json`, `.ts`, `.html`). Quando um profissional de marketing precisa atualizar a redação na página de planos: 1. Encontre o bloco através da busca do Cursor. 2. Selecione o trecho de texto desejado. 3. Pressione a combinação de teclas Cmd + K (ou Ctrl + K no Windows). 4. Escreva o comando: *"Substitua este texto pela nova variante, mantendo todas as aspas e a estrutura"*. 5. Clique no botão **Accept** após verificação visual dos diffs destacados. ### 3. Combinação Lovable + Cursor: Do Protótipo à Customização O autor do repositório propõe um pipeline híbrido poderoso para lançamento rápido de landing pages e interfaces: ``` Ideia ➔ Prompting no Lovable ➔ Exportação para GitHub ➔ Ajustes pontuais no Cursor ``` 1. **Lovable:** Construção do esqueleto da landing page ou dashboard em linguagem natural em 10 minutos. 2. **Exportação:** Download do código-fonte para o repositório GitHub. 3. **Cursor:** Abertura da cópia local do projeto para ajuste fino de fontes, acentos de cor, micro-animações e textos não padrão que o gerador não conseguiu configurar na primeira tentativa. ### 4. Diagnóstico Expresso de Erros Se a versão local do site apresentar um erro, não é obrigatório escrever imediatamente no chat de desenvolvimento. Copie o texto do erro da janela do navegador para o chat do Cursor: ```text Vejo o seguinte erro no navegador: [Texto do erro]. Explique em termos simples para um gerente de produto: por que isso aconteceu e em qual arquivo está o problema? ``` Em 80% dos casos, o problema é causado por um erro de digitação no nome de uma variável, uma vírgula ausente no JSON ou um link quebrado para uma imagem, permitindo resolvê-lo no local. --- ## Micro-automações simples de rotina sem escrever scripts O Cursor pode ser usado não apenas para websites, mas também como assistente pessoal para manipulações rotineiras de arquivos de trabalho. Para isso, basta criar uma pasta vazia, colocar nela os arquivos de origem e descrever o resultado desejado: ### Cenário A: Renomeação em Massa de Arquivos de Mídia ```text Escreva e execute um script simples que renomeie todos os arquivos .jpg e .png nesta pasta. Novo formato: product-hero-01.jpg, product-hero-02.jpg etc., mantendo a ordem original com base na data de criação. ``` ### Cenário B: Limpeza e Filtragem de Exportações de CRM/Tabelas ```text Na pasta está o arquivo bruto export_leads.csv. Crie um script que remova as linhas sem e-mail, mantenha apenas as colunas "Full Name", "Email" e "Company" e salve o resultado limpo em clean_leads.csv. ``` ### Cenário C: Conversão em Massa de Imagens para WebP ```text Converta todos os arquivos PNG pesados nesta pasta para o formato WebP com qualidade de 85% para otimizar a velocidade de carregamento do site. ``` > [!TIP] > **Lifehack:** você não precisa saber como o Python ou Bash funcionam internamente. O Cursor criará o script, executará e reportará o número de linhas ou arquivos processados. --- ## 5 Passos para Construir um AI-Workflow Estável A ideia central da seção final do repositório é: **o valor não é criado por um único prompt bem-sucedido, mas por um fluxo de trabalho reproduzível**. ``` 1. Contexto ➔ 2. Geração ➔ 3. Seleção ➔ 4. Implementação ➔ 5. Verificação ``` 1. **Coleta de Contexto:** Agregação de requisitos originais, audiência, guia de marca e referências em um só lugar. 2. **Geração de Variantes no Claude:** Criação de um pool amplo de alternativas (5–10 variantes de títulos, 3 estruturas de blocos). 3. **Seleção Humana:** Escolha da melhor variante baseada no gosto profissional e entendimento do produto. 4. **Implementação no Cursor:** Transferência da solução aprovada diretamente para os arquivos de trabalho do projeto. 5. **Verificação Visual:** Execução do projeto e controle final da renderização no navegador. ### Criando uma Biblioteca Pessoal de Processos Se o algoritmo para resolver uma tarefa funcionou com sucesso uma vez, salve-o na base de conhecimento da equipe: - **Para profissionais de marketing:** Templates de análise competitiva, roteiros de aquecimento (nurturing), estruturas de páginas de produto. - **Para designers:** Prompts para verificação de contraste e acessibilidade (accessibility), geração de user stories. - **Para gerentes de produto:** Templates de descrição de features, matrizes de priorização de hipóteses, algoritmos de decomposição de documentação técnica de API. --- ## Onde Terminam os Limites do Vibe Coding A abordagem Vibe Coding remove a barreira técnica para tarefas criativas e de produto do dia a dia, porém possui limites profissionais rígidos: > [!WARNING] > **Onde a participação de engenheiros profissionais permanece obrigatória:** > - Arquitetura de bancos de dados e otimização de queries pesadas. > - Segurança, criptografia e manuseio de dados pessoais confidenciais. > - Faturamento financeiro e integrações críticas de pagamento.