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’utilisation

1️⃣ Choisissez un framework (Tailwind, Material ou Bootstrap)

2️⃣ Activez ou non le Dark Mode

3️⃣ 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 frameworks

Créez instantanément une base solide avec des palettes de couleurs prêtes à l’emploi issues de :

1. Tailwind CSS
2. Material Design
3. Bootstrap

Chaque palette est automatiquement structurée, nommée et organisée selon les conventions du framework choisi.

🧩 2. Générez automatiquement vos collections et variables

En un seul clic, le plugin crée :

1. Collections → une organisation claire et hiérarchique de vos variables, prêtes à être utilisées dans tout votre design system
2. Core Variables → vos couleurs fondamentales (Primary, Secondary, Neutral…)
3. Semantic Variables → des couleurs prêtes à l’usage (Success, Warning, Error…) avec leur variantes Light / Dark si besoin !
4. 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 base

Text Styles → typographies cohérentes et adaptables

Grid Styles → grilles prêtes à l’emploi pour vos layouts

Shadow Styles → Un set de shadows prêtes à l'emploi.

De quoi poser les fondations complètes de votre design system, sans effort.

🧼 4. Supprimez proprement

Un 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 clic

Passez 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