Concluindo side projects com LLM e Cursor

xguru · 2025-01-07T09:50:23+09:00

Há cerca de 5 anos, passei a exercer o papel de Engineering Manager, então no trabalho principal diminuíram as ocasiões em que escrevo código diretamente Mesmo fora do trabalho, continuo tocando projetos pessoais para manter o ritmo de programação e fortalecer minhas habilidades técnicas No passado, por limitações de tempo, os projetos avançavam devagar e muitas vezes eram interrompidos antes de serem concluídos Mas, em 2024, passei a criar e publicar com relativa rapidez as ferramentas de que precisava, desenvolvendo o hábito de “concluir” a primeira versão Exemplos recentes de side projects concluídos jsonplayground.com : além de ser um formatador de JSON, oferece funcionalidade de JQ executada dentro do navegador (usando WebAssembly), sem enviar os dados para fora webtomarkdown.com : converte arquivos em Markdown ou extrai partes de sites em formato Markdown para que possam ser passadas como contexto para um LLM Rascunho de melhoria de design da página do aeroclube Evergreen Soaring Criação de uma extensão do Chrome para automatizar o atendimento das mensagens enviadas ao aeroclube fitinterval.com : oferece um timer de intervalos para exercícios Contexto de uso de LLMs e do Cursor IDE Os LLMs aumentam bastante a produtividade em side projects Em especial, o Cursor IDE torna conveniente usar LLMs no trabalho de programação Neste texto, compartilho o fluxo geral de criação de um novo projeto para ajudar os leitores a aplicá-lo Como LLMs não são úteis em todas as áreas, é preciso testar na prática e escolher onde aplicá-los Projeto de exemplo: site de acompanhamento de hábitos A ideia é recriar em formato de site o app de acompanhamento de hábitos usado atualmente Todos os dados ficam armazenados no dispositivo local, considerando a privacidade do usuário Começando a definir a especificação Primeiro, faz-se uma explicação simples no ChatGPT e, recebendo perguntas adicionais, a especificação do aplicativo vai sendo detalhada Quando já está razoavelmente concreta, pede-se que ela seja organizada a ponto de “outra pessoa conseguir construir o app inteiro só com essa especificação” A intenção de usar TypeScript, React e Tailwind CSS é explicitada para gerar uma especificação baseada nessas tecnologias A especificação final é guardada em SPEC.md para consulta durante o desenvolvimento posterior Bootstrap do projeto Usa-se o Vite para montar rapidamente o esqueleto do projeto A configuração inicial é feita com o comando npm create vite@latest ., e o SPEC.md é colocado na pasta do projeto No Composer do Cursor IDE, usa-se o recurso de agente para automatizar configuração do Tailwind e ajustes de arquivos básicos Assim, recursos iniciais como layout de UX esperado, uso de localStorage e exportação em Markdown são implementados em pouco tempo Trabalho iterativo em pequenas partes Em vez de pedir muitas funcionalidades de uma vez, as melhorias necessárias são divididas e as atualizações são solicitadas ao LLM em sequência Por exemplo, mudanças de UX e correções de bugs são separadas em partes pequenas e instruídas via Chat ou modo Composer Também é possível anexar imagens no Chat, descrever o design desejado e pedir ao LLM que o implemente em código Configuração de deploy contínuo Com base no GitHub Actions, configura-se para que, quando um commit chegue à branch main, o build seja feito automaticamente e o deploy vá para o GitHub Pages No Cursor, fornece-se ao LLM o link de um arquivo .yml de exemplo de outro repositório para que ele o use como referência na montagem do pipeline de deploy Dicas gerais Primeiro, organize com o LLM a visão geral e os detalhes do projeto e depois salve isso para usar como contexto Use ferramentas ou templates open source para fazer o bootstrap do projeto e definir sua estrutura Prepare de uma vez as ferramentas essenciais de desenvolvimento e a estrutura de diretórios, seguindo um padrão de projeto fácil de manter Use o Cursor Composer (modo agente) e afins para começar o projeto rapidamente Misture o uso de Claude-3.5-Sonnet e o1 (modelo) Use o o1 para trabalhos amplos de rascunho (primeiro draft) Cerca de 80% dos ajustes e reforços mais específicos são feitos com Claude-3.5-Sonnet Escolha o modo adequado (Chat, Composer normal, Composer agente) Chat: quando é preciso alterar algo em um ponto específico e verificar o resultado de cada modificação Composer (normal): quando é necessário adicionar funcionalidades envolvendo vários arquivos ou mudanças multifile Composer (agente): ainda pouco usado, mas útil quando são necessárias tarefas automatizadas como executar comandos, rodar lint e fazer correções iterativas (embora seja melhor dividir em partes pequenas para gerenciar) Ao fornecer contexto, inclua arquivos, documentos e links específicos Quando necessário, configure o modo Chat para consultar toda a base de código, permitindo que o LLM busque e proponha código adequado ao contexto Salve documentos do projeto em Markdown (SPEC.md etc.) para poder incluí-los como contexto Aproveite o arquivo .cursorrules na pasta do projeto É possível instruir que certas bibliotecas não sejam usadas, ou forçar o uso de Tailwind e da biblioteca de componentes shadcn Ao definir previamente regras que você quer refletir nos prompts, fica mais fácil conduzir os resultados na direção desejada na maioria dos pedidos Trabalhe mantendo uma compreensão geral do código Evite situações em que o LLM não consiga depurar, preservando a qualidade e a estrutura do código Continue dividindo o trabalho em partes pequenas e, quando necessário, use o LLM para refatoração ou separação em módulos Encerramento Ao concluir rapidamente o projeto dessa forma e gerar uma versão publicável, fica muito mais fácil retomar depois, mesmo após uma pausa O hábito de concluir pequenas coisas ajuda a manter o impulso e permite ver resultados rapidamente, trazendo motivação

(zohaib.me)

66 pontos por xguru 2025-01-07 | 3 comentários | Compartilhar no WhatsApp

Há cerca de 5 anos, passei a exercer o papel de Engineering Manager, então no trabalho principal diminuíram as ocasiões em que escrevo código diretamente
Mesmo fora do trabalho, continuo tocando projetos pessoais para manter o ritmo de programação e fortalecer minhas habilidades técnicas
No passado, por limitações de tempo, os projetos avançavam devagar e muitas vezes eram interrompidos antes de serem concluídos
Mas, em 2024, passei a criar e publicar com relativa rapidez as ferramentas de que precisava, desenvolvendo o hábito de “concluir” a primeira versão

Exemplos recentes de side projects concluídos

jsonplayground.com : além de ser um formatador de JSON, oferece funcionalidade de JQ executada dentro do navegador (usando WebAssembly), sem enviar os dados para fora
webtomarkdown.com : converte arquivos em Markdown ou extrai partes de sites em formato Markdown para que possam ser passadas como contexto para um LLM
Rascunho de melhoria de design da página do aeroclube Evergreen Soaring
Criação de uma extensão do Chrome para automatizar o atendimento das mensagens enviadas ao aeroclube
fitinterval.com : oferece um timer de intervalos para exercícios

Contexto de uso de LLMs e do Cursor IDE

Os LLMs aumentam bastante a produtividade em side projects
Em especial, o Cursor IDE torna conveniente usar LLMs no trabalho de programação
Neste texto, compartilho o fluxo geral de criação de um novo projeto para ajudar os leitores a aplicá-lo
Como LLMs não são úteis em todas as áreas, é preciso testar na prática e escolher onde aplicá-los

Projeto de exemplo: site de acompanhamento de hábitos

A ideia é recriar em formato de site o app de acompanhamento de hábitos usado atualmente
Todos os dados ficam armazenados no dispositivo local, considerando a privacidade do usuário

Começando a definir a especificação

Primeiro, faz-se uma explicação simples no ChatGPT e, recebendo perguntas adicionais, a especificação do aplicativo vai sendo detalhada
Quando já está razoavelmente concreta, pede-se que ela seja organizada a ponto de “outra pessoa conseguir construir o app inteiro só com essa especificação”
A intenção de usar TypeScript, React e Tailwind CSS é explicitada para gerar uma especificação baseada nessas tecnologias
A especificação final é guardada em SPEC.md para consulta durante o desenvolvimento posterior

Bootstrap do projeto

Usa-se o Vite para montar rapidamente o esqueleto do projeto
A configuração inicial é feita com o comando npm create vite@latest ., e o SPEC.md é colocado na pasta do projeto
No Composer do Cursor IDE, usa-se o recurso de agente para automatizar configuração do Tailwind e ajustes de arquivos básicos
Assim, recursos iniciais como layout de UX esperado, uso de localStorage e exportação em Markdown são implementados em pouco tempo

Trabalho iterativo em pequenas partes

Em vez de pedir muitas funcionalidades de uma vez, as melhorias necessárias são divididas e as atualizações são solicitadas ao LLM em sequência
Por exemplo, mudanças de UX e correções de bugs são separadas em partes pequenas e instruídas via Chat ou modo Composer
Também é possível anexar imagens no Chat, descrever o design desejado e pedir ao LLM que o implemente em código

Configuração de deploy contínuo

Com base no GitHub Actions, configura-se para que, quando um commit chegue à branch main, o build seja feito automaticamente e o deploy vá para o GitHub Pages
No Cursor, fornece-se ao LLM o link de um arquivo .yml de exemplo de outro repositório para que ele o use como referência na montagem do pipeline de deploy

Dicas gerais

Primeiro, organize com o LLM a visão geral e os detalhes do projeto e depois salve isso para usar como contexto
Use ferramentas ou templates open source para fazer o bootstrap do projeto e definir sua estrutura
- Prepare de uma vez as ferramentas essenciais de desenvolvimento e a estrutura de diretórios, seguindo um padrão de projeto fácil de manter
Use o Cursor Composer (modo agente) e afins para começar o projeto rapidamente
Misture o uso de Claude-3.5-Sonnet e o1 (modelo)
- Use o o1 para trabalhos amplos de rascunho (primeiro draft)
- Cerca de 80% dos ajustes e reforços mais específicos são feitos com Claude-3.5-Sonnet
Escolha o modo adequado (Chat, Composer normal, Composer agente)
- Chat: quando é preciso alterar algo em um ponto específico e verificar o resultado de cada modificação
- Composer (normal): quando é necessário adicionar funcionalidades envolvendo vários arquivos ou mudanças multifile
- Composer (agente): ainda pouco usado, mas útil quando são necessárias tarefas automatizadas como executar comandos, rodar lint e fazer correções iterativas (embora seja melhor dividir em partes pequenas para gerenciar)
Ao fornecer contexto, inclua arquivos, documentos e links específicos
- Quando necessário, configure o modo Chat para consultar toda a base de código, permitindo que o LLM busque e proponha código adequado ao contexto
Salve documentos do projeto em Markdown (SPEC.md etc.) para poder incluí-los como contexto
Aproveite o arquivo .cursorrules na pasta do projeto
- É possível instruir que certas bibliotecas não sejam usadas, ou forçar o uso de Tailwind e da biblioteca de componentes shadcn
- Ao definir previamente regras que você quer refletir nos prompts, fica mais fácil conduzir os resultados na direção desejada na maioria dos pedidos
Trabalhe mantendo uma compreensão geral do código
- Evite situações em que o LLM não consiga depurar, preservando a qualidade e a estrutura do código
- Continue dividindo o trabalho em partes pequenas e, quando necessário, use o LLM para refatoração ou separação em módulos

Encerramento

Ao concluir rapidamente o projeto dessa forma e gerar uma versão publicável, fica muito mais fácil retomar depois, mesmo após uma pausa
O hábito de concluir pequenas coisas ajuda a manter o impulso e permite ver resultados rapidamente, trazendo motivação

3 comentários

fbtmdxor 2025-01-08

Obrigado pelas ótimas informações!

ragingwind 2025-01-08

As tentativas parecem bem parecidas entre si.

netcleaner 2025-01-07

Recentemente experimentei criar um pequeno projeto com Cursor e LLM de uma forma parecida com a descrita acima, e a produtividade foi excelente.
Criei um SPEC ou PRD com o LLM, incluí isso como contexto no Cursor e, depois de definir com cursorrules as regras sobre as tecnologias a serem usadas, fui passando as tarefas uma a uma pelo Composer, e o código saiu bem e com consistência.