Encontro 01 · Aula 01

Introdução

UX + Web Design Empreendedor — Programação e Desenvolvimento Express com IA

Como a internet funciona, o que é IA e como fazer a IA construir seu primeiro site

Programa Rede Daora · UX + Web Design · 3 horas

Renato Ricco

Arquiteto de Soluções · Engenheiro de Software · Designer Gráfico

Formação Acadêmica

Ciência da Computação Comunicação Visual Gestão de TI

Clientes de destaque

Electrolux · Bosch · AB InBev

Visão geral

O que vamos ver hoje

1

Nos conhecer & o programa

Integração, o caminho do curso e a escada de 5 níveis

2

O que é IA

LLM, teclado inteligente, regra da média, 5 níveis

3

Algoritmos & A Web desvendada

A receita dos computadores e a analogia do delivery

4

Introdução a UI/UX

Experiência do usuário, interface, identidade visual

5

Prompts que funcionam

Fórmula do prompt Nível 2, estilos de mercado

6

Criar e publicar seu Linktree

Replit, Vercel, próximos níveis e recursos

0

Nos conhecer
& O programa do curso

De usuário pra criador — a promessa do curso

Integração

Antes de abrir o computador, a gente se apresenta

1

Nome

Como você quer ser chamado

2

O que você faz

Trabalho, arte, negócio

3

Uma coisa que você quer construir

"um site pra minha loja", "um cartão", "vender meus doces"

Perguntas pro grupo

Quem aqui já teve medo de tecnologia? (quase todo mundo levanta a mão) Quem aqui já tentou criar um site e desistiu no meio?

A promessa do dia: você vai sair daqui hoje com um site seu, no ar, com endereço próprio. Não no fim do curso — hoje.

Integração

O programa do curso

16 encontros · 1 por semana · 4 meses · 3 horas cada

Mês	O que eu vou aprender	O que eu vou criar
1	Fundamentos: IA, web, prompts	Meu primeiro site com IA
2	UI/UX na prática	Sites bonitos e fáceis de usar
3	Formulários, domínios e negócio	Site profissional + e-mail próprio
4	Projeto integrador em grupo	Portal de Talentos coletivo

O que importa não é virar expert em ferramenta — é ganhar autonomia pra transformar ideia em site sozinho.

Integração

A escada dos 5 níveis

O curso inteiro é uma escada — hoje você começa no Nível 2

Nível	Quem eu sou	O que cria	Analogia
1 — Curioso	Pedir coisas, testar	Texto, ideias, sites genéricos	"Pedir pizza sem especificar sabor"
2 — Detalhista ⭐	Descrever com detalhes	Linktrees, cartões, cartazes	"Pizza margherita, borda recheada"
3 — Diretor Visual	Guiar com referências	Identidade visual completa	"Briefing completo pro pedreiro"
4 — Engenheiro	Entender como funciona	Sites originais, multi-páginas	"Abrir o prato do concorrente"
5 — Arquiteto	Projetar sistemas	Sistemas completos, automações	"Gerenciar equipe de cozinheiros"

2

O que é IA

LLM, teclado inteligente, 5 níveis e a regra da média

Seção 2 · O que é IA

"IA" já tá por toda parte

Lembra dos inimigos dos jogos? Quando o personagem chega perto, ele muda de comportamento — parece que "sabe" que você tá ali, mas são regras escritas por um programador: um algoritmo.
Olha quanta coisa diferente já ganhou o nome de "IA":

Onde eu encontro	O que ela faz	Que "IA" é essa?
GPS / Waze	Acha o melhor caminho	Calcula a melhor opção
Instagram / TikTok	Decide a ordem do feed	Aprendeu o que me prende
Anúncios nos sites	Mostra o que eu procurei	Prevê o que eu compro
Teclado do celular	Adivinha a próxima palavra	Prevê o que eu vou escrever
Assistente de voz	Entende o que eu falo	Conversa comigo

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.

Efeito Borboleta: uma palavra ou vírgula a mais no prompt muda tudo. "Site de doces" e "site de doces artesanais, com cores quentes" geram sites bem diferentes — só uma palavra a mais mudou tudo.

Seção 2 · O que é IA

O que é uma LLM

Imagine uma pessoa que leu todos os livros, manuais, sites e códigos do mundo. Ela não tem consciência, mas se você pedir pra ela começar uma frase, ela sabe qual é a próxima palavra mais provável. LLM (Large Language Model — Grande Modelo de Linguagem) é o "motor" dos chats que usamos.

Treinar

Mostrar milhões de exemplos até o modelo captar padrões — cálculo estatístico de "qual palavra vem depois de qual". Isso é caríssimo e acontece uma vez.

Usar

Cada resposta usa o arquivo de estatísticas pra calcular a próxima aposta. É como o cozinheiro que já estudou as receitas — não volta pra escola a cada prato.

Não é um robô que pensa. É um assistente que prevê a próxima palavra mais provável — em escala gigantesca.

É como o bule de chá: cada exemplo que a IA viu pinga uma gotinha. Quando pergunto, ela serve essa mistura de tudo que foi treinada. E por isso "o sol nasce no leste" — não porque ela sabe, mas porque essa é a aposta mais provável do que todo mundo diria.

Seção 2 · O que é IA

Quais chats usar

Não existe "o melhor chat". Cada um tem ponto forte

🇺🇸 ChatGPT	O mais popular
🇺🇸 Claude	Ótimo pra código
🇺🇸 Gemini	Google integrado
🇺🇸 Perplexity	Pesquisa com fontes

🇨🇳 DeepSeek	Raciocínio potente
🇨🇳 Kimi	Ultra-longo (1M+ tokens)
🇧🇷 Maritaca AI	Treinado em português
🇧🇷 Amazônia IA	Foco em cultura brasileira

É 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.

Seção 2 · O que é IA

Além dos chats — apps com IA integrada

Esses apps vão além do chat: eles já executam o código pra mim

1

Replit

Editor online com IA que já cria e executa o site

2

v0

Gera interfaces prontas com descrição

3

Bolt.new

Cria um app completo do zero

4

Lovable

Cria apps sem código

É por onde começamos hoje — o caminho mais curto pra iniciantes.

Seção 2 · O que é IA

Vantagens e desvantagens

✓ O que a IA faz bem

Velocidade	Site que levaria dias, gera em minutos
Acessibilidade	Não precisa saber programar
Aprendizado	Pode explicar o código
Custo	Muitas ferramentas são gratuitas

✗ O que a IA faz mal

Alucinações	Inventa links, telefones, funcionalidades
Prompt ruim	Resultado ruim — depende da pergunta
Memória	Conversas longas podem se contradizer
Vieses	Reflete vieses dos dados de treino

A IA é minha assistente, não minha substituta. Decisões de design, conteúdo e estratégia — isso é meu.

A IA faz bem ⇄ O humano faz bem

Gerar código rápido	Decidir o que criar
Seguir instruções	Ter criatividade
Repetir tarefas	Entender o público
Processar informação	Tomar decisões éticas
Trabalhar 24h	Ter senso estético

Seção 2 · O que é IA

Por que a IA erra

Ela não pensa — ela tenta adivinhar

1

Links fictícios

Gera sites que não existem. Sempre teste os links.

2

Telefones inventados

Números que não existem. Confirme com quem tem o telefone.

3

Funcionalidades inexistentes

Código que "promete" algo que não funciona. Teste cada funcionalidade.

4

Referências falsas

Cita versões de bibliotecas que não existem. Pesquise por fora.

5. Estatísticas inventadas — "87% dos usuários preferem..." é dado sem fonte. E o código fantasma: parece certo, mas não funciona quando executa. Regra de ouro: teste tudo que a IA criar.

Seção 2 · O que é IA

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."

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.

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

Não basta "usar IA" — precisa saber usar bem.

Seção 2 · O que é IA

Como a IA está evoluindo

Era	Tecnologia	Autonomia
1	Autocomplete clássico — completa token por sintaxe	Zero
2	Autocomplete com ML — prevê blocos de código	Mínima
3	Chat + copiar-colar — gera, eu copio e colo	Baixa
4	IA no editor — sugere no local certo	Média
5	Agentes autônomos — planeja e executa	Alta
6	Multi-agentes + ferramentas externas	Máxima

O que muda de uma era pra outra: ferramentas

Prompt Engineering	Descrever o site com cores e estilo, não só "crie um site"
Fine-tuning	IA treinada pra uma tarefa específica
RAG	Conecta a IA a dados externos (ex.: cardápio da loja)
MCP / Skills	Dá à IA acesso a ferramentas (ex.: o Replit pra rodar o site)
Agentes	Planejam, executam e publicam com permissões

A revolução não é a IA sozinha — são as combinações. É como uma cozinha: o fogão sozinho não faz o prato; são as ferramentas certas (panelas, facas, temperos) que transformam tudo. E ainda existem frameworks — kits prontos que aceleram o trabalho, como o React pro JavaScript.

Seção 2 · O que é IA

A Bolha e o que vem depois

O problema do custo

Treinar um modelo custa uma fortuna. Grátis não é sustentável pra sempre — em algum momento o preço sobe ou o modelo muda.

O que a China tá fazendo

DeepSeek, Qwen, Kimi, MiMo — modelos open-source, de código aberto, treinados com custo muito menor. Qualquer um pode rodar.

O uso de LLMs não vai acabar — no máximo muda de formato. 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.

Desta vez é diferente: antes, a tecnologia automatizava trabalho braçal. Agora, automatiza o raciocínio. Por isso é importante aprender a usar a IA, não ser substituído por ela.

1

A Web
desvendada

Algoritmos, receita dos computadores, e a analogia do delivery

Seção 1 · Algoritmos

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.

1

A ordem importa

Trocar um passo quebra tudo. Não adianta colocar o bolo no forno antes de misturar os ingredientes.

2

Instrução clara

"Misture 3 ovos com 2 xícaras de farinha" é claro. O computador não adivinha — faz exatamente o que o passo manda.

3

Sem um passo, quebra

Faltou o fermento? O bolo não cresce. Quando eu peço algo pra IA, detalhes importam tanto.

O computador não "entende" as coisas — ele segue passos. Milhões de vezes por segundo.

Seção 1 · Algoritmos

As linguagens do site

Pra escrever um algoritmo, uso uma linguagem de programação. Cada uma tem um papel diferente

HTML

Marcação

Estrutura — diz o que é cada coisa (título, parágrafo, botão)

O esqueleto

CSS

Folha de estilo

Visual — cores, fontes, espaçamento

A roupa

JavaScript

Programação

Comportamento — o algoritmo que roda e toma decisões

O cérebro

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.

E não é só o navegador: cada tipo de app tem sua linguagem

Web (navegador)	HTML + CSS + JavaScript
App de celular (Android)	Kotlin
App de celular (iPhone)	Swift
Desktop (Windows)	C#

Seção 1 · Algoritmos

Algoritmo vs 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.

Frontend e backend são feitos desses algoritmos.

IA = gera (aposta)

A IA não escolhe uma opção pronta — ela faz uma aposta e cria a resposta do zero, com base no que foi treinada.

Mesma pergunta = resposta quase igual, mas não idêntica.

Frontend = o palco (o que o visitante vê). Backend = os bastidores (senhas, pagamentos, banco de dados). Na aula de hoje criamos sites estáticos — só a parte visual.

Seção 1 · A Web

Como a internet funciona

A analogia do delivery

Elemento	Analogia	Explicação
Navegador	O cliente pedindo	Chrome, Safari — o app que abro pra "pedir" um site
Site (URL)	O cardápio	O endereço que digito (ex: google.com)
DNS	A lista telefônica	Traduz nomes fáceis em números difíceis
IP	As coordenadas do restaurante	O endereço numérico onde o site mora (ex: 142.250.74.110)
Servidor	O depósito	O computador ligado 24h que guarda tudo do site
HTTPS	Caminhão com cadeado	Transporta os dados com segurança
Meu celular	Minha casa	O dispositivo onde o site é exibido

Seção 1 · A Web

Passo a passo: como um site chega na tela

1

Digito o endereço

"quero google.com"

→

2

DNS traduz

google.com → 142.250.74.110

→

3

Navegador pede

"me envie os arquivos"

→

4

Servidor responde

envia HTML, CSS, JS, imagens

→

5

Navegador monta

exibe o site na tela

É como pedir delivery: eu escolho (URL), o app traduz (DNS), o restaurante prepara (servidor), o caminhão entrega (HTTPS), e eu recebo em casa (celular).

Seção 1 · A Web

Sites estáticos vs dinâmicos

"Estático" significa que o código-fonte não muda — não que o site é parado

Site dinâmico

Código gerado a cada visita
Precisa de servidor processando
Mais complexo
Loja online, login, chat

Site estático

Código fixo (mesmo pra todo mundo)
Pode ter interatividade com JavaScript
Rápido e barato
Linktree, portfólio, cartão

Um site estático pode puxar dados de fontes externas (Google Sheets, APIs) e mostrar de forma dinâmica — é o JavaScript que busca e monta na tela.

3

Introdução
a UI/UX

Experiência do usuário, interface e identidade visual

Seção 3 · UI/UX

O que é UX

Experiência do Usuário — tudo o que o visitante sente e faz ao entrar no site

Tipo	Objetivo	Exemplo
Curta	Achar algo e sair	Linktree, cardápio online, horário
Média	Explorar e decidir	Portfólio, landing page, catálogo
Longa	Ficar e consumir	Blog, revista online, curso

É como entrar numa loja: se eu acho o que procuro rápido, se os corredores são claros, o caixa é fácil — a experiência é boa. Regra de ouro: se alguém precisa pensar pra usar, o UX falhou.

Loja com boa UX vs Loja com UX ruim

Produtos organizados por categoria	Produtos espalhados pelo chão
Sinalização clara	Sem nenhum aviso

Seção 3 · UI/UX

O que é UI

Interface do Usuário — a parte visual, o que os olhos veem

UX

Como eu me sinto na loja

"O site é fácil de usar?"

UI

Como a loja parece por fora e por dentro

"O site é bonito? As cores combinam?"

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.

Seção 3 · UI/UX

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

1

Hierarquia Visual

O olho pega o maior e mais colorido primeiro. Se tudo é do mesmo tamanho, o visitante se perde.

2

Contraste

Texto precisa ser legível. Fundo claro = texto escuro. Se não dá pra ler no sol, tá ruim.

3

Respiro Visual

Espaço vazio não é desperdício — as separações importam. A IA tende a preencher tudo.

É como um quarto: se tá tudo jogado no chão, parece bagunçado. Se tem espaço entre os móveis, parece arrumado.

Seção 3 · UI/UX

O que a IA pode errar em design

1

Texto invisível

Fundo claro com texto claro. Contraste ruim.

2

Botão minúsculo

30px de altura, polegar não acerta. 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 = parque de diversões. Máximo recomendado: 3 cores (1 dominante, 1 destaque, 1 neutra).

Seção 3 · UI/UX

Identidade Visual

O "rosto" do meu site — o que faz o visitante reconhecer que é meu

Cores

2 cores, uma dominante e uma de destaque. Ex: laranja + bege (artesanal)

Fonte

O "tom de voz" visual. Arredondada = acolhedor, quadrada = profissional

Tom

A sensação geral. Divertido, elegante, minimalista, artesanal

Estilo	Cores	Fonte	Sensação
Artesanal	Quentes (laranja, bege)	Arredondada	Caseiro, acolhedor
Profissional	Neutras (azul, cinza)	Limpa, sans-serif	Sério, confiável
Divertido	Vibrantes (rosa, amarelo)	Bold, expressiva	Alegre, energético
Elegante	Escuras (preto, dourado)	Serifada	Sofisticado

Quando eu defino a identidade no prompt, a IA respeita. Quando não defino, ela inventa uma pra mim — e geralmente fica genérico.

Seção 3 · UI/UX

Quebrar fórmulas + repertório visual

Design com intenção

Existem sites que quebram as regras de propósito — e quem criou sabe que está quebrando. Não é erro de iniciante, é escolha de criador. A IA gera o provável; se quero algo diferente, preciso pedir.

Construindo meu repertório

Não preciso inventar design do zero. Assim como um cozinheiro conhece pratos antes de criar o próprio, eu guardo referências de sites que funcionam.

Fonte de referência realista	O que encontro
Start Bootstrap / HTML5 UP	Negócio local, landing pages limpas
Astro Themes / 11ty	Templates de sites estáticos
uiCookies / TemplateMo	Restaurante, salão, portfólio

Em cada site que visito, pergunto: onde tá a hierarquia? O contraste funciona? Tem respiro? (Ver arquivo Repertório Visual.)

4

Prompts que
funcionam

A fórmula, Nível 2, estilos de mercado e ajustes

Seção 4 · Prompts

A fórmula do prompt

Um prompt é a instrução que eu dou pra IA. Se eu esquecer um ingrediente, a IA inventa.

[Identidade] + [Blocos] + [Visual] + [Funcionalidades] + [Público]

Quem é + o que a página tem + como fica + o que faz + pra quem é

Nível 1 — vago

"Faça um site pra mim" — resultado genérico, igual a milhares de outros. Como pedir "uma pizza".

Nível 2 — detalhado ⭐

"Crie um Linktree para Maria da Padaria. Blocos: perfil com foto e nome, 3 botões grandes e arredondados, rodapé. Cores: laranja e bege. Estilo: acolhedor e artesanal..."

Nível 1 vs Nível 2 não é sobre a ferramenta — é sobre o nível de detalhe do pedido.

Seção 4 · Prompts

Prompts de ajuste

A IA não acerta tudo de primeira. Erre sem medo — é só pedir pra ajustar.

Mudar nome	"Mude o nome para [SEU NOME]"
Trocar cores	"Troque as cores para [CORES]"
Adicionar link	"Adicione link para [REDE]"

WhatsApp	"Coloque o WhatsApp: [NUMERO]"
Botão maior	"Deixe o botão de WhatsApp maior"
Fundo	"Troque o fundo para [COR]"

A IA não se ofende. O segredo não é acertar de primeira — é ajustar com prompts de correção.

Seção 4 · Prompts

O Ciclo do Arquiteto

Pra projetos maiores, peça um pedaço por vez — construindo uma casa, não tudo de uma vez

1

Dividir

Header, produtos, rodapé

→

2

Pedir um pedaço

Com detalhes claros

→

3

Olhar

Validar no celular e desktop

→

4

Corrigir

Ajustar antes de avançar

→

5

Avançar

Só quando o atual estiver bom

Na página única do Linktree, um prompt completo com os blocos já funciona — o Ciclo brilha quando o projeto tem muitos pedaços.

5

Criar seu
Linktree no Replit

Do zero ao publicado — na prática

Seção 5 · Linktree

O que é um Linktree

Uma página web simples que reúne todos os links importantes — o famoso "link na bio". Redes sociais só permitem um link; o Linktree resolve isso com vários botões.

Grátis vs fazer por conta própria

	Linktree Pro	Seu site próprio
Preço mensal	US$ 15 (~R$ 90)	~R$ 4 (só o domínio)
Personalização	Limitado aos templates	A IA cria o que você quiser
Sem marca d'água	Precisa pagar	Sempre
Seus dados	Ficam com o Linktree	São seus

Seção 5 · Linktree

Os blocos de um Linktree

1

Perfil

Foto + nome + descrição

2

Botões

Retângulos que levam pra fora

3

Divisores

Linhas ou títulos de categoria

4

Rodapé

É como montar um armário: cima (perfil) é o primeiro que você vê. Gavetas (botões) são onde estão as coisas que importam. Divisórias separam categorias. O rodapé é a etiqueta no pé do armário.

Seção 5 · Linktree

Criando o site no Replit

Passo 1	replit.com → login com Google → projeto HTML/CSS/JS
Passo 2	Cole o prompt detalhado no chat do Replit
Passo 3	A IA gera os arquivos automaticamente
Passo 4	Visualize, teste, peça ajustes

Problemas comuns

Site não aparece	Clique em "Run"
Cores erradas	"Troque as cores para..."
Link quebrado	Coloque "https://" antes
WhatsApp não abre	wa.me/5511999999999

Dica: atalhos Ctrl+C, Ctrl+V, Ctrl+S. Erre sem medo — a IA não se ofende.

Quanto maior o projeto, mais cuidado: num projeto pequeno a IA faz quase tudo sozinha. Num projeto grande (várias seções, banco de dados, pagamentos), ela erra mais — divida em pedaços e revise cada parte.

6

Publicando
seu site

Replit, Vercel e outras opções de deploy

Seção 6 · Publicar

Publicar no Replit (Static Deployment)

Passo a passo

Clique em Deploy (canto superior direito)
Escolha Static
Selecione a pasta pública (ou a raiz)
Clique em Deploy
Pronto — endereço seu-nome.replit.app

Limites do plano gratuito

• 1 app publicado
• Expira em 30 dias (publique de novo)
• Badge "Made with Replit"
• 2GB de armazenamento
• Sem domínio customizado

É como publicar um post no Instagram: clico em "publicar" e o mundo inteiro pode ver. Pra algo permanente ou profissional, o plano pago resolve.

Adicionando um domínio próprio (opcional)

Domínio .com	~US$ 10–22/ano (Cloudflare, Namecheap)
Domínio .com.br	~R$ 40/ano (Registro.br)

Passos: 1. Compre o domínio → 2. No Replit, vá em Deploy → 3. Clique em Connect Custom Domain → 4. Digite seu domínio → 5. Copie os valores e cole no painel do provedor (Cloudflare, Registro.br, etc.)

Seção 6 · Publicar

Bônus: exportando pra Vercel

Mais velocidade (CDN global) e mais controle — também gratuito pra sites estáticos

Vercel Drop

No Replit, baixe a pasta (botão direito → Download as zip)
Acesse vercel.com e faça login
Add New → Project → Import → Upload
Arraste a pasta → Deploy
Endereço seu-projeto.vercel.app

Comparação rápida

Replit	Botão "Publish" · seu-nome.replit.app
Vercel	Arrastar pasta · seu-projeto.vercel.app

Atenção: a Vercel proíbe uso comercial no plano Hobby. Se o site é pra vender algo, o Replit Starter é mais flexível.

7

O que vem
depois

O que vem por aí

Na próxima aula

Encontro 02 — Prompts Avançados e Identidade Visual

Seção 7 · O que vem depois

Hoje você criou um site
usando inteligência artificial

O mesmo processo que agências de design usam. Agora é praticar e subir de nível — deixe o site no ar e compartilhe.

"Não basta usar IA — precisa saber usar bem."

Material + Lista + Inscrição

Acesse e pratique

Material de apoio

Apostila, links e referências

Contato

renato@ricco.dev.br

Introdução

UX + Web Design Empreendedor — Programação e Desenvolvimento Express com IA

Renato Ricco

O que vamos ver hoje

Nos conhecer & o programa

O que é IA

Algoritmos & A Web desvendada

Introdução a UI/UX

Prompts que funcionam

Criar e publicar seu Linktree

Nos conhecer& O programa do curso

Antes de abrir o computador, a gente se apresenta

Nome

O que você faz

Uma coisa que você quer construir

Perguntas pro grupo

O programa do curso

A escada dos 5 níveis

O que é IA

"IA" já tá por toda parte

O que é uma LLM

Treinar

Usar

Quais chats usar

Além dos chats — apps com IA integrada

Replit

v0

Bolt.new

Lovable

Vantagens e desvantagens

✓ O que a IA faz bem

✗ O que a IA faz mal

A IA faz bem ⇄ O humano faz bem

Por que a IA erra

Links fictícios

Telefones inventados

Funcionalidades inexistentes

Referências falsas

A Regra da Média

A analogia da escada

Exemplo prático

Como a IA está evoluindo

O que muda de uma era pra outra: ferramentas

A Bolha e o que vem depois

O problema do custo

O que a China tá fazendo

A Webdesvendada

O que é um algoritmo

A ordem importa

Instrução clara

Sem um passo, quebra

As linguagens do site

HTML

CSS

JavaScript

E não é só o navegador: cada tipo de app tem sua linguagem

Algoritmo vs IA

Algoritmo = previsível

IA = gera (aposta)

Como a internet funciona

Passo a passo: como um site chega na tela

Digito o endereço

DNS traduz

Navegador pede

Servidor responde

Navegador monta

Sites estáticos vs dinâmicos

Site dinâmico

Site estático

Introduçãoa UI/UX

O que é UX

Loja com boa UX vs Loja com UX ruim

O que é UI

UX

UI

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

Hierarquia Visual

Contraste

Respiro Visual

O que a IA pode errar em design

Nos conhecer
& O programa do curso

A Web
desvendada

Introdução
a UI/UX

Prompts que
funcionam

Criar seu
Linktree no Replit

Publicando
seu site

O que vem
depois

Hoje você criou um site
usando inteligência artificial