UX/UI · DESENVOLVIMENTO

Desenho interfaces e produtos.
Do design ao código, com IA.

Projeto produtos digitais de ponta a ponta e dirijo a construção deles com IA (Claude Code): da arquitetura ao design de tela, com revisão ativa de cada linha que vai pro ar.

PROCESSO

Como eu trabalho

Começo com IA para clarear a ideia

Antes de abrir qualquer ferramenta de design, uso IA pra estruturar o que o projeto precisa: o que construir, riscos, casos extremos, primeiras abordagens. Isso encurta a distância entre a ideia solta e a direção clara.

Prototipo e construo com IA

Uso Claude Code (e já testei o Lovable) pra transformar conceito em produto funcional, do design ao código de produção. Sei quando uma ferramenta de geração rápida serve e quando preciso de mais controle no código, como fiz ao recriar o Prosa Postal do zero.

Reviso cada linha antes de publicar

Código gerado por IA não vai pro ar sem eu entender e validar o que ele faz. Esse é o filtro de qualidade real do processo: eu decido o que aceitar, o que reescrever e o que rejeitar.

TRABALHOS

Quatro produtos, do zero ao ar

CASE 01

Arena Eureka

Sistema de bolão de palpites e fanzone para a Copa do Mundo 2026, desenvolvido para a Eureka Coworking.

Categoria

Web App · Sistema completo

Stack

Flask · PostgreSQL

Papel

Design + direção da construção, sozinha

Processo

Claude Code, do zero

O que é

Além do espaço de palpites por jogo (cobrindo as 104 partidas do torneio, da fase de grupos à final), o sistema tem ranking geral dos participantes e o Arena Talks, uma área de fórum para conversas. É multilíngue (português, português do Brasil e inglês), com verificação de e-mail no cadastro e pontuação calculada automaticamente com base no resultado real de cada jogo.

Como foi construído

Back-end em Flask, começando em SQLite para prototipar rápido e migrando para PostgreSQL quando o projeto foi para produção, com internacionalização via Babel e envio de e-mails para verificação de conta. Todo o projeto (schema do banco, rotas, front-end e regras de pontuação) foi construído do zero com o Claude Code, sob minha direção de produto e design: eu defino o que construir, reviso o que é gerado e ajusto o que não atende.

Python / FlaskPostgreSQLBabel (i18n)Verificação de e-mailSistema de rankingFórum

CASE 02

Dra. Aline Paszternak

Site institucional para médica nutróloga especialista em emagrecimento saudável, em Belo Horizonte.

Categoria

Site institucional

Stack

TypeScript · React

Papel

Design + direção da construção, sozinha

Processo

Gerado com Lovable

O que é

Site institucional para apresentar o consultório e a abordagem de nutrologia baseada em evidências científicas, com foco em emagrecimento saudável, atendimento particular na Zona Sul de Belo Horizonte.

Como foi construído

Diferente dos demais projetos, este foi construído com o Lovable, uma ferramenta que gera a aplicação inteira a partir de descrição em linguagem natural. O trabalho aqui foi de direção de design, curadoria do resultado gerado e ajustes finos, em vez de escrita de código linha a linha.

TypeScriptReactCSSLovable

Repositório de código não disponível publicamente.

CASE 03

Aura Ortodontia

Site institucional para clínica de ortodontia em Belo Horizonte, inaugurada em 2023.

Categoria

Site institucional

Stack

HTML · CSS · JS

Papel

Design + código, sozinha, sem IA

Processo

Código próprio, sem IA

O que é

Site multi-página com apresentação da equipe, tratamentos oferecidos (Invisalign, aparelho fixo, odontologia do sono, ortopedia funcional dos maxilares, entre outros), estrutura física da clínica, FAQ e contato com formulário e WhatsApp.

Como foi construído

HTML, CSS e JavaScript vanilla, organizados em páginas separadas por tratamento. Esse é o único case do portfólio feito sem apoio de IA: escrevi cada linha sozinha, aplicando diretamente o que venho estudando em HTML, CSS e JavaScript.

HTMLCSSJavaScriptMulti-páginaFormulário de contato

CASE 04 · PROJETO PESSOAL

Prosa Postal

Um espaço onde pessoas enviam cartas e recebem cartas poéticas como resposta.

Categoria

Projeto pessoal

Stack

HTML · CSS

Papel

Design + direção da construção, sozinha

Processo

Lovable -> recriado com Claude Code

O que é

Um projeto afetivo e pessoal: quem escreve uma carta recebe de volta uma carta poética como resposta. O site reúne as páginas de histórias e de poetas envolvidos no projeto.

Como foi construído

A primeira versão foi prototipada no Lovable, e é essa que está no ar hoje. Em paralelo, o projeto foi recriado do zero em código com apoio do Claude Code, para ter mais controle sobre o resultado final: uma decisão consciente de trocar de ferramenta, com a publicação da nova versão ainda em andamento.

HTMLCSSProjeto pessoal

PROCESSO

Como a IA entra na construção dos projetos

Resumo real do que foi pedido ao Claude Code ao longo do projeto · Arena Eureka

Preciso de criar do zero uma aplicação web chamada Arena Eureka, um bolão da Copa do Mundo 2026 para o Eureka Coworking, uma empresa com escritórios em Lisboa e no Brasil. A aplicação deve ter:

  • Registo e login com verificação de email, recuperação de senha e proteção contra brute force
  • Sistema de palpites onde cada utilizador palpita o placar de todos os jogos antes do início de cada partida
  • Pontuação automática: placar exato = 10pts, vencedor + um lado = 7pts, só vencedor = 5pts, só um lado = 2pts. Nas fases eliminatórias com pênaltis, o utilizador também palpita quem passa nos pênaltis (caso o placar seja empate)
  • Ranking por pontuação, com filtros por país (PT/BR) e unidade Eureka
  • Sync automático de resultados via api-sports.io a cada 15 minutos, incluindo inserção automática dos jogos das fases eliminatórias à medida que os classificados se apuram
  • Internacionalização em 3 idiomas: Português (PT), Português do Brasil e Inglês
  • Arena Talks, feed social onde os utilizadores podem publicar posts, comentar e dar likes
  • Conformidade RGPD/LGPD com política de privacidade e direito ao apagamento de conta
  • Deploy no Railway com domínio arena.eurekacoworking.com

Stack: Flask + SQLite + Jinja2 + CSS + JS vanilla. Sem frameworks frontend.

O que ganha

  • Prototipagem e implementação mais rápidas: dá pra testar mais ideias de UX no mesmo espaço de tempo.
  • Com revisão ativa, o código fica mais fácil de auditar: mudanças pequenas e explicadas, em vez de blocos grandes escritos sob pressão de prazo.
  • Mais tempo pensando em arquitetura e experiência do usuário, menos tempo em digitação repetitiva.
  • Dá pra trocar de ferramenta no meio do caminho quando ela não serve mais, como aconteceu no Prosa Postal.

O que a IA não resolve

  • Código gerado por IA pode parecer correto sem estar: a revisão ativa não é opcional.
  • "Mais rápido" só é vantagem real se a auditoria acontece de fato; sem isso vira dívida técnica escondida.
  • Ferramentas de geração de app (como o Lovable) entregam velocidade, mas menos controle fino sobre o código.
  • O diferencial não é "usar IA": é saber o que aceitar, o que reescrever e o que rejeitar.
Na prática: uso o Claude Code para construir produtos do início ao fim (specs, telas inteiras, debugging), mantendo o controle sobre decisões de arquitetura e design. Já o Lovable entrou em dois projetos como ferramenta de geração rápida a partir de descrição; num deles decidi recriar o resultado em código puro para ter mais controle. Essa escolha de ferramenta, caso a caso, é parte do processo, não uma regra fixa.

FORMAÇÃO CONTÍNUA

Não é só IA: sigo estudando

Uso IA como parte real do processo, mas isso não substitui aprofundar os fundamentos. Estou matriculada na Alura e tenho certificações da Origamid, num processo contínuo de aprendizado técnico em paralelo aos projetos que desenvolvo.

CONTATO

Vamos conversar sobre um projeto?

luizaccarneiro@gmail.com