Webサイトテンプレート

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.