SaaS-App-Screens
In einem Arbeitswerkzeug wird geplant, gesprochen, erfasst und berichtet. Diese Screens decken diesen Tag in der Reihenfolge ab, in der ein Team ihnen begegnet, vom Board am Morgen bis zum Bericht am Ende der Woche, jeder bereit für deine Daten.
Die Reihenfolge
Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.
Schritt 1 / 13 · App Shells
App Shell
Das Gerüst mit Kopfzeile, Navigation und Inhaltsbereich, in dem jeder Screen lebt.
Das Gerüst einer Anwendung. Es ordnet Navigation, Kopfzeile, Bereiche und Inhalt auf Desktop, Tablet und Telefon, mit einer Seitenleiste, die zur Schiene und zur Schublade wird, Navigation in der Kopfzeile, drei Bereiche, die sich auf dem Telefon schieben, ein Inspektor, der zum Sheet wird, und ein Fokusmodus für eine Aufgabe.
Schritt 2 / 13 · Aufgaben und Planung
Kanban-Board
Das Board zeigt jede Aufgabe nach Status, mit Ziehen und Ablegen, Swimlanes und Grenzen je Spalte.
Kanban-Boards mit Limits je Spalte, Karten per Maus, Touch, Tastatur oder Menü verschieben, Swimlanes, Sprint mit Burndown, Kartendetails und Filter.
Schritt 3 / 13 · Aufgaben und Planung
Aufgabenliste
Die Liste dessen, was ansteht, gruppiert, nach Priorität sortiert und mit einer Ansicht für meinen Tag.
Aufgaben-Screens mit Prioritäten, Unteraufgaben, Filtern und schönem Abhaken. Nach Fälligkeit, als sortierbare Tabelle, Eisenhower-Matrix, Mein Tag und Aufgabenseite.
Schritt 4 / 13 · Aufgaben und Planung
Ressourcenplanung
Ressourcen und Schichten im Wochenplan, mit Auslastung und freien Zeiten im Blick.
Planung für Personen und Räume. Buchungen ziehen und strecken mit Konflikten, Schichtplan mit offenen Schichten, Räume mit Jetzt-Linie, Auslastung und freie Termine.
Schritt 5 / 13 · Aufgaben und Planung
Zeiterfassung
Ein Timer und der Stundenzettel dahinter, für Teams, die nach Stunden abrechnen.
Zeiterfassung mit Live-Timer, Wochenzettel wie eine Tabelle, Einträgen je Tag zum Bearbeiten und Abrechnen, Wochenübersicht mit Diagrammen und Fokus-Timer.
Schritt 6 / 13 · Team und Zusammenarbeit
Messenger
Kanäle, Threads und Direktnachrichten halten das Gespräch neben der Arbeit.
Nachrichten für Apps. Chats mit Antworten, Reaktionen, Fotos, Dateien und Sprache, Tippanzeige und Lesestatus, Kanäle mit Threads, ein schwebender Messenger und Suche.
Schritt 7 / 13 · Team und Zusammenarbeit
Texteditor
Notizen, Konzepte und Kommentare mit Formatierung, direkt im Produkt geschrieben.
Texte bearbeiten ohne Paket. Ein Dokument mit voller Leiste und Wortzahl, Kommentare mit @-Erwähnungen, Markdown mit Vorschau, eine Auswahlleiste und E-Mail.
Schritt 8 / 13 · Files
Dateivorschau
Bilder, Dokumente, Tabellen und Code öffnen sich direkt, ohne Download.
Dateivorschau für Apps. Bilder mit Zoom und Filmstreifen, Code mit Suche und Gliederung, Tabellenraster, PDF mit Seiten und Suche und eine Schnellansicht.
Schritt 9 / 13 · CRM und Rechnungen
CRM-Kontakt
Ein Kontakt mit Verlauf, Deals und Notizen für jedes Produkt, das verkauft oder betreut.
Ein CRM-Kontakt in fünf Screens. Profil mit Reitern, Verlauf mit Filter und neuen Einträgen, Deals als Stufenleiter, Notizen mit Erwähnungen und Liste mit Detail.
Schritt 10 / 13 · CRM und Rechnungen
Rechnung
Rechnungen mit Positionen, Zahlstatus und Mahnungen, bereit zum Drucken oder Senden.
Rechnungen in fünf Screens. Ein druckfertiges Blatt, ein Editor mit Live-Summen, eine Liste mit Filtern und Sammelaktionen, Bezahlen und Mahnstufen.
Schritt 11 / 13 · Analysen und Berichte
Analyse-Übersicht
Kennzahlen und Verläufe der Woche in einer Übersicht.
Analysen in fünf Screens. Kennzahlen mit dem Zeitraum davor, eine Live-Ansicht, ein Trichter mit Kohorten und Zielen, das Publikum und ein Zeitraumvergleich.
Schritt 12 / 13 · Analysen und Berichte
Berichtsbaukasten
Ein Berichtsbaukasten lässt Kennzahlen, Filter und einen Versandplan für die Zahlen wählen, die geteilt werden.
Berichte bauen in fünf Screens. Spalten mit Gruppen und Summen, Diagramme aus einer Kennzahl, UND- und ODER-Filter, planen und teilen und Vorlagen zum Start.
Schritt 13 / 13 · Team und Zusammenarbeit
Teamverwaltung
Mitglieder, Rollen und Plätze schließen den Kreis für alle, die den Workspace verwalten.
Team-Screens für Apps. Mitglieder mit Rollen und sicherem Entfernen, Einladungen mit geprüften Adressen und Link, Rollen mit Rechten, Teams als Baum und Plätze.
Alles auf einmal installieren
Ein Befehl legt alle Components dieser Sammlung in dein Projekt.
aiw add @ai-website/app-shell @ai-website/kanban-board @ai-website/task-list @ai-website/scheduler @ai-website/time-tracker @ai-website/messenger @ai-website/rich-text-editor @ai-website/file-preview @ai-website/crm-contact @ai-website/invoice @ai-website/analytics-overview @ai-website/report-builder @ai-website/team-managementPrompt für deinen KI-Assistenten
Gib Claude, Cursor, Copilot oder Codex die Reihenfolge mit, dann entsteht die Seite aus genau diesen Teilen.
Bau die Screens einer SaaS-App mit dem UI Kit. Nutze in dieser Reihenfolge App Shell, Kanban-Board, Aufgabenliste, Ressourcenplanung, Zeiterfassung, Messenger, Texteditor, Dateivorschau, CRM-Kontakt, Rechnung, Analyse-Übersicht, Berichtsbaukasten und Teamverwaltung. 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
- KI-ProduktWas die KI tut, ehrlich gezeigt
- Creator-SeiteEine Person, ihr Werk und ihr Publikum
- 3D und BewegungTiefe, die die Botschaft trägt
- Shop-CheckoutVom Warenkorb bis zur Retoure