36 pontos por bamchi 2025-06-29 | 9 comentários | Compartilhar no WhatsApp
  • Em 17 horas, das 9h às 2h da madrugada, usando Claude Code e Rails 8, foi desenvolvido e implantado todo o frontend de um serviço real de coleta de dados pronto para operação
  • Toda a área, exceto o backend, foi feita em colaboração com IA: do planejamento ao design, frontend, código de testes e deploy, em um processo de desenvolvimento one-stop
  • Bastou fornecer a URL de um site de referência para que a IA analisasse tom e estilo e construísse automaticamente um sistema de design consistente
  • Desenvolvimento paralelo por clonagem de pastas: desenvolvimento da funcionalidade principal e correção de bugs ao mesmo tempo, maximizando a eficiência
  • Com aplicação forçada de TDD, foi garantida qualidade de código em nível de produção com cobertura de testes
  • A IA resolveu sozinha até erros de deploy: ao ocorrer um problema de migração, tratou automaticamente de backup → rollback → novo deploy
  • Também foi desenhado em detalhe um sistema de afiliados com comissões diferenciadas para B2B/B2C e um modelo de receita que reflete os custos de serviços externos
  • Conexão com domínio real e operação do serviço: já é possível verificar o serviço em funcionamento em acticrawl.com

O processo real de uma maratona de desenvolvimento de 17 horas

Etapa 1: construção de um sistema de design com base em referência (2 horas)

  • Fornecendo à IA a URL de um site SaaS existente, foram analisados automaticamente cores, tipografia e padrões de layout
  • Foi criado um sistema de componentes em TailwindCSS no nível do Bootstrap, garantindo UI/UX consistente
  • Padronização de botões, animações e efeitos de hover para entregar uma experiência de usuário profissional

Etapa 2: composição de páginas e implementação de funcionalidades (8 horas)

  • Landing page: página principal para apresentar o serviço e atrair usuários
  • Sistema de autenticação de usuários: cadastro e login

Etapa 3: desenho da lógica de negócio e do modelo de receita (4 horas)

  • Sistema de afiliados: estrutura de comissão diferenciada de 20% para B2B e 15% para B2C
  • Cálculo de custos de serviços externos: precificação realista considerando custos operacionais, como IPs de proxy

Etapa 4: testes e deploy (3 horas)

  • Escrita de código de teste em TDD para garantir estabilidade
  • Pipeline de deploy automatizado: em caso de erro, a IA resolve etapa por etapa
  • Conexão de domínio e otimização do ambiente de produção

Descoberta de um workflow inovador

Desenvolvimento paralelo com clonagem de pastas

  • O projeto foi clonado em duas pastas, cada uma executando Claude Code de forma independente
  • Desenvolvimento da funcionalidade principal e correção de bugs aconteceram simultaneamente, com dobro de velocidade de desenvolvimento
  • Gerenciamento seguro de branches no estilo GitHub Flow e mínima ocorrência de conflitos

Ensinando regras de desenvolvimento à IA

  • Uma vez configuradas, a IA segue as regras continuamente: TDD, Git Flow, princípio DRY, I18n etc.
  • Mesmo que a pessoa esqueça, a IA não deixa passar, mantendo qualidade de código consistente
  • Boas práticas em nível de desenvolvedor sênior aplicadas automaticamente

The 17-Hour Development Principle

Superando os limites do método tradicional de desenvolvimento

  • Tarefas de desenvolvimento frontend que antes levavam de semanas a meses foram concluídas em um único dia
  • Um novo paradigma em que uma única pessoa pode desempenhar os papéis de designer + desenvolvedor frontend
  • Foi alcançada uma qualidade de frontend realmente pronta para operação, e não apenas em nível de MVP

O efeito de sinergia da combinação de ferramentas de IA

  • A combinação inesperadamente poderosa de Claude Code + Rails 8 + TailwindCSS
  • Cada ferramenta já é boa isoladamente, mas quando usadas juntas o efeito se torna exponencial
  • Apresenta um novo padrão de produtividade em desenvolvimento

Resultado validado e divulgação transparente

Serviço realmente em operação

  • acticrawl.com: frontend completo e acessível neste momento (o backend será desenvolvido separadamente)
  • Testes completos do frontend: base de código de UI/UX estável desenvolvida com TDD
  • Modelo de negócio concreto: estrutura de receita realista e projeto que considera custos operacionais

Divulgação de todo o processo

  • Todo o processo de desenvolvimento foi aberto de forma transparente no vídeo de resumo das 17 horas de desenvolvimento (https://www.youtube.com/live/zNy9BM8LJwc)
  • O diálogo real com a IA e o processo de resolução de problemas foram registrados em detalhes
  • Um workflow reproduzível que outros desenvolvedores também podem aproveitar

Sinais de mudança no ecossistema de desenvolvimento

Expansão da capacidade do desenvolvedor individual

  • Chegou a era em que até mesmo um único desenvolvedor pode criar um frontend em nível corporativo
  • O ciclo de planejamento → design → implementação foi encurtado de semanas para dias
  • Com a grande redução da barreira de entrada no desenvolvimento frontend, surgem mais possibilidades de inovação

Um novo padrão de colaboração com IA

  • Vai além da simples geração de código: uso da IA como parceira completa de desenvolvimento frontend
  • Uma metodologia eficaz de colaboração com IA em todas as etapas do frontend, do planejamento ao deploy
  • Um caso prático que comprova aumento de velocidade sem perda de qualidade

Encerramento

Este projeto é um caso prático que mostra como ferramentas de IA podem aumentar de forma revolucionária a produtividade de desenvolvedores frontend. O ponto central não é apenas construir rápido, mas sim conseguir montar em um único dia um frontend completo, levando em conta testes, deploy e operação.

PS: se você quiser encarar o desafio de desenvolvimento de 17 horas, vale a recomendação de conferir o vídeo de resumo (https://www.youtube.com/live/zNy9BM8LJwc)
PPS: se estiver curioso sobre o serviço real, é possível experimentar diretamente em acticrawl.com

9 comentários

 
malcomjj 2025-07-01

É uma honra ver que há um vídeo no YouTube assim também na Coreia. Vou usá-lo como referência. Obrigado!

 
illiil1lii 2025-07-01

Parece que há muitos lugares na parte de docs que não funcionam.

p.ex.
https://acticrawl.com/en/docs/quickstart

 
bamchi 2025-07-01

Na verdade, pretendo prosseguir com o trabalho de documentação. Obrigado!

 
illiil1lii 2025-07-01

A frase abaixo é legalmente aceitável?

Confiado por milhares de empresas
Samsung, LG, Kakao, Naver, Coupang

 
rlaehdus2003 2025-06-30

17 horas, caramba, impressionante mesmo.
Acho que isso vai ajudar bastante como referência na hora de criar um serviço. Obrigado.

Só queria fazer uma pergunta: durante o processo, houve algum ponto difícil ou alguma dificuldade que você enfrentou? (Ainda não consegui ver o vídeo... mas vou ver em breve.)

 
helio 2025-06-30

Dificuldades no uso de IA
O vídeo é extremamente positivo em relação ao uso de IA no desenvolvimento, mas o apresentador menciona alguns desafios e pontos a considerar.

  • Atraso para receber respostas: o apresentador comenta que pode levar algum tempo para receber uma resposta da IA depois de fazer uma pergunta.
  • Possibilidade de código impreciso: reconhece-se que a IA às vezes pode gerar código incorreto.
  • Necessidade de testes: o apresentador enfatiza a importância de a IA testar o próprio código para detectar erros, já que pode ser difícil para uma pessoa revisar a grande quantidade de código gerada pela IA.
  • Desafios da internacionalização: o apresentador menciona que o suporte a vários idiomas é importante para alcançar um público global, mas pode haver dificuldades devido a barreiras linguísticas, como a falta de proficiência em inglês, chinês ou japonês.
  • Necessidade de melhorias iterativas: o apresentador sugere uma abordagem de desenvolvimento iterativa, começando com uma versão básica e depois aprimorando-a, o que significa que a IA pode não conseguir fazer tudo perfeitamente na primeira tentativa.
  • Tratamento de erros: o apresentador oferece uma solução para quando surgem erros: copiar e colar a mensagem de erro para que a IA possa resolvê-la. Isso mostra que, mesmo com IA, os erros fazem parte do processo de desenvolvimento.

Usei IA..

 
bamchi 2025-06-30

Qual IA você usou para fazer o resumo? Acho que a qualidade do resumo não ficou tão boa assim rsrs

 
helio 2025-06-30

Foi escrito por uma criança 😭

 
bamchi 2025-06-30

As dificuldades e os desafios são todos mencionados no vídeo. Obrigado.