OpenCode + Penpot: Setup para criação de interfaces

Eu sou uma pessoa um tanto pão-dura. Não por acaso, um dos meus últimos projetos na última empresa, focado em redução de custos, me engajou tanto.

Em tempos de hype ou não-hype da IA (o mercado ainda não parece decidido o bastante), boa parte dos desenvolvedores está fechada com Claude Code, Anthropic e cia, mesmo com os altos custos das assinaturas. Tenho certa vontade de usar a ferramenta e seu ecossistema, mas os valores a meu ver são bastante proibitivos.

Como nem só de código vive uma pessoa que quer experimentar e criar produtos, o Figma também criou suas dependências para o desenvolvimento web. E para a nossa tristeza, oferece as features de desenvolvimento, IA e MCPs por singelas quantias de dinheiro. Neste cenário, parti em busca de soluções gratuitas e open source e encontrei algumas minimamente utilizáveis e que podem quebrar um galho agilizando a criação de design + código.

Há alguns meses venho explorando ferramentas como Google Antigravity IDE e OpenCode para desenvolver alguns projetos. Ambos são gratuitos e oferecem o uso de determinada quota de modelos gratuitamente, incluindo alguns Claudes no Antigravity. Além disso, utilizar uma chave do OpenRouter é uma alternativa em ambas as ferramentas caso a cota dos modelos nativos acabe.

Como alternativa ao Figma, encontrei o Penpot, uma ferramenta bastante semelhante, que funciona com os agentes via MCP. Através dessa conexão, é possível uma via de mão dupla na criação de interfaces. Você pode pedir com um prompt para que seja criado o wireframe que quiser (como no vídeo abaixo) ou pedir para que o agente codifique a interface que está sendo visualizada na tela.

Resumindo, é possível montar um setup de trabalho honesto sem gastar com assinaturas caras: combinando alternativas gratuitas para código e modelos com uma ferramenta de design open source integrada via MCP, ganho velocidade e liberdade para prototipar e implementar qualquer interface.

Originalmente publicado no LinkedIn.