Website-Vorlage
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.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
AI · Kostenlos
Seiten
Screenshots der Live-Demo, Seite für Seite. Scrollen Sie innerhalb einer Seite, um sie ganz zu sehen.
Design-Analyse
Eine KI-Auswertung des Designs dieser Vorlage: Farben, Typografie, Abstände, Abschnitte und markante Details. Ottermind startet damit, wenn Sie die Vorlage verwenden.
Diese Analyse ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
- 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
Details zur Vorlage
- Kategorie
- AI
- Autor
- tailgrids
- Gelistet auf
- 21st.dev
- Preis
- Kostenlos
- Chat
- AI
Originaldesign von tailgrids, gelistet auf 21st.dev. Ottermind kopiert nicht den Code der Vorlage, sondern erstellt aus dem Briefing eine neue Website.
Das Briefing, mit dem Ottermind startet
Es öffnet sich in Studio als Entwurf – ergänzen Sie Marke, Zielgruppe und Seiten, bevor Sie es senden.
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.
So verwenden Sie diese Vorlage
- 1
Klicken Sie auf „Diese Vorlage verwenden“, um sie mit ausgefülltem Briefing in Ottermind Studio zu öffnen.
- 2
Ergänzen Sie das Briefing um Marke, Zielgruppe, Seiten und Inhalte.
- 3
Ottermind erstellt eine neue Website, inspiriert von diesem Design – im Chat verfeinern Sie sie weiter.
