Ribbit UI Starter

About this plugin

Générez vos variables et styles en un seul clic ! Passez d’un fichier vide à un design system complet et cohérent en un instant — sans jamais casser vos styles existants.📘 Guide rapide d’utilisation1️⃣ Choisissez un framework (Tailwind, Material ou Bootstrap)2️⃣ Activez ou non le Dark Mode3️⃣ Cliquez sur le bouton "Générez !" Vos variables et styles seront crées dans quelques secondes !4️⃣ Supprimez les styles générés si vous souhaitez repartir à zéro🚀 Ce que vous pouvez faire :🌈 1. Créez une palette basé sur les meilleurs frameworksCréez instantanément une base solide avec des palettes de couleurs prêtes à l’emploi issues de :Tailwind CSSMaterial DesignBootstrapChaque palette est automatiquement structurée, nommée et organisée selon les conventions du framework choisi.🧩 2. Générez automatiquement vos collections et variablesEn un seul clic, le plugin crée :Collections → une organisation claire et hiérarchique de vos variables, prêtes à être utilisées dans tout votre design systemCore Variables → vos couleurs fondamentales (Primary, Secondary, Neutral…)Semantic Variables → des couleurs prêtes à l’usage (Success, Warning, Error…) avec leur variantes Light / Dark si besoin !Responsive Options → Gérez la max-width et hauteur des différents devices ainsi que la largeur des container !🧱 3. Créez aussi vos styles de baseText Styles → typographies cohérentes et adaptablesGrid Styles → grilles prêtes à l’emploi pour vos layoutsShadow Styles → Un set de shadows prêtes à l'emploi.De quoi poser les fondations complètes de votre design system, sans effort.🧼 4. Supprimez proprementUn bouton de suppression vous offre la possibilité d'effacer uniquement ce que le plugin a créé (palettes, variables, styles).✅ Vos styles personnels et variables externes ne sont jamais impactés. Pratique si vous souhaitez repartir de zéro ou tester une autre configuration.🔄 5. Changez de framework en un clicPassez instantanément de Tailwind à Material, ou de Bootstrap à Tailwind : Le remappage automatique actualise toutes vos variables pour s’aligner sur la nouvelle bibliothèque, sans perte ni doublon.🪄 En résumé✅ Créez des palettes Tailwind, Material ou Bootstrap✅ Générez vos variables Core, Semantic, Responsive et Collections✅ Ajoutez vos text styles, grilles et ombres automatiquement✅ Activez (ou non) un Dark Mode cohérent✅ Supprimez uniquement les styles générés par le plugin✅ Changez de bibliothèque en un clic, remappage automatique inclus✅ Conservez une structure claire et professionnelle, prête pour le partage