قالب موقع ويب
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.
وصف هذا القالب غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.
AI · مجاني
الصفحات
لقطات من العرض المباشر، صفحة تلو الأخرى. مرّر داخل الصفحة لرؤيتها كاملة.
تحليل التصميم
قراءة بالذكاء الاصطناعي لتصميم هذا القالب: الألوان والخطوط والمسافات والأقسام والتفاصيل المميزة. يبدأ منها Ottermind عند استخدام القالب.
هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.
- 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
تفاصيل القالب
- الفئة
- AI
- المؤلف
- tailgrids
- منشور على
- 21st.dev
- السعر
- مجاني
- Chat
- AI
التصميم الأصلي من tailgrids، منشور على 21st.dev. لا ينسخ Ottermind شيفرة القالب، بل ينشئ موقعًا جديدًا انطلاقًا من الموجز.
الموجز الذي يبدأ منه Ottermind
يُفتح في Studio كمسودة؛ أضف علامتك التجارية وجمهورك وصفحاتك قبل الإرسال.
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.
كيفية استخدام هذا القالب
- 1
انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.
- 2
أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.
- 3
ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.
