웹사이트 템플릿

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.