Web sitesi şablonu
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.
Bu şablonun açıklaması henüz Türkçe olarak mevcut değil, bu yüzden İngilizce gösteriliyor.
AI · Ücretsiz
Sayfalar
Canlı demonun sayfa sayfa ekran görüntüleri. Tamamını görmek için sayfanın içinde kaydırın.
Tasarım analizi
Bu şablonun tasarımının yapay zekâ ile okunması: renkler, yazı tipleri, boşluklar, bölümler ve öne çıkan ayrıntılar. Şablonu kullandığınızda Ottermind buradan başlar.
Bu analiz henüz Türkçe olarak mevcut değil, bu yüzden İngilizce gösteriliyor.
- 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
Şablon ayrıntıları
- Kategori
- AI
- Yazar
- tailgrids
- Yayınlandığı yer
- 21st.dev
- Fiyat
- Ücretsiz
- Chat
- AI
Orijinal tasarım: tailgrids, 21st.dev üzerinde yayınlandı. Ottermind şablonun kodunu kopyalamaz; brife göre yeni bir site oluşturur.
Ottermind’in başladığı brif
Studio’da taslak olarak açılır; göndermeden önce markanızı, hedef kitlenizi ve sayfalarınızı ekleyin.
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.
Bu şablon nasıl kullanılır
- 1
Brifi doldurulmuş şekilde Ottermind Studio’da açmak için “Bu şablonu kullan”a tıklayın.
- 2
Brife markanızı, hedef kitlenizi, sayfalarınızı ve içeriğinizi ekleyin.
- 3
Ottermind bu tasarımdan ilham alan yeni bir site oluşturur; sohbette düzenlemeye devam edin.
