Ir para o conteúdo principal

MEI Copiloto

Assistente mobile-first para autônomos MEI do Brasil: agenda, clientes, dinheiro e prazos de imposto num só app.

My Role

Design Engineer, freelance. Do branding ao front-end, trabalhando ao lado de um Design Engineer, no mesmo modelo de build AI-first/agnóstico de IDE do WiseThera.

Product walkthrough

Landing page and waitlist flow: hero, WhatsApp-style chat mock, how-it-works steps, and signup form.

Hero, desktop

Hero, desktop

"Mais controle do seu dia, com menos correria" headline next to a WhatsApp-style mock showing agenda, DAS, and money nudges.

Chat interface close-up

Chat interface close-up

Dark purple section showing the Agenda/Lembretes/Dinheiro/DAS tabs and a sample WhatsApp conversation.

How it works, three steps

How it works, three steps

Passo 1 to 3: tell it your schedule, it organizes what matters today, you check what needs attention.

Segmented variant with incentive banner

Segmented variant with incentive banner

Aesthetician-specific headline with a top banner offering R$30 Pix for a 30-minute research call.

Research call signup form

Research call signup form

Name, WhatsApp, and CNPJ fields with an eligibility note and a remaining-spots counter.

Do moodboard ao cânone de design

Esse projeto pulou o Figma. O cliente já tinha reunido um moodboard no Pinterest apontando para uma direção neo-brutalista, então em vez de reconstruir essa intenção dentro de uma ferramenta de design, levei o moodboard direto para aprovação e depois o registrei como verdade adjacente ao código: um cânone de design DESIGN.md, antes de existir um único componente. Cada regra ali virou uma restrição que o build precisava obedecer, não uma sugestão para interpretar depois. Um único roxo reservado para o call to action primário e nada mais, um piso creme quente em vez de branco, zero gradientes, zero sombras, e exatamente dois valores de border-radius para a interface inteira. Escrever o cânone primeiro fez o sistema inteiro caber na cabeça de uma pessoa só, o que foi o que permitiu o build andar tão rápido quanto o briefing exigia.

Narrativa e microcopy

O público aqui está com as mãos ocupadas e a atenção dividida entre um cliente na sua frente e um celular no bolso. Cada seção precisava justificar seu lugar: problema declarado antes da solução, quatro pilares concretos nomeados com clareza (agenda, lembretes, dinheiro, o prazo do DAS) em vez de uma lista genérica de features, e nada que precisasse ser desdito depois: nenhum depoimento inventado, nenhuma contagem de clientes fabricada, nenhum preço tirado do nada.

Construído em 24 horas, sem AI-slop

O briefing: entregar uma landing page completa, on-brand, neo-brutalista, num único dia. Partiu de um moodboard do Pinterest aprovado pelo cliente em vez do Figma, traduzido diretamente para um cânone de design escrito (DESIGN.md) antes de existir um único componente.

  • Next.js

    Next.js

    App Router with Turbopack. Server Components by default, mobile-first landing page shipped without a backend.

  • React

    React

    Component model for the client-side interactivity: waitlist form state and validation.

  • Tailwind CSS

    Tailwind CSS

    Utility-first styling for the neo-brutalist layout: borders, spacing, and the two-radius token system.

  • daisyUI

    daisyUI

    Component layer on top of Tailwind: buttons, inputs, and cards pulled from the catalog instead of custom CSS.