Plantilla web
AI Chat
An AI chat application UI from TailGrids built in React and Tailwind CSS. Provides a conversation interface with message threads and a composer.
La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.
AI · Gratis
Páginas
Capturas de la demo, página a página. Desplázate dentro de cada página para verla entera.
Análisis del diseño
Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.
Este análisis aún no está disponible en español, así que se muestra en inglés.
- Overall
web app, clean and minimal, low density, light
- Palette
background #f3f4f6; surfaces [#d1d5dc]; text #374151; muted text #6b7280; primary #3b82f6; accents []
- Type
headings DM Sans, 400, sentence-case; body DM Sans, 14px; scale h1 30px / h2 16px / h3 14px
- Shape & spacing
button radius 12px, card radius 24px, no borders, shadow rgba(17, 24, 39, 0.04) 0px 20px 32px 0px, section spacing 24px, content width 800px
- Sections (top to bottom)
- Header — horizontal layout, logo on left, menu toggle on right, white background
- Sidebar — vertical navigation, two-column layout with icons and labels, light gray background, projects grouped under "Projects" with folder icons and numbers, conversation history under "TODAY" and "YESTERDAY", user profile at bottom with avatar and upgrade button
- Main chat area — centered content, large greeting headline in blue, subtext in muted gray, input field with placeholder, tools icon, model selector dropdown, four action buttons below with icons and labels, all on white background with subtle shadow
- Signature details
- Rounded cards with 24px radius
- Floating action buttons with soft shadows
- Minimalist sidebar with project folders and timestamps
- Input field with integrated tool and model selector
- Blue accent color for primary text and interactive elements
- Clean spacing with consistent 24px gutters
- Other pages
- /chat: main chat interface with message threads and composer
Detalles de la plantilla
- Categoría
- AI
- Autor
- tailgrids
- Publicada en
- 21st.dev
- Precio
- Gratis
- Chat
- AI
Diseño original de tailgrids, publicado en 21st.dev. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.
El briefing del que parte Ottermind
Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.
Build a ai website inspired by the "AI Chat" template. Reference brief: An AI chat application UI from TailGrids built in React and Tailwind CSS. Provides a conversation interface with message threads and a composer. Style and features to reflect: Chat. Use original copy and imagery for my brand rather than the reference's placeholder content.
Cómo usar esta plantilla
- 1
Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.
- 2
Añade al briefing tu marca, tu público, las páginas y el contenido.
- 3
Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.
