Olá, pessoal! Como vão? Antes de mais nada, esse é meu primeiro post no TabNews, então me avisem se eu cometer algum erro.

Estou na área de Web Design e UI/UX há um tempinho e percebi que é um assunto um pouco polêmico pra alguns. Enquanto muitos acham que é a pior coisa do mundo e que acaba com qualquer projeto antes mesmo de ele iniciar, outros acham que é uma mão na roda e essencial para projetos saírem do papel de forma rápida.

Por que não utilizar?

Utilizar templates pode arruinar o aprendizado para iniciantes e virar um mau hábito muito rapidamente para quem já tem certa experiência. Em alguns meses, sem perceber, você não lembra mais como fazer um setup do zero, não lembra o nome da propriedade CSS certa que dá o resultado que você estava imaginando, a estrutura correta de um WebComponent, a meta tag correta pra configurar o favicon, entre outras coisas que creio que muitos de vocês já experienciaram.

Principalmente pra iniciantes, utilizar templates é extremamente prejudicial. Você aprende a copiar e colar código, a editar título e descrição apenas. Isso pode não só desalerar, como de fato quebrar o processo. Sem saber exatamente como algo funciona, você pode acabar deduzindo, e deduzindo errado, e falso entendimento é pior do que nenhum entendimento.

Por que utilizar?

Escrever código é legal; repetir código, nem tanto. Não é sobre código parecido, é código exatamente igual. Sempre que quero criar uma landing page, por exemplo, instalo Vite, TailwindCSS e GSAP, crio a estrutura de pastas, crio as configurações de formatação, configuro o Vite e só então consigo começar a construir algo. Mas não para por aí: ainda tenho que fazer as formatações em CSS, as estilizações globais e os componentes, que também costumam ser as mesma, se não muito parecidas.

E esquecer se o emptyOutDir: true fica dentro ou fora do objeto build no vite.config.js, ou se o correto é directory = "./dist" ou apenas directory = "dist" no wrangler.toml, é realmente um problema tão grande assim? Pelo menos pra mim, é um problema resolvível em 2 minutos olhando a documentação oficial — e menos ainda perguntando pra qualquer LLM. Eu acho que postergar o início de um projeto, ou nem mesmo começar, seja por preguiça ou por não saber exatamente como fazer ainda, é muito mais prejudicial do que esquecer que precisa do "type": "module" no package.json para utilizar imports no JavaScript, ou que precisa do display: flex; pra centralizar uma div.

Minha visão

Eu consigo ver como um template pode ser ruim se utilizado da maneira errada ou por pessoas erradas, mas, honestamente, não consigo vê-lo sendo prejudicial se usado corretamente. Vou ser honesto: sou um cara bem preguiçoso, e sempre que penso em iniciar um novo projeto — independentemente do tamanho, do objetivo e de ser pessoal ou profissional — desanimo instantaneamente quando lembro do setup que preciso fazer só pra começar a codar, e mais ainda quando lembro a quantidade de código que vou ter que escrever pra ver na minha tela o que estou imaginando. Código que eu sei como escrever, que já escrevi dezenas, se não centenas, de vezes.

Meu template

Pensando principalmente nas minhas dores, e depois pensando que isso poderia se expandir para outras pessoas, criei um repositório template para websites estáticos. Ele não usa nenhum framework — apenas HTML, CSS, JS puro e Vite para build — e TailwindCSS + GSAP pra acelerar um pouco o desenvolvimento. O template tem uma arquitetura genérica que serve pra landing pages, sites institucionais e quase qualquer tipo de projeto que seja um site estático. Também procurei deixar o código um pouco documentado e simples pra ser uma porta de entrada para iniciantes.

Deixei tudo em inglês pra tentar atingir um público maior, e porque imagino que a maioria já esteja acostumada com código e documentação em inglês, então não acho que vá ser um problema.

A ideia é ir aprimorando ele e criar uma base pra sites estáticos, além de facilitar a construção de sites mais bonitos. Provavelmente cometi diversos erros no template — de arquitetura, otimização ou até de estilização/interface mesmo —, mas a ideia é justamente compartilhar para que mais pessoas vejam e, se sentirem que podem contribuir, ajudem a deixar o desenvolvimento web mais fácil e rápido e, principalmente, construir uma web mais bonita!

Link da demo: https://website-template.coden.agency/