Site vibe-coded fica com cara de design quando agente recebe direção visual

Um site 'vibe coded' que as pessoas acharam que tinha designer

Yakko Majuri, fundador do Railcode, conta que o site da empresa - construído inteiramente por coding agents, sem designer - recebeu elogios de visitantes que perguntaram com quem ele tinha trabalhado no visual. Ele mesmo faz ressalva: diz ser um exagero afirmar que parece feito por designer, mas decidiu documentar o processo criativo para mostrar que agentes de código podem gerar design de bom gosto (definido por ele mesmo) e para encorajar outras pessoas sem formação em design. Ele enfatiza que, ao contrário do discurso comum sobre 'design slop' de LLMs, trabalhar com agentes o deixou mais interessado em design, porque antes se sentia incapaz de concretizar uma visão criativa.

Do conceito ao parque de diversões

O nome Railcode vem de "code on rails" - aplicativos e agentes são código, com a empresa cuidando de infraestrutura e guardrails. A semana antes de criar o site, ele percebeu que se divertia construindo coisas na própria plataforma, e clientes também. Da associação trilhos + diversão surgiu a ideia de colocar uma montanha-russa no site.

Por não ser designer, ele depende de exemplos e inspiração, com dois métodos: navegar por designs que gosta na web e pedir ao agente que gere dezenas de variações em estilos diferentes. Duas técnicas centrais:

• Níveis de intensidade: pedir designs do mesmo conceito em um espectro do minimalista ao extravagante, para avaliar se o conceito em si é interessante.
• "Go wild": pedir ao menos 4 versões por conceito (às vezes 10), com direção em metade e liberdade total na outra metade. A maioria dos resultados é ruim, mas gera faíscas de novas ideias.

Os primeiros designs de montanha-russa incluíam versões em ASCII inspiradas no site de um amigo, e outras deixadas à imaginação do Fable. Um design neon "feio" resultante lembrou Majuri do jogo Rollercoaster Tycoon, e ele decidiu que o site seria uma referência ao jogo. Chegou a mandar o Fable construir uma miniversão jogável do jogo, mas abandonou a ideia por parecer excessiva; ficou com uma única montanha-russa animada.

Iteração, forks e playgrounds

A montanha-russa isolada em um template parecia deslocada, o que o levou a construir um parque inteiro. Uma faixa fina de atrações no rodapé do hero ainda parecia ruim, mas a iteração - ancorando os novos assets no estilo da montanha-russa, ajustando animações individualmente e transformando a faixa em transição de cor para a seção seguinte - resolveu o problema.

O fluxo de trabalho dele: manter tudo em um único arquivo HTML até o design estar pronto, e só depois converter em React com componentes que agentes podem editar em paralelo. Isso facilita "forks" - cópias do design com uma ou duas mudanças, comparadas lado a lado - que ele nunca apaga, mantendo um rastro acessível do processo. Ele também constrói "playgrounds" para testar cores, fontes e posições em tempo real, em vez de pedir mudanças lentas ao agente; foi assim que achou o tom certo do verde da grama.

Detalhes finais incluem mudar o fundo branco para azul-céu com nuvens (o branco não transmitia diversão), aproveitar um botão de CTA de um mockup inicial anteriormente descartado (argumento, segundo ele, para se expor a muitos designs cedo, mesmo os terríveis), e fazer o menu de navegação mudar de cor conforme a seção visível, após testar versões estáticas em branco, azul claro, verde claro e verde escuro. O verde do site surgiu tão naturalmente que ele o adotou, mesmo com o produto usando azul - e admite que talvez precise rever o design do produto.

Inspiração e lições

Ele cita referências claras (a transição de seção clara para escura remete à Contextual AI; uma seção foi inspirada no Clay) e menos diretas (o site da Sentry, nada parecido, mas consultado pela integração entre ilustração e conteúdo).

O resumo do processo que ele apresenta: usa exclusivamente modelos da Anthropic para design - segundo ele, os da OpenAI têm dificuldade mesmo com direções específicas, e o Fable é "o melhor dos melhores"; mantém tudo em um HTML único; olha para muitos sites em busca de inspiração; gera dezenas de sites e descarta 99%, resgatando ocasionalmente um componente; usa os espectros de intensidade e os "go wild"; mantém todos os forks; constrói playgrounds; e itera muito, sabendo que a maioria das iterações é beco sem saída. Ele conclui que a parte mais importante é se divertir no processo.