Skillry Pick
Harbor SaaS Suitev1.0.2
Nutze diesen Skill für: Webseite erstellen.
5.033 Downloads0 Likes1-mal gemerkt
$4.99
Was bekomme ich, wenn ich diesen Skill kaufe?Ein vollständiger SaaS-Produktprototyp, der wie ein echtes, fertiges Produkt wirkt: Marketing-Landing-Page, Preise, Anmeldung, ein funktionierender Workspace nach dem Login und ein Admin-Backoffice, dazu eine Kundenstory, ein öffentlicher Changelog und Rechtsseiten. Alle Ansichten teilen ein Design in Porzellanweiß und Petrol sowie einen gemeinsamen Live-Demo-Zustand – verbrauchte Credits oder geänderte Tarife tauchen also überall sonst ebenfalls auf. Produktfenster sind in Code gezeichnet, und die gesamte Suite hat ein helles und ein dunkles Theme.
Am häufigsten gewählt von
Aktualisiert am 3. Okt. 2026
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehen
Das bekommst du
- Ansichten für Landing Page, Preise, Anmeldung, Workspace und Admin, dazu Seiten für Kundenstory, Changelog, Rechtliches und 404 – alle mit Routing und einem gemeinsamen Live-Demo-Zustand
- Ein funktionierender Workspace für dein zentrales Objekt: verfassen, per KI mit Credits entwerfen lassen, planen, Abonnenten verwalten und jede Aktion im Admin-Aktivitätsfeed ankommen sehen
- Typografie in Instrument Sans und Geist Mono, petrolfarbene Pill-Buttons, weiche Karten, eine Befehlspalette, helles und dunkles Theme sowie rollenbasierte Fotos in einer Offline-Datei
Passt gut für
- Gründer, die eine SaaS-Idee pitchen und das ganze Produkt echt wirken lassen wollen, bevor es ein Backend gibt
- Produktmanager, die Stakeholder oder Investoren durch Marketing, App und Admin führen
- Indie-Entwickler, die ein einziges Designsystem für die öffentliche Website und das eingeloggte Produkt wollen
Nicht geeignet für
- Produktiv-Apps mit echter Authentifizierung, Zahlungen oder Daten; Anmeldung, Checkout und Credits sind Frontend-Simulationen
- Einzelne Landing Pages; wenn du nur eine Marketingseite brauchst, passt ein Landing-Page-Skill besser
- Laute, bunte Consumer-Marken; Harbor ist ruhig, produktorientiert und hat nur einen Petrol-Akzent
Produktlaunch & App-WachstumWebdesign & digitale ErlebnisseWebseite erstellenLanding Page erstellenStil fixiertBearbeitbares ErgebnisSchnelle LieferungPorzellan-PetrolPill-InterfaceSanft erhöhte KartenFensterrahmen-MockupsHelle & dunkle UI
Über diesen Skill
Beschreibe dein SaaS und erhalte die gesamte Produktoberfläche in einem Rutsch: eine Marketing-Website, Preise, Anmeldung, den Workspace, in dem dein zentrales Objekt entsteht, und das Backoffice, das das Geschäft im Blick behält. Alle Ansichten teilen ein Design in Porzellanweiß und Petrol sowie einen gemeinsamen Live-Demo-Zustand, sodass eine Aktion in der App auch im Admin-Bereich erscheint. Alles kommt als eine Datei, die offline in jedem Browser öffnet.
Das bekommst du
- Eine Landing Page mit Produktfenster, „So funktioniert's“-Tabs, Feature-Bento, Kundenstory, Zitaten, FAQ und einem Registrierungs-Band
- Preise mit Abrechnungsumschalter, Tarifkarten, einem Credit-Paket und einer Vergleichstabelle
- Ein Workspace nach dem Login mit Entwürfen, Planung, Abonnenten und Einstellungen sowie eine Admin-Ansicht mit Umsatzdiagramm, Zeitraumumschalter und sortierbarer Tabelle
- Seiten für Kundenstory, öffentlichen Changelog, Rechtliches und 404, eine Befehlspalette sowie helles und dunkles Theme
- Eingebettete Schriften und Fotos, sodass die Seite keine Netzwerkanfragen stellt
So nutzt du es
- Nenne dem Skill deinen Produktnamen, was Nutzer darin erstellen, drei bis sechs Features, dein Preismodell und die Kennzahlen, die das Geschäft im Blick behält.
- Workspace, Panels und Aktionen werden nach deinem zentralen Objekt benannt; fehlende Texte werden entworfen und dir zur Bestätigung aufgelistet.
- Öffne die Datei, melde dich in der Demo an, führe die Hauptaktion aus, prüf die Admin-Ansicht und wünsch dir Änderungen in einfachen Worten.
Neue Fotos stammen aus dem Bildtool deines Agenten, für das eigene Nutzungskosten anfallen können.
Was du vorab brauchst
- Du bringst mit
- Produktname und sein zentrales Objekt – das, was Nutzer erstellen oder verwalten · Drei bis sechs Features, dein Preismodell und die drei oder vier Kennzahlen, die das Geschäft im Blick behält · Eine Kundenstory, plus echte Fotos, wenn die Website echte Personen zeigt
- Abhängigkeiten
- Node.js 18 oder neuer auf dem Rechner deines Agenten, um das mitgelieferte Skript auszuführen, das die einzelne Offline-Datei baut · Internetzugang während des Builds, damit die Schriften einmal heruntergeladen und eingebettet werden können · Ein Bildtool in deinem Agenten für Anmelde-, Kundenstory- und Porträtfotos; optional, wenn du eigene lieferst
- Externe Kosten
- Fotos, die du nicht selbst lieferst, werden mit dem eigenen Bildtool deines Agenten generiert, wofür dessen Nutzungskosten anfallen können. Produktfenster sind in Code gezeichnet, und die fertige Datei stellt keine Netzwerkanfragen. Das Ansehen des Beispiels kostet nichts.
- Zuletzt getestet
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …