Criei um mini-projeto web para criar templates de prompt: Template Maker 📝 · Cauen

Fala, pessoal! 🚀

Não sei se vocês passam muito por isso, mas de vez em quando preciso repetir um prompt muitas e muitas vezes, onde somente pequenas partes de um prompt gigante muda.

Mas mudar essas partes é muito chato, ficar tendo que encontrar num texto de muitas e muitas linhas quais pontos são variáveis pra trocar.

OBS: Estou passando bastante por isso pois estou gerando "legendas" para um app de inglês que estou desenvolvendo. (Como no exemplo do print abaixo).

Daí pensei em testar o poder do Cursor e fazer um vibe coding rápido de uma ferramenta que resolvesse esse problema. E como acho que ficou bemm útil, quero compartilhar com vocês (Pro caso de ser útil pra algum de vocês também).

✨ Principais Funcionalidades

🔄 Gerenciamento de Templates

Criação Rápida: Adicione templates com nomes gerados automaticamente
Edição em Tempo Real: Veja as mudanças acontecendo enquanto digita
Preview Instantâneo: Visualize o resultado final com as variáveis preenchidas
Variáveis Coloridas: Cada variável tem sua cor única para fácil identificação

💡 Recursos Inteligentes

Detecção Automática: Variáveis são detectadas automaticamente usando o formato {{variavel}}
Persistência Local: Seus templates são salvos automaticamente no localStorage
Export/Import: Compartilhe seus templates facilmente em formato JSON
Copiar para Clipboard: Um clique para copiar o texto final com as variáveis preenchidas

🛠️ Tecnologias Utilizadas

Next.js 15: Framework React moderno e performático
Tailwind CSS 4: Estilização flexível e responsiva
Zustand: Gerenciamento de estado eficiente
Shadcn/ui: Componentes bonitos e acessíveis
TypeScript: Código tipado e seguro

🤝 Conclusão

Ficou bem funcional, e no geral a experiência foi rápida e positiva.

O código passou por vários prompts até finalmente ficar funcional, e tive que dar umas corrigidas em algumas coisas... Percebi também que se ele não for bem guiado, ele não sabe como fazer as coisas do "jeito certo". Por exemplo: Tive que especificar que queria fazer o sync com localstorage com Zustand, porque se não ele ficava tentando usar umas gambiarras muito loucas e não funcionava.

Mas com certeza eu teria levado MUITO mais horas pra desenvolver se não fosse a IA (levei por volta de 1:30h) do início ao fim.

Acredito que para esse tipo de ferramenta, que não tem muito o que evoluir e que você precisa fazer rápido pra valer a pena o esforço essas novas IAS valem muito a pena.

👉 Aplicação: https://template-maker-omega.vercel.app/

👨‍💻 Código: https://github.com/Cauen/template-maker