Modifie les couleurs, mesure les contrastes et exporte des tokens cohérents en CSS et JSON. Médias PopNow facultatifs, après devis et accord sur le budget API USD. Le contraste seul ne constitue pas un audit complet d’accessibilité.
- Utilise PopNow pour
- Images
- Nécessite
- Node.js
Le skill est gratuit. Pour les images, vidéos ou sons IA en option, un devis vous est présenté pour accord avant la génération. Les appels avec une clé API utilisent votre solde API distinct en dollars américains (USD) ; les générations depuis ChatGPT ou Claude connecté via OAuth/MCP utilisent vos crédits du site.
v1.0.0 · Mis à jour le 24 oct. 2026 · 40 KB · Utilisable pour vos projets personnels et clients ; merci de ne pas revendre ni partager le paquet.
Ce que vous obtenez
Modifie les couleurs, mesure les contrastes et exporte des tokens cohérents en CSS et JSON.
Fichier HTML autonome avec données et code source modifiables
Validation locale, exemples représentatifs et contrôles exécutables
Médias PopNow facultatifs, après devis et accord sur le budget API USD
Idéal pour
- Revue de palette, composants et livraison de tokens
- Équipes souhaitant vérifier, exporter et transmettre un résultat hors ligne
Pas fait pour
- Le contraste seul ne constitue pas un audit complet d’accessibilité.
- Services nécessitant serveur en temps réel, comptes ou synchronisation partagée
Comment l’utiliser
Vous dites
Utilisez le skill PopNow « Vitrine du design system » (design-system-showcase) pour ceci : Crée « Vitrine du design system » avec mes données réelles et fournis des résultats vérifiables et des fichiers modifiables.
Puis essayez
Vérifie les cas limites et explique les champs rejetés.
Adapte la mise en page à notre marque et chiffre les médias PopNow avant leur création.
À préparer
- Couleurs hexadécimales à six chiffres, rayons et espacements pour fonds, textes et boutons.
- Public visé, libellés définitifs et destination de publication
- Médias autorisés et preuves des affirmations destinées au public
Skills similaires
Tout voir →- Web
Modèle de site de marque de boissons
+25Site lumineux pour marque de boissons ou snacks : boutique, composeur de caisse, carte des revendeurs et paiement de démo, en un fichier.
- Web
Site web de produit matériel
+25Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
- Web
Modèle de site e-commerce de sneakers
+25Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
- Web
Site de designer indépendant
+25Site audacieux d’un designer solo qui vend des forfaits à prix fixe : pages d’offres, études de cas et formulaire de brief.
- Web
Modèle de site d’agence de voyages
+25Site centré sur la photo pour circuits, guides ou refuges : recherche de voyages, demandes de réservation et quiz de choix de séjour.
- Web
Modèle de site glassmorphism
+25Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
- Web
Créateur d’avatar 3D
+25Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
WebSite de CV académique
+25Structure recherche, enseignement et services avec filtres de publications et export BibTeX.
- Web
Calendrier heatmap d’activité
+25Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
WebSite de produits agricoles
+25Filtre les équipements par culture et région, compare les spécifications et prépare une demande.
- Web
Modèle de landing page SaaS IA
+25Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
- Web
Section hero animée
+25Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
WebPortfolio d’architecture
+25Filtrez les projets, changez les unités de surface et imprimez une sélection.
WebSite pour produits audio
+25Comparez les caractéristiques et écoutez vos fichiers audio dans un véritable test A/B local.
WebAnalyseur de spectre audio
+25Analyse un enregistrement local avec spectre réel, fréquence dominante et niveau du signal.
WebModèle de site d’études de cas
+25Reliez les preuves aux indicateurs, vérifiez les évolutions et signalez les données manquantes.
WebTableau de trésorerie
+25Rapproche solde initial, entrées et sorties avec un solde calculé après chaque opération.
WebSite marketing de CMS
+25Modifiez un article JSON, vérifiez ses champs, prévisualisez-le et exportez le contenu valide.
WebPage de conférencier
+25Trouvez une intervention par thème et durée, puis exportez l’introduction et les besoins techniques.
WebModèle de site d’entreprise du bâtiment
+25Calculez quantités et prix unitaires, isolez la réserve et exportez le détail du budget.
WebModèle de site de conseil
+25Comparez les formats selon l’objectif, le délai et l’équipe, puis exportez un brief.
WebTableau de conversion
+25Calcule les conversions et abandons d’une même cohorte, avec un tableau vérifiable.
- Web
Modèle de site d’agence créative à shader
+25Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
WebPortail d’accueil client
+25Guide les étapes dépendantes avec responsables, progression pondérée et liste exportable.
- Web
Landing page SaaS sombre
+25Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
- Web
Site portfolio de designer
+25Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
WebJournal de développement
+25Crée un journal technique consultable avec code lisible et flux RSS exportable.
- Web
Site portfolio de développeur
+25Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
WebPage de vente de livre numérique
+25Lisez des extraits originaux, ajustez la taille du texte et gardez votre progression en local.
WebBudget modifiable
+25Recalcule budget prévu, dépenses réelles et solde à partir de quantités et prix modifiables.
- Web
Site SaaS éditorial
+25Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
WebGraphique de participation
+25Compare inscriptions, présences et capacité avec un taux de participation pondéré.
WebModèle de site événementiel
+25Filtrez les sessions, repérez les chevauchements et exportez votre programme vers un calendrier.
WebComparaison d’expériences
+25Compare taux de conversion, effectifs et intervalles de Wilson sans déclarer de vainqueur.
WebPortail de rapports financiers
+25Recherchez par année et type, comparez les indicateurs et exportez les données.
WebPrototype de recherche de vols
+25Filtre un inventaire local par trajet, date et voyageurs, puis compare prix et durée.
- Web
Diagramme d’architecture interactif
+25Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
- Web
Héros à grille interactive
+25Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
WebSite de décoration intérieure
+25Créez un brief exportable à partir des dimensions, du budget et des priorités d’une pièce.
WebSite de boutique de bijoux
+25Vérifiez les combinaisons de matière et de taille, puis exportez une liste de demandes.
- Web
Explorateur de graphe de connaissances
+25Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
- Web
Modèle de tableau de bord KPI
+25Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
- Web
Landing page à partir de maquettes IA
+25Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
WebListe d’attente avec parrainage
+25Testez des codes stables et une file locale dans une démonstration clairement signalée.
WebModèle de site de cabinet juridique
+25Créez une liste imprimable de préparation à un entretien selon le service et la juridiction.
- Web
Modèle de site web magazine
+25Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
WebCalculateur de tarifs d’adhésion
+25Calculez précisément les coûts selon l’effectif, la période et les options, puis comparez les offres.
WebSite de campagne associative
+25Présentez l’objectif et les hypothèses de coût, puis filtrez les missions par durée.
WebPage de présentation de cours en ligne
+25Vérifiez les prérequis, explorez le programme et calculez un planning hebdomadaire.
WebTableau des opérations
+25Classe les tâches par priorité, responsable et échéance avec des transitions explicites.
- Web
Héros à animation de particules
+25Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
- Web
Site de marque personnelle
+25Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
- Web
Modèle de site de boutique pour animaux
+25Boutique d’animaux qui fonctionne : catalogue, déclinaisons, panier, planificateur de recharges et paiement de démo, en un HTML.
WebPortfolio photographique
+25Organise les séries photo avec visionneuse au clavier et planche-contact imprimable.
- Web
Modèle de site de podcast
+25Un site de podcast avec héros lisible, archive d’épisodes, pages d’invités et un lecteur qui continue de jouer en naviguant.
WebSection de tarifs dessinée à la main
+25Tableau de tarifs façon carnet : cartes d’encre légèrement inclinées, bascule annuelle et mode sombre, dans un seul fichier hors ligne.
WebAnnuaire d’intégrations produit
+25Cherchez par fonction et authentification, puis préparez une liste de configuration.
- Web
Page de lancement produit cinématique
+25Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
WebModèle de site immobilier
+25Filtrez les biens par budget et nombre de chambres, puis imprimez un comparatif.
- Web
Site de présentation d’article de recherche
+25Une page projet pour votre article avec Figure 1 interactive, résultats, limites et citation en un clic.
WebRépartition des revenus
+25Compare montants et parts par catégorie en rapprochant les totaux de chaque période.
WebRapport de revenus
+25Affiche revenus, évolution et moyenne mobile en signalant les dates manquantes.
- Web
Modèle de dashboard admin
+25Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
- Web
Modèle de landing page SaaS
+25Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
- Web
Site CV portfolio façon scrapbook
+25Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
WebTable de données filtrable
+25Transforme un CSV en tableau avec recherche, tri numérique, pagination et export sécurisé.
WebÉtat des services
+25Présente composants, contrôles périmés et chronologie des incidents dans un instantané fiable.
- Web
Modèle de site de club sportif
+25Site de club, salle ou studio avec planning, pages d’entraîneurs, adhésions, plan des terrains et réservation dans un seul fichier.
- Web
Section mur de témoignages
+25Un mur de citations clients en maçonnerie ou en dérive lente, qui ne publie que les citations dont les personnes ont donné leur accord.
WebSite d’itinéraire de voyage
+25Organise les journées, vérifie les chevauchements et transferts, puis additionne les coûts connus.
WebPortfolio de cas UX
+25Relie décisions de design et preuves, en distinguant résultats observés et propositions.
- Web
Modèle de page d’automatisation de workflows
+25Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
WebPortfolio de rédacteur
+25Recherchez par publication et thème, enregistrez une liste de lecture et exportez une biographie.
Questions
Quelles données faut-il préparer ?
Couleurs hexadécimales à six chiffres, rayons et espacements pour fonds, textes et boutons.
Quelles sont les limites ?
Le contraste seul ne constitue pas un audit complet d’accessibilité.
Peut-on l’utiliser sans clé API ?
Oui. Le modèle, la validation et les exports fonctionnent localement sans clé. Seuls les médias PopNow facultatifs nécessitent un devis et l’accord explicite sur un budget API USD.
Comment conserver les modifications ?
Exportez le JSON actuel avant de fermer la page. Le fichier local n’est pas synchronisé automatiquement avec un serveur.