網站範本

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 · 免費

開啟線上示範

頁面

線上示範的逐頁截圖，在頁面框內捲動即可查看完整頁面。

設計解讀

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.