
Galerie d'aperçus
Skills similaires
Voir tous les SkillsCe que vous obtenez
- Une suite reliée : accueil, tarifs avec paiement, connexion et inscription, produit fonctionnel, administration, changelog, contact, confidentialité, conditions d'utilisation et page introuvable, partageant une même histoire et un même état
- Le style scrapbook ambré : un Hero centré minimaliste avec une proposition en dégradé ambré et des tuiles autocollantes, puis photos scotchées, notes manuscrites, grille bento crème, tableau de roadmap et témoignages en mosaïque
- Des interactions fonctionnelles en mode clair et sombre : saisie de tâches avec analyse en direct, action de planification consommant des crédits, bascule de facturation, recherche, tri et filtres dans l'administration, et palette de commandes
Idéal pour
- Les équipes SaaS, productivité et logiciels indépendants qui veulent un site de lancement chaleureux et fait main plutôt qu'une page corporate en dégradé
- Les fondateurs qui ont besoin de maquetter site marketing, tarifs, produit et administration en une démo convaincante pour un lancement ou une première validation
- Les produits avec une boucle centrale claire (saisir, organiser, générer un résultat) qui peut être montrée en action dans la vue produit
Pas pour
- Les marques institutionnelles ou réglementées : autocollants, washi tape et notes manuscrites donnent un ton volontairement ludique
- Les applications en production avec de vrais comptes, paiements ou données : connexion, paiement et e-mails sont des simulations transparentes dans la page
- Les activités sans produit logiciel, comme un café ou un portfolio : la suite est construite autour d'un produit, de ses tarifs et d'une administration
Lancement produit et croissance d'appWeb design et expériences numériquesCréer une page webCréer une landing pageStyle verrouilléRésultat modifiableScrapbook ambréBento crèmeCollage d'UI inclinéeAnnoté à la mainÉditorial ludique
À propos de ce Skill

Amber Scrapbook Suite construit toutes les interfaces d'un produit SaaS sous forme d'un ensemble de vues reliées : accueil marketing, tarifs, connexion, produit fonctionnel, administration et pages annexes. Le côté marketing a un aspect fait main, avec papier crème, washi tape, polaroïds et notes manuscrites, tandis que les vues produit et administration restent calmes et précises. L'exemple est Dayfold, un planificateur de journée IA fictif.

Ce que vous obtenez
- Une suite complète : accueil, tarifs avec tiroir de paiement, connexion et inscription, le produit, l'administration, le changelog, le contact, la confidentialité, les conditions d'utilisation et une page introuvable
- Une page d'accueil qui enchaîne le Hero minimaliste, un défilé de logos, des sections de fonctionnalités avec cartes inclinées et photos scotchées, une grille bento crème, un témoignage client, un tableau de roadmap, des témoignages en mosaïque, une FAQ et une conclusion sur papier à lettres
- Une vue produit avec saisie de tâches en langage naturel et une action de planification qui consomme des crédits, plus un Dashboard d'administration avec statistiques, graphique et tableau d'utilisateurs consultable
- Un état partagé : s'inscrire ou acheter un forfait met à jour le menu du compte, les crédits, le badge de tarif et le tableau d'administration
- Thèmes clair et sombre, palette de commandes et un fichier autonome qui s'ouvre dans n'importe quel navigateur et fonctionne hors ligne

Comment l'utiliser
- Indiquez le nom de votre produit, une promesse en une ligne, 8 à 10 fonctionnalités dont les 3 phares, la structure de vos tarifs et quelques éléments de roadmap.
- Votre agent adapte la boucle produit à votre domaine, planifie et génère les photos, et construit chaque vue avec vos textes.
- Ouvrez le fichier, parcourez chaque page en mode clair et sombre, puis demandez des modifications sur les textes, les forfaits ou les sections.

Les photos proviennent de l'outil d'image de votre agent lorsqu'il en dispose, ce qui peut entraîner des frais d'utilisation de cet outil. Tout ce que votre brief omet devient un texte provisoire que l'agent liste pour que vous le confirmiez.
Ce qu'il vous faut avant de commencer
- Vous fournissez
- Nom du produit, promesse en une ligne et public · 8 à 10 fonctionnalités dont les 3 phares, plus la structure de vos tarifs · Éléments de roadmap, un témoignage client et d'éventuelles vraies citations ou photos (facultatif)
- 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 (facultatif ; sans lui, vous fournissez les photos ou obtenez des espaces réservés identifiés)
- Coûts externes
- Les photos sont générées avec l'outil d'image de votre agent lorsqu'il en dispose, ce qui peut entraîner des frais d'utilisation de cet outil. Sinon, l'agent vous demande vos photos ou livre des espaces réservés clairement identifiés. Aucun autre élément n'utilise de service payant.
- Dernier test
- v1.0.9 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Avis des utilisateurs
Chargement des avis…








