Aula 01 — Introdução à IA na Prática

O programa do curso

O curso tem 16 encontros, um por semana, durante 4 meses. Cada encontro tem 3 horas.

O caminho do curso

A escada dos 5 níveis

O curso inteiro é uma escada com 5 degraus — do Curioso ao Arquiteto. Hoje você começa no Nível 2:

O que é IA

"IA" é um termo solto — e a gente já usa esse nome há bastante tempo.

Lembra dos inimigos dos jogos? Um que anda pra lá e pra cá, e quando o seu personagem chega perto, ele muda o comportamento: para de andar, começa a perseguir, ataca de outro jeito. Parece que ele "sabe" que você está ali — mas aquilo é um algoritmo: regras escritas por um programador, que rodam sempre iguais. "Ande", "se chegar na borda, vire", "se o personagem chegar perto, persiga". E no jogo, a gente já chama ele de "IA" — mesmo sendo só umas regrinhas reagindo a você.

Olha quanta coisa diferente já ganhou o nome de "IA" no dia a dia:

Repara: todas essas são algoritmos — e todas têm algo em comum: olham dados e fazem uma previsão ou decisão. O GPS prevê a melhor rota. A rede social prevê o que me prende. Os anúncios preveem o que eu compro. O teclado prevê a próxima palavra. É isso que faz a gente chamar de "IA" — mesmo sendo só algoritmos. Agora chega a parte interessante:

Um tipo novo de algoritmo

Os algoritmos que eu vi até aqui escolhem entre opções conhecidas: o GPS escolhe a rota entre ruas que existem, o teclado sugere palavras que já existem, a rede social mostra posts que já foram feitos. Eles olham dados e escolhem uma opção que já existe.

A IA atual (a LLM) é um tipo novo de algoritmo: ela não escolhe uma opção pronta — ela faz uma aposta e cria a resposta do zero. Calcula qual é a resposta mais provável, baseada em tudo que foi treinada pra fazer.

Isso explica por que:

• Se eu pergunto a mesma coisa duas vezes, as respostas são quase iguais, mas não idênticas
• Uma palavra, uma vírgula diferente no prompt, muda a resposta — o Efeito Borboleta: uma pequena diferença no começo pode mudar tudo lá na frente
• Ela "erra" quando aposta errado — e com muita confiança

Mini-exemplo: se eu peço "crie um site de doces", a IA entrega um site genérico. Se eu peço "crie um site de doces artesanais, com cores quentes", o resultado é outro site, bem diferente. Só uma palavra a mais mudou tudo — o Efeito Borboleta no prompt.

É o mesmo princípio do teclado do celular da lista ali em cima: ele aposta na próxima palavra. Só que a LLM é esse teclado emescala gigantesca — e é disso que a gente vai falar agora.

Aquele inimigo tinha regras escritas por alguém. A LLM, ninguém escreveu as regras — ela foi treinada. Treinar é mostrar milhões de exemplos até o modelo captar os padrões sozinho. E esses padrões, no fundo, são cálculos estatísticos: um monte de probabilidades de "qual palavra vem depois de qual". De tanto ver exemplo, o modelo sabe qual é a aposta mais provável — não porque alguém escreveu a resposta, mas porque a estatística diz.

Treinar é uma coisa, usar é outra

Depois do treino, o que fica pronto é um arquivo gigante onde essas estatísticas moram — não as respostas prontas, mas os padrões de "qual palavra costuma vir depois de qual". Quando eu uso a IA, ela não refaz o treino: ela usa esse arquivo de estatísticas pra calcular a próxima aposta. É como um cozinheiro que passou anos estudando receitas — depois de pronto, ele cozinha com o que já sabe, sem voltar pra escola a cada prato.

LLMs — o centro da nova tecnologia

Esse tipo de IA que lê tudo e é treinada com padrões tem um nome: LLM (Large Language Model — Grande Modelo de Linguagem). É a sigla por trás dos chats que a gente usa:

• ChatGPT, Claude, Gemini, DeepSeek... todos são LLMs
• Elas são o motor da nova IA
• Quando alguém fala "IA" hoje, na maioria das vezes tá falando de uma LLM

É como o motor do carro: todo mundo chama de "carro", mas o que faz ele andar é o motor. As LLMs são os motores dos chats que usamos.

Inteligência artificial não é um robô que pensa. Não é um cérebro eletrônico. Não é mágica.

IA é um assistente que leu tudo que existe na internet e foi treinada com padrões de como as pessoas escrevem, falam e constroem coisas.

A analogia do bule de chá

Imagina o bule de chá: cada pessoa que passa perto e fala algo, pinga uma gotinha. Quando eu pergunto, a IA serve essa mistura de tudo com que foi treinada — não é exatamente o que NINGUÉM falou, mas uma média do que TODO mundo falaria.

A analogia do teclado de celular

Imagina o teclado inteligente do celular. Aquele que sugere a próxima palavra enquanto eu escrevo. Ele aprendeu com tudo que o mundo inteiro já escreveu — mensagens, e-mails, postagens, pesquisas. Quanto mais eu escrevo, mais ele sabe o que eu quero dizer.

Uma IA é a mesma coisa, só que em escala gigantesca. Ela leu tudo que existe na internet e foi treinada com padrões de como as pessoas escrevem, falam e constroem coisas. Não é um cérebro que pensa — é um sistema que prevê a próxima palavra mais provável.

É isso que uma IA faz. Ela não "pensa" — ela prevê. Quando eu pergunto "o sol nasce no...?", a IA calcula que "leste" tem 95% de chance de ser a resposta. E responde "leste". Não porque ela sabe onde o sol nasce — porque foi treinada pra saber que essa é a resposta mais provável.

Isso explica por que a IA parece tão inteligente: a maioria do que a gente pergunta tem uma resposta óbvia. Mas também explica por que ela erra: quando a resposta não é óbvia, ela tenta adivinhar.

Quais chats usar

Importante: Não existe "o melhor chat". É como perguntar "prefere chave de fenda ou martelo?" — depende se é um parafuso ou prego. ChatGPT é ótimo pra texto, Claude pra código, DeepSeek pra raciocínio. Cada um tem ponto forte.

Apps com IA integrada

• Replit — editor online com IA que já cria e executa o site
• v0 — gera interfaces prontas com descrição
• Bolt.new — cria app completo do zero
• Lovable — cria apps sem código

Esses apps vão além do chat: eles já executam o código pra mim. É o que vamos usar hoje na prática.

Vantagens e desvantagens

A IA é uma ferramenta poderosa. Mas como qualquer ferramenta, tem limites.

A IA é minha assistente, não minha substituta. Ela faz bem o que é mecânico e rápido. Mas decisões de design, de conteúdo, de estratégia — isso é meu.

E tem um detalhe importante: quanto maior e mais complexo o projeto, mais cuidado eu preciso ter. Num projeto pequeno e simples (um cartão de visita), a IA faz quase tudo sozinha e erra pouco. Num projeto grande (um site com várias seções, banco de dados, pagamentos), ela erra mais — e aí eu preciso de mais direção, mais revisão, e dividir em pedaços. A IA combina com tudo, mas quanto maior o desafio, mais o meu controle cresce de importância.

Por que a IA erra

A IA erra porque ela não pensa — ela tenta adivinhar.

Uma LLM é essencialmente um sistema de previsão estatística. Quando eu pergunto algo, ela não consulta um banco de dados de respostas corretas. Ela calcula: "qual é a palavra mais provável de vir a seguir?"

Isso funciona muito bem pra coisas óbvias. "O sol nasce no..." → "leste". Mas quando a resposta não é óbvia, a IA precisa inventar — e ela faz isso com muita confiança.

Os 5 tipos de erro mais comuns:

1. Links fictícios
A IA gera: "Acesse www.mariadapadaria.com.br"
Realidade: esse site não existe.

Como evitar: sempre teste os links que a IA gera.

2. Telefones inventados
A IA gera: (11) 99999-0000
Realidade: número não existe.

Como evitar: confirme dados de contato com quem de fato tem o telefone.

3. Funcionalidades inexistentes
A IA gera código que "promete" algo que não funciona. Exemplo: botão de pagamento que não processa nada.

Como evitar: teste cada funcionalidade que a IA criar.

4. Referências falsas
A IA cita: "Use a biblioteca React v19"
Realidade: essa versão não existe.

Como evitar: pesquise por fora antes de confiar.

5. Estatísticas inventadas
A IA gera: "87% dos usuários preferem..."
Realidade: dado sem fonte.

Como evitar: verifique dados estatísticos em fontes confiáveis.

O código fantasma:

Às vezes a IA gera código que parece correto visualmente, mas não funciona quando executado. Não apresenta erro — mas também não faz nada. É como uma fachada de loja bonita: por fora tá tudo no lugar, mas quando eu abro a porta, não tem nada por dentro.

Regra de ouro: teste tudo que a IA criar. Não publique sem verificar.

A Regra da Média

"A IA joga as pessoas ruins pra média. E pode jogar as boas pra baixo se não souber usar."

O que isso significa?

Se eu não sei fazer algo — escrever, programar, design — a IA me ajuda a ficar razoável. Não excelente, não profissional. Razoável.

Isso parece bom, né? Mas tem um problema: se eu sou bom no que faço e não sei usar a IA, ela pode me rebaixar pra média também. Porque se eu só copio o que ela gera sem pensar, o resultado é genérico.

Exemplo prático:

• Pessoa que não sabe escrever → IA ajuda a escrever textos razoáveis
• Pessoa que escreve muito bem → IA pode gerar textos "medianos" se ela só copiar sem revisar

A analogia da escada: A IA é como uma escada que sobe quem tá embaixo e pode derrubar quem tá no alto. Se eu não evoluo, a escada me mantém no meio. Se evoluo, me leva lá em cima.

Isso não é pra assustar. É pra explicar por que a gente tá aqui: não basta "usar IA" — precisa saber usar bem. E pra isso, existem os 5 níveis de criação com IA.

Os 5 Níveis de Criação com IA

Lembra da escada dos 5 níveis lá no começo? Aqui está cada degrau explicado:

Nível 1 — O Curioso

Eu digito "crie um site pra minha loja". A IA gera algo genérico. Igual a milhares de outros. Funciona pra tirar dúvidas e prototipar rápido, mas não tem identidade visual.

É como pedir "uma pizza" — eu recebo uma pizza, mas pode não ser o que eu queria.

Nível 2 — O Detalhista ⭐ (Foco de hoje)

Eu descrevo com detalhes: cores, estilo, público-alvo, funcionalidades. A IA gera algo com identidade. Não importa se é ChatGPT, Replit ou v0 — o que importa é o nível de detalhe que eu coloco no pedido.

É como pedir "uma pizza margherita, borda recheada, sem cebola, bem assada".

Nível 3 — O Diretor Visual

Eu defino a direção visual do projeto — paleta de cores, tipografia, estilo, referências. A IA segue essas diretrizes pra criar algo com identidade profissional. Eu penso como um diretor de arte: "quais cores combinam com o público? qual estilo representa a marca?"

É como passar um briefing completo pro pedreiro — não só "quero parecido com aquilo", mas sim "quero isso, com essas cores, nesse estilo, pra esse público". O resultado é muito mais preciso.

Nível 4 — O Engenheiro

Eu olho o código por trás dos sites que gosto (aperto F12), entendo como as coisas funcionam, e peço pra IA explicar e adaptar. É engenharia granular — múltiplos arquivos, efeitos avançados, integrações.

É como um cozinheiro que abre o prato do concorrente pra entender os temperos. Não é pra copiar — é pra aprender técnicas.

Nível 5 — O Arquiteto e Gestor

Eu projeto sistemas inteiros — múltiplos componentes conectados, cada um com sua função. Não é mais só criar uma página; é pensar na arquitetura inteira: o que precisa existir, como as peças se encaixam, o que acontece quando algo muda.

É como gerenciar uma equipe de cozinheiros, cada um com sua especialidade, trabalhando juntos pra criar o prato perfeito.

Hoje focamos no Nível 2. Mas é bom saber onde eu posso chegar.

Quanto mais complexo o projeto, mais alto o nível que eu preciso estar. Um cartão de visita resolve no Nível 2. Um site com várias páginas pede Nível 4-5. E um projeto grande exige dividir em pedaços — o que a gente chama de Ciclo do Arquiteto.

Como a IA está evoluindo

A IA não nasceu pronta. Ela foi evoluindo justamente aprendendo a se combinar com mais ferramentas e ajustes. Olha como a IA na programação mudou ao longo do tempo:

Editores online como Replit, v0 e Bolt.new combinam IA + editor + execução em um só lugar — caminho mais curto pra iniciantes. É por onde começamos hoje.

O que mudou de uma era pra outra:

Em cada era, a IA ganhou novas ferramentas e ajustes que a faziam funcionar melhor:

A revolução não é a IA sozinha. São essas combinações que aprendemos a fazer. É como uma cozinha: um fogão sozinho não faz um prato. Mas com as ferramentas certas — panelas, facas, temperos — o resultado é completamente diferente.

A Bolha e o que vem depois

Não dá pra falar de IA hoje sem falar de bolha.

Estamos vivendo uma aceleração absurda. Em 2 anos, a IA passou de "gerar texto" a "criar sites inteiros, escrever código, fazer design". Empresas investem bilhões de dólares por mês pra não ficar pra trás.

Isso gera um problema real: custo. Mas pra entender o custo, preciso separar duas coisas que vimos ali em cima: treinar e usar.

Treinar é quando o modelo aprende — mostrar milhões de exemplos. Isso é caríssimo e acontece uma vez: precisa de um supercomputador com milhares de GPUs rodando por semanas. É como construir uma fábrica do zero: a construção custa uma fortuna, mas só é feita uma vez.

Usar é cada vez que eu pergunto algo e a IA responde. Cada resposta também gasta energia e computador, mas custa muito menos do que o treino. É como pedir um prato numa fábrica que já está pronta: a construção foi cara, mas cada prato é barato.

É por isso que existe tanta ferramenta grátis ou barata: pra empresa, cada resposta custa pouco. O problema é quando bilhões de pessoas usam todo dia — aí a conta cresce, com energia elétrica, hardware e equipe de engenheiros. Isso não é sustentável pra sempre: em algum momento, o preço vai subir ou o modelo de negócio vai mudar.

O que está acontecendo do outro lado do mundo:

Enquanto as empresas americanas gastam fortunas pra treinar seus modelos, a China está lançando modelos open-source — ou seja, gratuitos e abertos. DeepSeek, Qwen, Kimi, MiMo... são modelos que competem de igual pra igual com os americanos, mas que foram treinados com custo muito menor.

E o segredo deles não é só "gastar menos": eles estão testando outras técnicas pra fazer o modelo render mais com menos. Por exemplo, um modelo quenão usa o cérebro inteiro pra cada resposta — ele aciona só as partes que precisa, como um funcionário que só acende a lâmpada da mesa em que está trabalhando, em vez de iluminar o galpão inteiro. Outra técnica é aprender com um modelo maior: em vez de treinar do zero com milhões de exemplos, um modelo menor estuda as respostas de um modelo gigante e fica quase tão bom — como um aprendiz que copia um chef experiente, em vez de inventar todas as receitas do zero.

Isso muda tudo. Porque se o código é aberto, o uso também muda: em vez de pagar por cada resposta na nuvem de uma empresa gigante, qualquer pessoa pode rodar o modelo no seu próprio computador e pagar só a luz da própria máquina.

O que acontece com o uso de LLMs:

O uso de LLMs não vai acabar. No máximo, muda de formato. Em vez de modelos gigantes rodando na nuvem, talvez vejamos modelos menores, mais eficientes, rodando direto no celular ou no computador. O formato pode mudar, mas a utilidade — gerar texto, código, analisar dados — isso permanece.

Assim como a internet teve uma bolha em 2000 e depois continuou, a IA pode ter um momento parecido. Mas a tecnologia vai ficar. Aprender a usar é como aprender a usar a internet em 2005 — ninguém se arrependeu.

Algoritmos — a Receita dos Computadores

Agora vou descer um nível: o que um computador realmente faz o tempo todo.

O que é um algoritmo

Um algoritmo é uma sequência de passos que resolve um problema — exatamente uma receita de bolo:

Se eu sigo os passos na ordem certa, o bolo sai. Se eu troco a ordem ou pulo um passo, o bolo não sai — ou sai errado.

Todo o computador faz é executar algoritmos. Ele não "entende" as coisas — ele segue passos. Milhões de vezes por segundo.

As 3 regras de um bom algoritmo

1. A ordem importa — trocar um passo quebra tudo. Não adianta colocar o bolo no forno antes de misturar os ingredientes.
2. Cada passo precisa ser uma instrução clara — "Misture 3 ovos com 2 xícaras de farinha" é claro; "Misture" é vago. O computador não adivinha — ele faz exatamente o que o passo manda.
3. Sem um passo, quebra — faltou o fermento? O bolo não cresce. Faltou o passo de pagamento? O delivery não confirma o pedido.

É por isso que, quando eu peço algo pra IA, detalhes importam tanto. Estou escrevendo uma receita — e receita com passos claros dá resultado bom.

Onde os algoritmos moram no meu site

Meu site é feito de algoritmos:

• O navegador executa um algoritmo pra montar a página na tela
• O JavaScript é um algoritmo que roda no navegador do visitante — "se o botão for clicado, abra o WhatsApp"

Pra escrever esses algoritmos, eu uso uma linguagem de programação. Mas nem tudo que eu escrevo pro computador ler é programação.

As linguagens do site

Só o JavaScript é programação de verdade: é ele que executa o algoritmo. HTML e CSS descrevem — dizem o que é cada coisa e como ela se parece — mas não rodam nem tomam decisão. Por isso não são linguagens de programação.

E o JavaScript não é o único: existem outras linguagens de programação — Python, Java, C, PHP, C#. Cada uma é boa pra um tipo de tarefa (sites, apps, jogos), mas todas seguem a mesma ideia: escrever a receita (o algoritmo) de um jeito que o computador executa.

E existe uma camada por cima: os frameworks — kits de ferramentas prontos que aceleram o trabalho, como uma cozinha já montada com panelas no lugar, em vez de montar tudo do zero a cada prato. O React, por exemplo, é um framework do JavaScript. A gente vai ver mais sobre isso de novo em aulas futuras.

Quando eu descrevo um site pra IA em português, ela traduz pra linguagem do computador (HTML, CSS, JS). Eu descrevo a receita; ela escreve na língua que a máquina entende.

Ponte pra IA

Algoritmo = previsível. Mesmo input, mesmo resultado. Se eu fizer exatamente a mesma coisa, sai exatamente a mesma coisa. Uma receita de bolo não inventa um bolo diferente toda vez.

A Web

Agora vou ver o palco onde tudo acontece: a internet.

O que é a internet?

A internet é uma rede mundial de computadores conectados entre si. Quando eu "abro um site", tô na verdade baixando arquivos (imagens, textos, código) de um computador remoto e exibindo eles no meu dispositivo.

É simples: eu peço, o servidor entrega, meu celular ou laptop mostra.

A Analogia do Delivery

Como funciona, passo a passo

1. Eu digito o endereço → "quero google.com"
2. O DNS traduz → google.com vira 142.250.74.110
3. O navegador pede ao servidor → "me envie os arquivos"
4. O servidor responde → envia HTML, CSS, JS, imagens
5. O navegador monta → exibe o site na minha tela

Frontend e Backend

No passo a passo ali em cima, o servidor enviou os arquivos (HTML, CSS, JS, imagens). Mas o que isso quer dizer?

Um site é, no fundo, uma pasta com arquivos — como uma pasta de documentos no meu computador. A diferença é que essa pasta fica guardada num computador ligado 24h, chamado servidor. Quando alguém digita meu endereço, o servidor pega os arquivos da nossa pasta e entrega pra essa pessoa.

É como o depósito do delivery: os pratos não ficam na minha casa — ficam no depósito, prontos pra serem entregues. Meu site é a pasta de arquivos que mora no servidor.

Quando eu crio um site, tem duas partes:

• Frontend = O palco — tudo que o visitante vê e interage. Cores, botões, imagens, layout. Esses são os arquivos que o navegador recebe pra montar o que vemos: HTML, CSS, JS.
• Backend = Os bastidores — o que o servidor faz por trás além de entregar arquivos: guardar senhas, processar pagamentos, consultar um banco de dados.

Backend estático vs dinâmico

Um site pode ser estático — o servidor só entrega os arquivos prontos, igual pra todo mundo, como uma vitrine de loja. Ou dinâmico — o servidor prepara a página a cada visita, como uma cozinha que monta cada pedido na hora. Nesse curso, nosso foco são sites estáticos, focados na parte visual — e por isso a hospedagem pode ser gratuita. Vamos aprofundar nessas diferenças no Encontro 03.

E os apps de celular e programas de computador?

Funcionam do mesmo jeito: têm uma parte que eu vejo (tela, botões — o "frontend") e outra que processa por trás (o "backend"). A diferença é que cada um usa outras tecnologias:

A lógica é sempre a mesma: o que eu vejo e o que processa por trás. A gente foca na parte visual — que é onde a complexidade é menor e a IA ajuda bem.

Introdução a UI/UX

Agora que eu sei o que a IA faz, como o computador pensa e como a web funciona, na hora de criar um site eu preciso entender uma coisa: o que faz um site ser bom de usar e bonito de ver?

Essa é a UI/UX — e é o que separa um site genérico de um site que as pessoas gostam de usar.

O que é UX

UX significa Experiência do Usuário. É tudo o que o visitante sente e faz quando entra no meu site.

É como entrar numa loja: se eu acho o que procuro rápido, se os corredores são claros, se o caixa é fácil de encontrar — a experiência é boa. Se eu fico perdido, sem saber onde olhar — a experiência é ruim.

Por que UX importa:

Quanto mais tempo o visitante fica no site, mais a UX importa. Num linktree, ele fica 3 segundos — se achar o botão certo, tá ok. Num blog, ele fica 10 minutos — se o texto é miúdo, se não tem espaçamento, se a navegação é confusa, ele desiste.

É a diferença entre um corredor (curto, só precisa ser claro) e uma biblioteca (longa, precisa ser organizada, confortável, com sinalização boa).

Experiências curtas vs longas:

Se alguém precisa pensar pra usar, o UX falhou.

Consistência:

Sites mais complexos precisam de consistência: o mesmo conjunto de cores em todas as páginas, o mesmo estilo de botão, a mesma hierarquia de texto. Se cada página parece um site diferente, o visitante se perde — mesmo que cada página individualmente seja "bonita".

O que é UI

UI significa Interface do Usuário. É a parte visual — o que os olhos veem. Um site pode ser feio mas fácil de usar (UX bom, UI ruim) ou bonito mas confuso (UI boa, UX ruim). O ideal é os dois juntos.

UX é como eu me sinto na loja. UI é como a loja parece por fora e por dentro.

Existem sites que são considerados "feios" mas funcionam perfeitamente — o visitante acha tudo que procura, navega fácil, entende cada botão. A UX tá ótima, mas a UI não agrada visualmente. E tá tudo bem — porque o objetivo do site era funcionar, não ser bonito.

Um site de órgão público com fundo branco, texto preto e zero decoração pode ser "feio" — mas se eu acho o que preciso em 3 segundos, o UX tá redondo.

3 Regras de UI que a IA não sabe sozinho

A analogia da loja

O visitante precisa achar o que procura no tempo que ele quer gastar. Se ele quer rápido e não acha — falhou. Se ele quer explorar e o site não prende — falhou também.

O que a IA pode errar em design

1. Texto invisível — fundo claro com texto claro. Contraste ruim, visitante não lê.
2. Botão minúsculo — 30px de altura, polegar não acerta no celular. Regra: mínimo 44px.
3. Tudo do mesmo tamanho — sem hierarquia, olho não sabe pra onde olhar.
4. Site lotado — sem respiro, parece folha de jornal.
5. Cores que brigam — 5+ cores, parece parque de diversões. Máximo recomendado: 3 cores (1 dominante, 1 destaque, 1 neutra).

Identidade Visual

Identidade visual é o "rosto" do meu site. É o que faz o visitante reconhecer que é meu — e não de qualquer outra pessoa.

Quando eu ando na rua, reconheço a padaria pelo letreiro, pelas cores, pela vitrine. Identidade visual é isso.

Os 3 pilares:

Exemplos por estilo

Uma observação importante: essas sensações são sugestões, não uma verdade fixa pra toda cor. O vermelho de uma promoção — laranja-avermelhado, vibrante, com fundo claro — passa "não perca essa oferta". Mas o mesmo vermelho, num tom escuro e sóbrio num site de advogado, pode passar autoridade e confiança. Ou seja: depende do contexto e do teste, não de um dicionário de cores.

Quebrando fórmulas — Design com intenção criativa

Até agora eu falei de regras: hierarquia, contraste, respiro, 3 cores, identidade visual. Tudo isso é verdade. Mas existe algo importante que vai além das regras: a intenção do criador.

Existem sites que quebram as regras de propósito:

• Um site de artista com fundo preto, texto verde choque e fonte que parece código de computador — pra passar uma sensação de tecnologia
• Uma galeria de arte onde as imagens se sobrepõem e não tem espaçamento — pra criar tensão e desorientar o visitante de propósito
• Um site de moda com texto miúdo e fundo branco com letras brancas — pra forçar o visitante a interagir pra enxergar

Nesses casos, quem criou sabia que estava quebrando as regras. A decisão foi consciente. Não é erro de iniciante — é escolha de criador.

É como um prédio de concreto aparente: não tem pintura, não tem acabamento bonito. Mas tem uma identidade fortíssima. Quem construiu sabia o que estava fazendo.

A diferença entre "feito sem saber" e "feito de propósito":

Design persuasivo — design que guia o comportamento:

Existe também todo um campo do design focado em como posicionar, colorir e dimensionar elementos pra guiar o que o visitante faz. Botão grande e vermelho no canto da tela? Não é só hierarquia visual — é intenção de gerar clique. Depoimentos de clientes perto do botão de compra? Não é só organização — é prova social.

A IA não sabe que "botão vermelho grande + texto de urgência" gera mais cliques. Isso é decisão humana.

Não precisa ir fundo nisso agora. Mas é bom saber que existe — que por trás de cada botão, cor e posição tem uma decisão de como guiar o visitante. Conforme eu evoluo nos níveis, começo a entender e usar essas estratégias.

Construindo meu repertório visual

Eu não preciso inventar design do zero. Assim como um cozinheiro conhece vários pratos antes de criar o próprio, eu construo repertório visual — um "cardápio mental" de sites que eu já vi e sei que funcionam.

Templates open-source são sites prontos e abertos que qualquer pessoa pode olhar e reutilizar. Não são sites premiados de agência — são sites realistas, do tipo que uma padaria, um salão ou um prestador de serviço usa de verdade.

Onde encontrar referências realistas (dia a dia):

Como treinar o olho em cada site que eu visitar:

1. Onde tá a hierarquia? — qual é a primeira coisa que eu vejo? É o título maior?
2. O contraste funciona? — dá pra ler sem forçar a vista?
3. Tem respiro? — os blocos se separam ou tá tudo amontoado?

Prompts que funcionam (Nível 2)

Agora que eu sei o que é UI/UX, preciso aprender a pedir o que eu quero pra IA.

O que é um prompt

Um prompt é a instrução que eu dou pra IA. É como uma receita de bolo: se eu esquecer o fermento, o bolo não sobe.

Prompt ruim: "Faça um site pra mim"

Prompt bom: "Crie um Linktree para Maria da Padaria. Blocos: perfil com foto e nome, 3 botões de link grandes e arredondados, rodapé com meu nome. Cores: laranja e bege. Estilo: acolhedor e artesanal. Links para Instagram e WhatsApp (11) 99999-9999."

Cada parte é um ingrediente da receita — se eu pular um, a IA inventa, e o resultado fica genérico.

A fórmula do prompt

[QUEM É] + [O QUE QUER] + [BLOCOS] + [CORES] + [ESTILO] + [FUNCIONALIDADES]

O que colocar no prompt:

1. Identidade — quem é o site pra?

"Crie um Linktree para Maria da Padaria"

2. Blocos — o que tem na página?

"Perfil com foto e nome no topo, 3 botões de link, rodapé com meu nome"

3. Visual — como fica?

"Cores: laranja e bege. Estilo: acolhedor e artesanal"

4. Funcionalidades — o que o botão faz?

"Links para Instagram, WhatsApp (11) 99999-9999"

5. Público — pra quem é?

"Para clientes que gostam de doces artesanais"

Nível 1 vs Nível 2

Prompts pra identidade visual com estilos de mercado

Quando eu descrevo o estilo visual no prompt, a IA respeita. Mas preciso saber o que pedir. Aqui estão estilos consolidados no mercado e como descrever cada um:

Quando eu defino "estilo artesanal, cores quentes, fonte arredondada" no prompt — a IA respeita. Quando não defino, ela inventa uma pra mim, e geralmente fica genérico.

Prompts de ajuste

Erre sem medo — é só pedir pra ajustar. A IA não se ofende.

O Ciclo do Arquiteto

Pra projetos maiores, como um catálogo ou um site com várias seções, não peça tudo de uma vez — peça um pedaço por vez. Pra isso serve o Ciclo do Arquiteto:

Os 5 passos:

1. Dividir o projeto em pedaços pequenos — Header, seção de produtos, rodapé, formulário. Cada pedaço é um "pedido" separado.
2. Pedir à IA UM pedaço por vez — com detalhes claros (cores, texto, posicionamento). Nunca: "faça o site inteiro" (quando há várias seções).
3. Olhar o resultado — validar se ficou como esperado. Testar no celular e no desktop.
4. Corrigir o que precisar — ajustar com suas próprias mãos ou pedir à IA de novo. Não avançar com erro.
5. Avançar pro próximo pedaço — só quando o atual estiver bom.

Por que funciona:

• Evita erros grandes que são difíceis de corrigir depois
• Mantém você no controle
• Cada pedaço validado é uma garantia de qualidade

Aqui vale uma distinção: numa página única pequena, como o Linktree que vou criar agora, um prompt completo com os blocos já funciona — é como montar um único cômodo. O Ciclo do Arquiteto brilha quando o projeto tem muitos pedaços (várias seções, várias páginas) — aí, sim, cada pedaço é um pedido separado. Conforme os projetos crescem, o ciclo vira meu melhor amigo.

É como construir uma casa: você não pede pra IA construir a casa inteira. Pediu o aço? Verificou. Pediu as paredes? Verificou. Só depois pediu o telhado.

Criar seu Linktree no Replit

Agora é a parte divertida. Vamos usar tudo o que aprendemos — o que é IA, o que é UI/UX, como escrever um prompt — pra criar um site de verdade.

O que é um Linktree

Um Linktree é uma página web simples que reúne todos os links importantes de uma pessoa ou negócio. É aquele famoso "link na bio" que a maioria das pessoas usa no Instagram e TikTok.

Redes sociais como Instagram só permitem um link na bio. O Linktree resolve isso: uma página com vários botões, cada um levando pra um lugar diferente.

Pra que serve:

• Divulgar Instagram, WhatsApp, TikTok, portfólio
• Parecer profissional com um site próprio
• Organizar tudo num lugar só

Linktree grátis vs fazer por conta própria

O Linktree tem um plano gratuito, mas com limitações:

Planos do Linktree (preços praticados em julho de 2026):

Domínio próprio é o endereço do seu site (ex: mariadapadaria.com). Sem ele, o site fica em linktr.ee/mariadapadaria — funciona, mas não é tão profissional.

Se eu fizer meu próprio site, quanto custa?

Um domínio .com.br custa R$ 40 por ano — menos de R$ 3,50 por mês. Com hospedagem gratuita, o site inteiro sai por menos de R$ 4 por mês.

Comparação direta:

O Linktree é ótimo pra quem não quer pensar. Mas quem faz um curso básico e aprende a usar a IA já tem a ferramenta pra criar algo mais bonito, mais barato e mais seu — sem pagar US$ 15 por mês por isso.

Os blocos de um Linktree

Todo site tem blocos — peças que se encaixam. No Linktree, são 4 blocos principais:

É como montar um armário: cima (perfil) é o primeiro que você vê. Gavetas (botões) são onde estão as coisas que importam. Divisorias separam uma categoria da outra. E o rodapé é a etiqueta no pé do armário.

Quando pedir um Linktree pra IA, peço assim:

"Quero perfil no topo com foto e nome, 3 botões grandes arredondados, um divisor entre categorias, e um rodapé com meu nome."

Isso é subir de nível.

Acessando o Replit

O Replit é como um Google Docs pra sites. Tudo acontece na nuvem — não precisa instalar nada.

Passo a passo:

1. Abrir replit.com
2. Fazer login com Google ou GitHub
3. Criar novo projeto: escolher HTML/CSS/JS
4. Conhecer a tela: pasta de arquivos à esquerda, editor no meio, visualização à direita

Atalhos úteis:

• Ctrl+C — copiar
• Ctrl+V — colar
• Ctrl+S — salvar

Criando o site

Agora é a parte divertida. Vamos usar o Replit pra criar nosso Linktree com ajuda da IA.

1. Passo 1: Digitar o prompt no chat do Replit

   "Crie um Linktree para [NOME]. Blocos: perfil com foto e nome, 3 botões de link, rodapé. Cores: [CORES]. Estilo: [ESTILO]. Links para [REDES]. WhatsApp: [NUMERO]."

2. Passo 2: A IA gera o código automaticamente
3. Passo 3: Visualizar o site no painel ao lado
4. Passo 4: Testar se está funcionando

Dicas:

• Se não ficou bom, peço pra ajustar: "Troque as cores para azul e branco"
• Erre sem medo — é só tentar de novo
• Não tenha medo de pedir ajustes — a IA não se ofende

Problemas comuns

Vocês acabaram de criar um site profissional usando inteligência artificial. Isso que fizeram hoje é o mesmo processo que agências de design usam.

Publicar seu site

Criar o site é legal. Mas o que importa de verdade é publicar — colocar no ar pra qualquer pessoa acessar pelo link.

Publicar no Replit (Static Deployment)

O Replit tem uma função chamada Static Deployment — ela hospeda seu site gratuitamente na nuvem, com endereço próprio.

1. No canto superior direito, clique em Deploy (ou "Publish")
2. Escolha Static como tipo de deploy
3. O Replit pergunta qual pasta contém os arquivos públicos — Normalmente é public ou a raiz do projeto. Se o site é só HTML/CSS/JS puro, pode ser a raiz.
4. Clique em Deploy
5. Pronto — o site ganha um endereço assim: seu-nome.replit.app

É como publicar um post no Instagram: clico em "publicar" e o mundo inteiro pode ver.

Adicionando um domínio próprio (opcional)

Se eu quiser um endereço mais profissional (ex: mariadapadaria.com em vez de seu-nome.replit.app):

1. No painel do deploy, vá em Domains
2. Clique em Connect Custom Domain
3. Digite o domínio que eu comprei (ex: mariadapadaria.com)
4. O Replit mostra os registros DNS que preciso configurar no meu provedor de domínio
5. Copie os valores e cole no painel do provedor (Cloudflare, Registro.br, etc.)
6. Aguarde a verificação (pode levar de minutos a algumas horas)

É como trocar a placa de uma loja: o conteúdo é o mesmo, mas o endereço fica mais profissional.

O que muda depois de publicar

Limites do plano gratuito (Starter)

O plano gratuito é ótimo pra aprender e testar. Pra algo permanente ou profissional, o plano Core (pago) resolve.

Bônus: Exportando pra Vercel

O Replit é ótimo pra começar. Mas se eu quiser mais velocidade, mais controle ou um endereço mais profissional, a Vercel é uma alternativa excelente — e também gratuita pra sites estáticos.

A Vercel é uma plataforma de deploy usada por empresas grandes e projetos pessoais. O diferencial: ela distribui o site em servidores pelo mundo inteiro (CDN), então o site carrega rápido em qualquer lugar.

A Vercel Drop — o jeito mais fácil:

A Vercel tem uma ferramenta chamada Vercel Drop — eu arrasto uma pasta no navegador e o site fica no ar em segundos. Sem instalar nada. Sem Git. Sem complicação.

Passo a passo:

1. No Replit, baixe os arquivos do projeto:
   • Clique com o botão direito na pasta do projeto
   • Escolha Download as zip
   • Extraia o .zip no meu computador
2. Acesse vercel.com e faça login com Google ou GitHub
3. Na página inicial, clique em Add New... → Project
4. Escolha Import → selecione Upload (ou arraste a pasta diretamente)
5. Arraste a pasta extraída do Replit na área de upload
6. Clique em Deploy
7. Pronto — o site ganha um endereço assim: seu-projeto.vercel.app

É como trocar de entrega: o conteúdo é o mesmo, mas a Vercel entrega mais rápido.

Comparação Replit vs Vercel

Dica: se eu quiser atualizar o site na Vercel, basta arrastar a pasta de novo — ela sobrescreve a versão anterior.

Quando usar cada um:

Os dois são gratuitos. Não existe resposta errada — depende do que eu preciso.

Limites do plano gratuito da Vercel (Hobby)

Atenção: A Vercel proíbe uso comercial no plano Hobby. Se o site é pra vender algo (doces, serviços, portfólio profissional), o plano gratuito não permite. Nesse caso, o Replit Starter é mais flexível — ou é necessário pagar pelo plano Pro da Vercel ($20/mês).

Outras opções de deploy

Replit e Vercel são os pontos de partida mais acessíveis. Mas existem outras opções — cada uma com seu nível de complexidade:

Cada uma dessas opções é mais poderosa que a anterior — mas também mais complexa. É como subir degraus na escada: o Nível 2 (Replit/Vercel) é o primeiro degrau. O Netlify é o segundo. O GitHub Pages exige que eu saiba usar Git. Um servidor VPS exige que eu configure tudo do zero.

Por que não usamos essas hoje?

Porque o objetivo é aprender o conceito — não decorar comandos. O Replit e a Vercel fazem o trabalho pesado pra mim: criam o site, publicam, dão o link. Quando eu precisar de mais controle, mais velocidade ou mais personalização, aí eu evoluo pra essas outras ferramentas.

É como dirigir: primeiro eu aprendo com câmbio automático. Depois, quando estiver pronto, mudo pra manual. As duas levam ao mesmo lugar — o que muda é o quanto eu controlo.

O que vem depois

Hoje eu aprendi a usar IA pra criar um site no Nível 2 — com detalhes, identidade visual e prompts que funcionam. Mas o caminho não para aqui.

Próximos níveis

Cada nível é uma escada. Eu começo no primeiro e vou subindo conforme ganho experiência. Não pulo degraus — mas também não fico parado.

Recursos pra explorar

Ferramentas de design:

Galerias de inspiração:

Recursos de aprendizado:

Material de apoio

Links e recursos para acessar depois da aula:

• Slides da aula — Abrir apresentação completa
• Repertório Visual — templates open-source para estudar design (lista completa no glossário)
• MDN Web Docs — referência de HTML, CSS e JavaScript
• FreeCodeCamp — cursos gratuitos de programação web

⚠️ Certificação: Para obter o certificado do curso, além da frequência mínima de 75% dos encontros, é obrigatório realizar os Desafios de Programação (CATE). Estúdio Aberto, Diário de Bordo Digital e Saídas Guiadas são opcionais — se ocorrerem, complementam o aprendizado, mas não são obrigatórios para certificação.

Fim do Encontro 01 — você criou um site usando inteligência artificial. Na próxima aula, vamos aprofundar prompts e identidade visual.