UI-Prototyp & Wireframe – Erstellen Sie klickbare Prototypen
Erstellen Sie Prototypen, die Sie anklicken können. UI/UX-Wireframes, App-Mockups und vollständig interaktive HTML-Prototypen – von der Skizze auf der Serviette zur klickbaren Erfahrung in einem Prompt.
Jedes andere KI-Design-Tool liefert statische Bilder. CellCog baut funktionierende Prototypen – echtes HTML, echte Interaktionen, echte User Flows, die Sie durchklicken und mit Stakeholdern teilen können. Landingpages, Mobile-App-Bildschirme, SaaS-Dashboards, Designsysteme – prototypisiert und bespielbar, nicht nur hübsch.
Verwendung
Führen Sie für Ihre erste CellCog-Aufgabe in einer Sitzung das Skill cellcog aus, um die vollständige SDK-Referenz zu erhalten – Dateihandhabung, Chat-Modi, Timeouts und mehr.
OpenClaw (fire-and-forget):
result = client.create_chat(
prompt="[Ihr Aufgaben-Prompt]",
notify_session_key="agent:main:main",
task_label="my-task",
chat_mode="creative",
)
Alle Agenten außer OpenClaw (blockiert, bis fertig):
from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
result = client.create_chat(
prompt="[Ihr Aufgaben-Prompt]",
task_label="my-task",
chat_mode="creative",
)
print(result["message"])
Warum interaktive Prototypen wichtig sind
Statische Mockups erzeugen eine grundlegende Lücke: Stakeholder sehen Bilder, keine Erlebnisse. Der Unterschied zählt:
| Statisches Mockup | Interaktiver Prototyp |
|---|---|
| „Stellen Sie sich vor, Sie klicken auf diesen Button“ | Klicken Sie auf den Button und sehen Sie, was passiert |
| „Dies würde zu... scrollen“ | Scrollen Sie und sehen Sie, wie der Inhalt geladen wird |
| „Der Hover-Zustand sieht so aus...“ | Fahren Sie mit der Maus darüber und sehen Sie die Animation |
| „Vertrauen Sie mir, der Flow ergibt Sinn“ | Gehen Sie den Flow selbst durch |
CellCog generiert echte HTML/CSS/JS-Prototypen, die auf Live-URLs gehostet werden. Teilen Sie einen Link und erhalten Sie Feedback zum tatsächlichen Erlebnis – nicht zu jemandes Vorstellung des Erlebnisses.
Was Sie prototypisieren können
Landingpages
Validieren Sie Ihre Botschaft und Ihr Design:
- SaaS-Landingpages: „Erstellen Sie eine Landingpage für einen KI-Schreibassistenten – Hero, Features, Preise, Testimonials, CTA“
- Produkt-Launch-Seiten: „Erstellen Sie eine Launch-Seite für eine neue Fitness-App mit Countdown und E-Mail-Anmeldung“
- Event-Seiten: „Erstellen Sie eine Konferenz-Landingpage mit Zeitplan, Sprechern und Registrierung“
- Portfolio-Seiten: „Erstellen Sie eine persönliche Portfolio-Landingpage für einen UX-Designer“
Beispiel-Prompt:
„Erstellen Sie einen interaktiven Landingpage-Prototyp für ‚FlowState‘ – eine Produktivitäts-App für Entwickler:
Abschnitte:
- Hero: ‚Code in der Zone. Bleib in der Zone.‘ mit App-Screenshot und CTA
- Problem: Ablenkungen unterbrechen den Entwickler-Flow (Statistiken)
- Lösung: Wie FlowState Ablenkungen intelligent blockiert
- Features: 3-4 Hauptfunktionen mit Symbolen
- Preise: Kostenlos, Pro (12 €/Monat), Team (8 €/Benutzer/Monat)
- Testimonials: 3 Entwickler-Zitate
- Abschließender CTA
Stil: Dunkles Thema, entwicklerfreundlich, Monospace-Akzente Alle Buttons und Navigation sollen interaktiv sein."
Mobile-App-Bildschirme
Entwerfen Sie vollständige App-Erlebnisse:
- Onboarding-Abläufe: „Erstellen Sie einen 5-Bildschirm-Onboarding-Flow für eine Meditations-App“
- Kernfunktionen: „Prototypisieren Sie das Haupt-Dashboard und die Navigation einer Fitness-Tracking-App“
- E-Commerce: „Erstellen Sie einen Produkt-Browse → Detail → Warenkorb → Checkout-Flow für eine Mode-App“
- Social Features: „Prototypisieren Sie eine Profilseite, einen Feed und eine Messaging-Oberfläche“
Beispiel-Prompt:
„Prototypisieren Sie eine mobile Essensliefer-App (handy-großer Viewport):
Bildschirme:
- Startseite – Restaurant-Raster mit Suche und Kategoriefiltern
- Restaurant – Menü mit Artikeln, Bewertungen, Lieferzeit
- Artikeldetail – Anpassungsoptionen, in den Warenkorb legen
- Warenkorb – Bestellübersicht, Lieferadresse, Zahlung
- Sendungsverfolgung – Live-Status mit Kartenplatzhalter
Navigation zwischen den Bildschirmen mit fließenden Übergängen. Stil: Sauber, modern, inspiriert von Uber Eats / DoorDash."
SaaS-Dashboards
Prototypisieren Sie komplexe Geschäftswerkzeuge:
- Analyse-Dashboards: „Erstellen Sie ein Marketing-Analyse-Dashboard mit echten Chart-Interaktionen“
- Admin-Panels: „Erstellen Sie ein Benutzerverwaltungspanel mit Tabellen, Filtern und Modals“
- CRM-Oberflächen: „Prototypisieren Sie eine Vertriebspipeline-Ansicht mit Drag-and-Drop-Kanban-Board“
- Einstellungsseiten: „Erstellen Sie eine umfassende Einstellungsseite mit Tabs, Formularen und Toggles“
Beispiel-Prompt:
„Prototypisieren Sie ein SaaS-Projektmanagement-Dashboard:
Linke Seitenleiste: Navigation (Projekte, Aufgaben, Team, Berichte, Einstellungen) Hauptbereich:
- Übersicht: KPI-Karten (abgeschlossene Aufgaben, überfällige, in Bearbeitung)
- Kanban-Board: Spalten für To Do, In Bearbeitung, Review, Erledigt
- Aufgabenkarten mit Avataren der Bearbeiter, Prioritäts-Tags, Fälligkeitsdaten
Interaktionen:
- Seitenleisten-Navigation wechselt die Ansichten
- Klicken auf eine Aufgabenkarte öffnet ein Detail-Modal
- Filter-Dropdown für Projekt/Teammitglied
Stil: Sauber, professionell, inspiriert von Notion/Linear."
Designsysteme & Komponenten
Bauen Sie wiederverwendbare Design-Grundlagen:
- Komponentenbibliotheken: „Erstellen Sie eine UI-Komponentenbibliothek: Buttons, Eingabefelder, Karten, Modals, Navigation“
- Style Guides: „Erstellen Sie einen interaktiven Style Guide mit Typografie, Farben, Abständen und Komponenten“
- Formularmuster: „Prototypisieren Sie gängige Formularmuster: Login, Registrierung, mehrstufiger Assistent, Einstellungen“
- Navigationsmuster: „Erstellen Sie Beispiele für Seitenleisten-Navigation, obere Navigation, untere Tab-Leiste und Hamburger-Menü“
Wireframes
Schnelle strukturelle Erkundungen:
- Low-Fidelity-Wireframes: „Erstellen Sie Graustufen-Wireframes für eine Blog-Plattform – Startseite, Artikel, Autorenseiten“
- User Flows: „Erstellen Sie ein Wireframe des gesamten Registrierungs- → Onboarding- → Erste-Aktion-Flows für ein Projektmanagement-Tool“
- Layout-Erkundungen: „Zeigen Sie 3 verschiedene Layout-Ansätze für eine Immobilienanzeigenseite“
- Informationsarchitektur: „Erstellen Sie ein Wireframe der Navigationsstruktur für eine E-Learning-Plattform mit Kursen, Lektionen und Fortschrittsverfolgung“
Prototyp-Funktionen
CellCog-Prototypen können Folgendes enthalten:
| Funktion | Beschreibung |
|---|---|
| Navigation | Funktionierende Links, Seitenübergänge, Tab-Wechsel |
| Interaktionen | Hover-Zustände, Klick-Aktionen, Toggles, Akkordeons |
| Formulare | Eingabefelder, Validierungszustände, Dropdowns, Checkboxen |
| Modals & Overlays | Popup-Dialoge, ausklappbare Panels, Tooltips |
| Responsive Design | Passt sich an Desktop-, Tablet- und Mobile-Viewports an |
| Animationen | Sanfte Übergänge, Ladezustände, Mikro-Interaktionen |
| Datenanzeige | Diagramme, Tabellen, Karten mit realistischen Beispieldaten |
| Dunkel/Hell-Themes | Theme-Wechsel-Unterstützung |
Ausgabeformate
| Format | Am besten geeignet für |
|---|---|
| Interaktives HTML (Standard) | Klickbare Prototypen auf Live-URL – mit jedem teilbar |
| Statische Bilder | Screenshots für Dokumentation oder Vergleich |
| Wireframe-Dokumentation zur Übergabe |
Interaktives HTML ist die Standardeinstellung. Das ist der ganze Punkt – Prototypen, die Sie anklicken können.
Auswahl von Modus & Tier
Verwenden Sie chat_mode="creative" für UI-Prototypen und Wireframes – der auf beste handwerkliche Qualität ausgerichtete Modus, optimiert für Designgeschmack, visuelle Feinheit und Stimmigkeit.
| Szenario | Empfohlen |
|---|---|
| Prototypen, Wireframes, Designsysteme | chat_mode="creative" (Standard-Tier "core") |
| Maximale handwerkliche Qualität für wichtige Stücke | chat_mode="creative", chat_tier="max" |
| Schnelle, wegwerfbare Entwürfe | chat_mode="agent", chat_tier="flash" |
Hinweis: Agent Team (chat_mode="team") ist für tiefgehende Recherchen reserviert.
Beispiel-Prompts
SaaS-Landingpage:
„Erstellen Sie eine Landingpage für ‚CodeReview.ai‘ – ein KI-Code-Review-Tool:
Hero: ‚Besseren Code ausliefern. Schneller ausliefern.‘ mit Demo-Video-Platzhalter Sozialer Beweis: ‚Vertrauen von über 500 Entwicklungsteams‘ Features: KI-gestützte Reviews, Integration mit GitHub/GitLab, Sicherheitsscans Preise: Starter (kostenlos), Pro (29 €/Monat), Enterprise (individuell)
Dunkles Thema, entwicklerfokussiert, grüne Akzentfarbe. Alle Navigationen und CTAs sollten interaktiv sein."
Mobile-App-Prototyp:
„Prototypisieren Sie eine Gewohnheits-Tracking-App (Mobile-Viewport):
Tab-Leiste: Heute, Gewohnheiten, Statistiken, Profil
Heute-Bildschirm: Liste der heutigen Gewohnheiten mit Checkboxen, Serienzählern und Fortschrittsring Gewohnheiten-Bildschirm: Alle Gewohnheiten mit Bearbeiten/Löschen, Button zum Hinzufügen neuer Gewohnheiten Statistiken-Bildschirm: Diagramme mit Abschlussraten, längsten Serien, Wochen-/Monatsansicht Profil-Bildschirm: Einstellungen, Benachrichtigungseinstellungen, Daten exportieren
Tab-Navigation sollte funktionieren. Abhaken von Gewohnheiten sollte animiert sein. Stil: Minimalistisch, beruhigend, inspiriert von der Streaks-App."
Designsystem:
„Erstellen Sie ein interaktives Designsystem für ein Fintech-Startup:
Farben: Primär (Tiefblau), Sekundär (Türkis), Akzent (Bernstein), Semantisch (Erfolg/Warnung/Fehler) Typografie: Skala von h1 bis body bis caption mit klarer Hierarchie Komponenten:
- Buttons (primär, sekundär, ghost, destruktiv – jeweils mit Hover/Aktiv/Deaktiviert-Zuständen)
- Eingabefelder (Standard, fokussiert, Fehler, deaktiviert)
- Karten (einfach, interaktiv, Statistik-Karte)
- Tabelle mit sortierbaren Kopfzeilen
- Modal-Dialog
- Toast-Benachrichtigungen
Zeigen Sie jede Komponente mit interaktiven Zuständen. Professionelle, bankentaugliche Ästhetik."
Wireframe-Erkundung:
„Erstellen Sie 3 verschiedene Layout-Ansätze für eine KI-Chatbot-Oberfläche:
Option A: Vollseiten-Chat (wie ChatGPT) Option B: Seitenpanel-Chat mit Hauptinhaltsbereich Option C: Schwebendes Chat-Widget
Jede sollte enthalten: Nachrichteneingabe, Konversationsverlauf, vorgeschlagene Prompts und Zugriff auf Einstellungen. Graustufen-Wireframes, fokussiert auf Layout und Informationshierarchie."
Tipps für bessere Prototypen
-
Beschreiben Sie die Interaktionen: „Button öffnet ein Modal“ oder „Tabs wechseln den Inhalt“ – sagen Sie CellCog, was passieren soll, nicht nur, was erscheinen soll.
-
Beziehen Sie sich auf bestehende Produkte: „Wie die Seitenleiste von Notion“ oder „Preisseite von Stripe“ kommuniziert mehr als Absätze Beschreibung.
-
Geben Sie den Viewport an: „Mobile-Phone-Viewport“ vs. „Vollständiger Desktop“ ändert den gesamten Designansatz.
-
Verwenden Sie realistische Inhalte: Echter Text, echte Zahlen, echte Bezeichnungen – nicht „Lorem ipsum“. Prototypen mit echten Inhalten erhalten besseres Feedback.
-
Geben Sie den Zweck an: „Für Benutzertests“, „Für Investoren-Demo“, „Für Entwickler-Übergabe“ – der Kontext bestimmt den Detailgrad.
-
Denken Sie in Flows, nicht in Seiten: „Registrierung → Onboarding → Dashboard“ ist nützlicher als 3 unzusammenhängende Seitenanfragen.
Wenn CellCog nicht installiert ist
Claude Code, Cursor, Codex + 70 weitere Agenten: npx skills add cellcog/skills --skill cellcog
OpenClaw: openclaw skills install @cellcog/cellcog
CellCog-Plugin-Benutzer: führen Sie /cellcog-setup aus (oder /cellcog:cellcog-setup, je nach Tool)
Manuelles Setup: pip install -U cellcog und setzen Sie CELLCOG_API_KEY. Siehe das Skill cellcog für die SDK-Referenz.