Produto próprio

Macramê Studio

Foto vira painel de macramê em camadas, com lista de fios e molde em PDF

Contexto
Projeto próprio
Papel
Product Manager e desenvolvedor
Período
Junho a julho de 2026
Status
No ar, publicado como teste de aprendizado de 48 horas
Visão computacional0 a 1Teste de mercadoPDF

Sobe uma imagem, o app separa as camadas de cor, calcula quantos fios de cada cor a peça vai consumir e devolve o molde pronto para executar.

48 hjanela de teste definida antes de publicar
100%do processamento no navegador, sem servidor
Foto dereferênciaSegmentação emcamadasCálculo de fiosMolde e listaem PDF
Tudo no navegador, do upload ao molde em PDF. Arraste para o lado para ver o fluxo inteiro.

Motivador

Artesã de macramê tira a paleta de uma foto no olho e descobre no meio da peça que comprou fio de menos. O trabalho de traduzir uma imagem em camadas executáveis é manual, lento e propenso a erro de compra.

Problema

Não bastava extrair cores. Era preciso transformar a imagem em camadas com fronteiras utilizáveis por quem vai amarrar nó por nó, e converter isso em uma lista de compras confiável. E era preciso fazer isso sem servidor: o app roda inteiro no navegador.

Solução

Pipeline client-side: a imagem passa por uma segmentação por k-means com semente fixa, o que garante que a mesma foto sempre gera o mesmo resultado. A pessoa controla o número de camadas por um controle único.

As camadas viram bandas ajustadas à geometria do painel, e daí sai o cálculo de fios por cor a partir das dimensões informadas.

Exportação em PDF com o molde e a lista de compras, carregada só quando a pessoa pede, para não pesar a primeira abertura.

Publicado deliberadamente como experimento de 48 horas: grátis, sem paywall, instrumentado, com um gatilho objetivo definido antes do lançamento para decidir se valia construir a fase 2.

Imagem de exemplo em bandas de cor usada para demonstrar a extração de camadas
A imagem de demonstração do app, desenhada para a extração de camadas ficar legível.

Resultado

  • O app foi ao ar em produção com deploy automático e verificação pós-deploy documentada, incluindo um bug real que derrubava a aplicação inteira quando um pedaço antigo do código não era encontrado.
  • O teste tinha critério de sucesso escrito antes: pelo menos três artesãs pedindo para usar sozinhas ou demonstrando intenção concreta de executar a peça.
  • Tudo que ficou de fora foi registrado com o motivo, e não esquecido: persistência entre sessões, PWA, camada paga e internacionalização só entram se o sinal aparecer.

O que eu tirei daqui

  • Definir o critério de sucesso antes de publicar evita a armadilha de ler qualquer número como validação.
  • Semente fixa no algoritmo transforma um resultado que parecia aleatório em algo que a pessoa consegue reproduzir e confiar.
  • Dívida técnica registrada com gatilho de reabertura é decisão de produto; dívida esquecida é só dívida.

Onde a IA entrou

Cada etapa do ciclo do projeto, com o quanto a IA pesou nela.

CentralApoioNão usei
Descoberta e entendimento do problema

Definição do público e do formato do teste com apoio de uma sessão de crítica de produto.

Pesquisa e evidência

O projeto nasceu de observação direta do problema, sem fase formal de pesquisa.

Especificação e documentação

Documento de design, lista de dívidas conscientes com gatilho de reabertura e relatório de deploy.

Arquitetura e infraestrutura

Escolha de rodar tudo no cliente, com carregamento sob demanda do gerador de PDF.

Desenvolvimento

Aplicação em Vite e JavaScript puro construída com IA, incluindo o extrator de camadas e o calculador de fios.

QA e análise de dados

Auditoria de código e de design antes do lançamento, revisão visual e verificação em produção com evidência anexada.

IA dentro do produto

A segmentação é algorítmica e determinística. Não há modelo de linguagem em tempo de execução.

Timeline e marcos

  1. 26/jul

    Revisão de engenharia do plano

    Escopo cortado e dívidas registradas com gatilho explícito de reabertura.

  2. 27/jul

    Revisão de design

    Ajustes de contraste, foco visível, movimento reduzido e polimento do fluxo em etapas.

  3. 27/jul

    Deploy verificado em produção

    Correção de um erro que derrubava a aplicação inteira, com verificação item a item do que entrou no ar.

Ferramentas

IA e modelos

Claude CodeRotinas de revisão de código, design e deploy

Produto

ViteJavaScriptCanvask-means com semente fixajsPDF

Operação

VercelPostHog self-hostedVitest

Resumo STAR

Situação
Artesãs de macramê traduzem uma imagem em camadas de fio no olho e erram a compra de material.
Tarefa
Descobrir, com o menor esforço possível, se existe demanda real por uma ferramenta que faça essa tradução.
Ação
Construí um app que roda inteiro no navegador, com segmentação determinística e exportação de molde e lista de compras em PDF, e publiquei como teste de 48 horas com critério de sucesso escrito antes do lançamento.
Resultado
O produto foi ao ar com deploy verificado, o teste teve gatilho objetivo de decisão e a lista do que ficou de fora foi registrada com motivo, de forma que a fase 2 só começa se o sinal aparecer.

Quer conversar sobre um desafio parecido?

Fale comigo