Choix Skillry
Suite SaaS Harborv1.0.2
Utilisez ce Skill pour créer une page web.
5.033 téléchargements0 « j'aime »1 enregistrements
$4.99
Qu'est-ce que j'obtiens en achetant ce Skill ?Un prototype de produit SaaS complet qui se lit comme un vrai produit abouti : landing page marketing, tarifs, connexion, un espace de travail connecté fonctionnel et un back-office d'administration, plus une étude de cas client, un changelog public et des pages légales. Toutes les vues partagent un même design porcelaine et bleu canard et un même état de démo en direct : les crédits dépensés ou les offres modifiées à un endroit apparaissent partout ailleurs. Les fenêtres produit sont dessinées en code, et toute la suite dispose de thèmes clair et sombre.
Le plus souvent choisi par
Mis à jour le 3 oct. 2026
Galerie d'aperçus
Skills similaires
Voir tous les Skills
Ce que vous obtenez
- Les vues landing, tarifs, connexion, espace de travail et admin, plus les pages étude de cas client, changelog, mentions légales et 404, toutes routées et partageant un même état de démo en direct
- Un espace de travail fonctionnel pour votre objet principal : rédigez, générez un brouillon par IA avec des crédits, planifiez, gérez les abonnés et voyez chaque action arriver dans le fil d'activité de l'admin
- Typographie Instrument Sans et Geist Mono, boutons pilule bleu canard, cartes douces, palette de commandes, thèmes clair et sombre et photos par rôle, dans un seul fichier hors ligne
Idéal pour
- Les fondateurs qui présentent une idée de SaaS et ont besoin que tout le produit paraisse réel avant même qu'un backend existe
- Les product managers qui mènent des démonstrations pour des parties prenantes ou des investisseurs à travers le marketing, l'app et l'admin
- Les développeurs indépendants qui veulent un seul design system pour le site public et le produit connecté
Pas pour
- Les apps de production avec une vraie authentification, de vrais paiements ou de vraies données ; connexion, paiement et crédits sont des simulations front-end
- Les landing pages seules ; si vous n'avez besoin que d'une page marketing, un Skill de landing page convient mieux
- Les marques grand public bruyantes et colorées ; Harbor est calme, centré sur le produit, avec un seul accent bleu canard
Lancement produit et croissance d'appWeb design et expériences numériquesCréer une page webCréer une landing pageStyle verrouilléRésultat modifiableLivraison rapidePorcelaine bleu canardInterface en pilulesCartes en relief douxMockups avec cadre de fenêtreUI claire et sombre
À propos de ce Skill
Décrivez votre SaaS et obtenez toute la surface du produit d'un coup : un site marketing, les tarifs, la connexion, l'espace de travail où se crée votre objet principal, et le back-office qui suit l'activité. Toutes les vues partagent un même design porcelaine et bleu canard et un même état de démo en direct, si bien qu'une action dans l'app apparaît dans l'admin. Le tout arrive dans un seul fichier qui s'ouvre hors ligne dans n'importe quel navigateur.
Ce que vous obtenez
- Une landing page avec une fenêtre produit, des onglets « comment ça marche », un bento de fonctionnalités, une étude de cas client, des citations, une FAQ et un bandeau d'inscription
- Des tarifs avec bascule de facturation, cartes d'offres, pack de crédits et tableau comparatif
- Un espace de travail connecté avec rédaction, planification, abonnés et paramètres, et une vue admin avec graphique des revenus, choix de période et tableau triable
- Des pages étude de cas client, changelog public, mentions légales et 404, une palette de commandes, et des thèmes clair et sombre
- Polices et photos intégrées, pour que la page n'effectue aucune requête réseau
Comment l'utiliser
- Indiquez au Skill le nom de votre produit, ce que les utilisateurs y créent, trois à six fonctionnalités, la structure de vos tarifs et les chiffres que l'entreprise surveille.
- Il renomme l'espace de travail, les panneaux et les actions d'après votre objet principal, rédige les textes manquants et les liste pour que vous les validiez.
- Ouvrez le fichier, connectez-vous à la démo, lancez l'action principale, vérifiez la vue admin et demandez des modifications avec des mots simples.
Les nouvelles photos proviennent de l'outil d'image de votre agent, qui peut avoir ses propres frais d'utilisation.
Ce qu'il vous faut avant de commencer
- Vous fournissez
- Nom du produit et son objet principal, ce que les utilisateurs créent ou gèrent · Trois à six fonctionnalités, la structure de vos tarifs et les trois ou quatre chiffres que l'entreprise surveille · Une étude de cas client, plus de vraies photos si le site montre de vraies personnes
- Dépendances
- Node.js 18 ou version ultérieure sur la machine de votre agent, pour exécuter le script fourni qui génère le fichier unique hors ligne · Un accès à Internet pendant la génération du fichier, pour télécharger une fois les polices et les intégrer · Un outil d'image dans votre agent pour les photos de connexion, d'étude de cas client et de portraits ; facultatif si vous fournissez les vôtres
- Coûts externes
- Les photos que vous ne fournissez pas sont générées avec l'outil d'image de votre agent, ce qui peut entraîner des frais d'utilisation de cet outil. Les fenêtres produit sont dessinées en code, et le fichier final n'effectue aucune requête réseau. Consulter l'exemple ne coûte rien.
- Dernier test
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Avis des utilisateurs
Chargement des avis…