KI-Produkt
KI-Produkte gewinnen Vertrauen, indem sie ihre Arbeit zeigen. Diese Components stellen vor, was das Modell tut, lassen Menschen mit ihm sprechen, zeigen die Quellen der Antworten und lassen den Menschen dort entscheiden, wo es zählt.
Die Reihenfolge
Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.
Schritt 1 / 7 · AI Features
KI-Funktionen
Die Marketing-Section, die Prompts, Ergebnisse und die Stärken der KI zeigt.
Sektionen, die zeigen, was KI in einem Produkt leistet, in sechs Aufbauten: Assistent im Produkt, vom Auftrag zum Ergebnis, ein Agent bei der Arbeit, mit und ohne KI, Modellwahl mit Datenschutz und eine Live-Fläche.
Schritt 2 / 7 · AI und Chat
KI-Chat
Der Chat selbst, mit gestreamten Antworten, Anhängen und vorgeschlagenen Prompts.
Chats, Eingaben, Agenten und Antworten mit Quellen. Antworten laufen ein, alles geht mit der Tastatur.
Schritt 3 / 7 · KI-Antworten
Belege und Quellen
Quellen neben jeder Aussage machen Antworten überprüfbar.
Belege für KI-Antworten in fünf Formen. Quellenkarten mit Anzahl der Zitate, Fußnoten mit Sprung und Rückweg, Marken mit Vorschau der zitierten Stelle, eine Quellenleiste, die dem gewählten Satz folgt, und eine Prüfung, welche Aussagen eine Quelle wirklich deckt.
Schritt 4 / 7 · AI und Chat
Agenten-Lauf
Schritte, Tool-Aufrufe und Freigaben eines Agenten, sichtbar während er arbeitet.
Screens für KI-Agenten, die selbst handeln. Ein Live-Lauf mit Stopp, jeder Werkzeugaufruf mit Ein- und Ausgabe, eine Warteschlange für Freigaben, ein Plan zum Prüfen vor dem Start und der Verlauf aller Läufe.
Schritt 5 / 7 · KI-Einrichtung
Modellauswahl
Die Modellwahl mit Tempo, Kosten und Stärken nebeneinander.
Fünf Wege, das Modell hinter einer KI-Funktion zu wählen. Ein kompaktes Menü, Karten mit Tempo, Denktiefe, Kontext und Kosten, eine Vergleichstabelle, die automatische Wahl als Weg erklärt und Standards je Aufgabe mit Kostengrenze.
Schritt 6 / 7 · KI-Assistenten
Chat-Widget
Der Assistent als kleines Widget auf jeder Seite einer Website.
Ein Support-Chat für Websites mit einem Starter samt Hilfe-Start, einem Gespräch mit KI-Hinweis und Schnellantworten, der Übergabe an einen Menschen mit Warteschlange, einem Kontaktformular im Chat und einer KI-Antwort direkt auf der Hilfeseite.
Schritt 7 / 7 · Pricing
Preise
Pläne mit Credits oder Verbrauch, damit klar ist, was ein Monat KI kostet.
Pakete, Stufen, Rechner und Preislisten, formatiert in der Sprache des Besuchers.
Alles auf einmal installieren
Ein Befehl legt alle Components dieser Sammlung in dein Projekt.
aiw add @ai-website/ai-features @ai-website/ai-chat @ai-website/citations @ai-website/agent-run @ai-website/model-picker @ai-website/chat-widget @ai-website/pricingPrompt für deinen KI-Assistenten
Gib Claude, Cursor, Copilot oder Codex die Reihenfolge mit, dann entsteht die Seite aus genau diesen Teilen.
Bau eine Website für ein KI-Produkt mit dem UI Kit. Nutze in dieser Reihenfolge KI-Funktionen, KI-Chat, Belege und Quellen, Agenten-Lauf, Modellauswahl, Chat-Widget und Preise. Schreib echte Texte für mein Angebot und prüf die Seite in Light und Dark.Weitere Sammlungen
- SaaS-LandingpageVom Versprechen bis zum Test
- Lokales GeschäftCafé, Laden oder Handwerk um die Ecke
- ArztpraxisVertrauen, Sprechzeiten und der nächste freie Termin
- Online-ShopVom Regal bis zur Bestellung
- PortfolioErst die Arbeit, dann der Mensch dahinter
- Blog oder MagazinTitelseite, Lesen und Wiederkommen
- EventProgramm, Tickets und der Countdown
- App-DashboardDas Gerüst und die Screens darin
- Creator-SeiteEine Person, ihr Werk und ihr Publikum