Template de site
AI Chat
Interface de aplicativo de chat com IA, desenvolvida em React e Tailwind CSS pela TailGrids, com threads de mensagens e campo de composição interativo
IA · Grátis
Páginas
Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.
Análise do design
Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.
- Visão geral
aplicativo web, limpo e minimalista, baixa densidade, claro
- Paleta
fundo #f3f4f6; superfícies [#d1d5dc]; texto #374151; texto abafado #6b7280; primário #3b82f6; acentos []
- Tipografia
títulos DM Sans, 400, caixa de frase; corpo DM Sans, 14px; escala h1 30px / h2 16px / h3 14px
- Forma e espaçamento
raio do botão 12px, raio do cartão 24px, sem bordas, sombra rgba(17, 24, 39, 0.04) 0px 20px 32px 0px, espaçamento entre seções 24px, largura do conteúdo 800px
- Seções (de cima para baixo)
- Cabeçalho — layout horizontal, logotipo à esquerda, alternador de menu à direita, fundo branco
- Barra lateral — navegação vertical, layout de duas colunas com ícones e rótulos, fundo cinza-claro, projetos agrupados sob "Projects" com ícones de pasta e números, histórico de conversas sob "TODAY" e "YESTERDAY", perfil do usuário na parte inferior com avatar e botão de atualização
- Área principal de chat — conteúdo centralizado, título de saudação grande em azul, subtítulo em cinza abafado, campo de entrada com placeholder, ícone de ferramentas, menu suspenso de seleção de modelo, quatro botões de ação abaixo com ícones e rótulos, tudo em fundo branco com sombra sutil
- Detalhes marcantes
- Cartões arredondados com raio de 24px
- Botões flutuantes de ação com sombras suaves
- Barra lateral minimalista com pastas de projetos e carimbos de data
- Campo de entrada com ferramenta integrada e seletor de modelo
- Cor de acento azul para texto primário e elementos interativos
- Espaçamento limpo com margens internas consistentes de 24px
- Outras páginas
- /chat: interface principal de chat com fios de mensagens e compositor
Detalhes do template
- Categoria
- IA
- Autor
- tailgrids
- Publicado em
- 21st.dev
- Preço
- Grátis
- Chat
- AI
Design original de tailgrids, publicado no 21st.dev. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.
O briefing de onde o Ottermind parte
Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.
Construa um site de IA inspirado no modelo "AI Chat". Brief de referência: Interface de aplicativo de chat com IA, desenvolvida em React e Tailwind CSS pela TailGrids, com threads de mensagens e campo de composição interativo Estilo e funcionalidades a refletir: Chat. Use o conteúdo original da minha marca — não os textos e imagens de exemplo do modelo.
Como usar este template
- 1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
- 2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
- 3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.
