网站模板

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.