📌 GLASS UI est un service en ligne conçu pour générer rapidement des composants HTML et CSS suivant les principes du glassmorphism. Inspiré du site ui.glass, cet outil permet de personnaliser à la volée couleurs, opacité, flou et autres propriétés visuelles pour créer des interfaces modernes et épurées.
📌 ANIME.JS est une bibliothèque JavaScript ultra-légère et polyvalente, conçue pour créer des animations web fluides et performantes. Avec seulement quelques kilobytes, elle offre une API intuitive pour animer tout type d’éléments : CSS, SVG, attributs DOM et objets JavaScript.
📌 TWEAKCN est un service en ligne dédié à la personnalisation visuelle des composants shadcn/ui. Il permet de concevoir des thèmes Tailwind élégants, directement dans le navigateur, sans inscription.
📌 DEEPSITE est une plateforme en ligne gratuite qui permet de générer instantanément des sites web professionnels, des jeux interactifs ou des applications à partir de simples descriptions textuelles, appelées “prompts”. Grâce à la puissance du modèle d’IA DeepSeek V3 et à un pré-prompt bien optimisé, DeepSite interprète vos besoins exprimés en langage naturel et produit automatiquement le code, la structure et le design de votre projet.
📌WIKITOK est une application web qui propose une interface inspirée de TikTok pour explorer des articles Wikipédia aléatoires en plusieurs langues.
📌 SHADCN est une bibliothèque de composants UI pour React, conçue pour offrir une expérience fluide et esthétique. Basée sur Radix UI et Tailwind CSS, elle permet d’intégrer rapidement des éléments modernes et accessibles dans une interface.
📌 DIVHUNT est une application qui permet de créer des sites web sans limites, en combinant flexibilité visuelle et puissance du code. Tout ce qui peut être codé peut être conçu visuellement avec Divhunt.
📌 SPRINKLES est une application MacOS qui permet d’ajouter du CSS et du JavaScript à n’importe quel site web afin d’en personnaliser l’affichage. Il suffit de stocker des fichiers .css et .js dans un dossier local, et SPRINKLES les applique automatiquement lors de la navigation.
📌 BUILDER.io est une application révolutionnaire pour le développement visuel, qui permet de transformer les processus web avec rapidité, efficacité et simplicité et de convertir automatiquement vos Figma en code.
📌 Midscene.js s’appuie sur un modèle de langage multimodal (LLM) capable de « comprendre » intuitivement une interface utilisateur. Il suffit de décrire les interactions ou les formats de données attendus, et l’IA se charge de l’exécution.
📌 CEREBRAS CODER est une application qui simplifie la création de vos projets en déléguant le code à une IA. J’ai fait un test avec le jeu 2048, et j’ai obtenu un résultat super en seulement 3 prompts, grâce à une génération de code instantanée et optimisée.
Aujourd’hui, nous allons voir ensemble dix astuces de conception qui vous aideront à faire une bonne première impression.
📌 V0 est une application révolutionnaire pour les développeurs et designers. Annoncée par Vercel il y a quelques mois, V0.dev utilise une technologie similaire à ChatGPT pour générer du code React dédié à l’interface utilisateur. Ce qui le distingue, c’est sa capacité à transformer directement des designs Figma en code React, facilitant ainsi la transition entre conception et développement.
📌 PLASH est une application permettant de transformer n’importe quel site web en fond d’écran dynamique pour votre bureau MacOS. Affichez vos actualités préférées, le fil Linkedin, votre agenda, ou même des paysages magnifiques en rotation. Vous pouvez même utiliser des GIF animés !
📌 CODDY est la plateforme idéale pour apprendre à coder de manière ludique, efficace et accessible à tous, partout et à tout moment. Elle permet de coder n’importe où, n’importe quand, sans qu’aucune installation ne soit nécessaire, avec des cours simples et des projets concrets !
📌 TWINE est un outil open-source pour la création d’histoires interactives et non linéaires. Si comme moi, vous êtes passionné par les Livres dont vous êtes le Héros, TWINE offre une plateforme accessible à tous pour créer vos propres histoires, que vous soyez débutant ou expert.
📌 GRADIENT ART est un éditeur en ligne qui vous permet de concevoir des illustrations, des motifs, des icônes et bien plus encore, à l’aide d’un éditeur riche en fonctionnalités avec superposition de layer, outils de conception et stockage gratuit sur le cloud.
📌 Je vous mets ici une traduction d’un article vraiment sympa sur les compétences clés d’un UX designers. Je me suis permis également d’amender, de compléter et d’ajouter un certain nombre de commentaires 😉
📌 STRUCTURE est un plugin FIGMA qui vous permet de générer du code HTML et SASS directement à partir des designs Figma
https://github.com/paperclip-ui/paperclip 📌 PAPERCLIP propose une approche hybride de la construction d’interfaces utilisateur qui vous permet de concevoir et de coder en parallèle. Il se concentre uniquement sur l’aspect visuel de votre application – juste du HTML, du CSS, que vous pouvez ensuite importer directement dans votre application type VSCODE. PAPERCLIP fonctionne actuellement avec React, d’autres…
📌 PRELINE UI est un design system, open-source, basés sur le framework CSS Tailwind, et bien évidement FIGMA.
📌 MILLE CHECK est un service en ligne qui analyse la performance, l’éco-conception, le SEO, la Sécurité et l’Accessibilité de vos urls.
📌 TLDRAW est un service de tableau blanc en ligne qui offre une expérience de collaboration et, grâce à son dernier support GPT-4V, l’utilisateur peut dessiner n’importe quoi et tirer parti de la puissance de l’IA pour transformer le dessin en site web.
📌 CSS LAYOUT est une librairie de centaines de composants pour les développeurs web qui cherchent à créer des sites web professionnels et visuellement attrayants. La collection comprend un large éventail de composants, tels que des menus de navigation, des boutons, des formulaires et des cartes, tous conçus à l’aide des techniques de mise en page CSS.
📌 CODEDEX est une toute nouvelle façon d’apprendre à coder pour les enfants et les adultes. Voyagez dans le monde fantastique de Python, HTML/CSS ou JavaScript, gagnez des points d’expérience pour débloquer de nouvelles régions et collectionnez tous les badges à votre propre rythme.
📌 HOLOGRAM est une application Freemium pour MacOS qui permet de personnaliser son environnement de bureau avec des widgets et des fonds d’écran personnalisables.
📌 SUPER DESIGNER est un ensemble de générateurs d’assets 2D, gratuits pour créer des arrière-plans, des motifs, des formes, des images et bien d’autres choses uniques en quelques clics.
📌 APPS GEYSER est un service en ligne permettant de générer une application Android au format APK simplement à partir de code HTML.
📌 KHROMA est un service en ligne utilisant l’IA pour apprendre les couleurs que vous aimez et crée des palettes qui vous plaisent et que vous pourrez combiner, rechercher et enregistrer vos préférées.
📌 GLASSMORPHISM UI GENERATOR est un outil en ligne permettant de générer le code CSS d’une interface en glassmorphism qui est une nouvelle tendance de conception qui repose principalement sur l’effet de flou d’un élément et d’un arrière-plan.
📌 IPREVIEW est une application MacOS qui résout le problème de certains fichiers qui ne peuvent pas être prévisualisés dans macOS Finder, Quick Look et surtout Spotlight.
IPREVIEW vous aide à améliorer considérablement l’expérience macOS en fournissant la mise en évidence du code, la prévisualisation du rendu Markdown et Jupyter, la prévisualisation des images Webp et Avif et l’affichage de leur taille, la prise en charge d’une variété de fichiers de modèles 3D et la prévisualisation des animations, la prise en charge du mode sombre, etc.
📌 WIN11REACT est un projet open source réalisé dans l’espoir de reproduire l’expérience de Windows 11 sur le web, en utilisant des technologies web standard comme React, CSS et JavaScript. Donc si vous voulez « tester » Windows 11 directement depuis votre navigateur.
📌 JSON VIEWER PRO est une extension chrome qui améliore l’expérience utilisateur de manipulation de vos fichiers JSON.
En effet JSON VIEWER PRO propose un code formater pour mettre en forme les réponses de vos API de manière structurée, et propose également une vue bien pratique sous forme d’arbre graphique.
📌 DESECH est un outil de conception #Freemium, destiné aux concepteurs et programmeurs web. C’est donc un outil No-Code / Low-Code qui propose un éditeur visuel reprenant les interfaces classiques d’outil de designer, mais également une vue HTML/CSS.
#cmondary
📌 RELATE est un outil de conception visant à fluidifier les échanges entre designers et développeurs via une application Design to code.
Designer vos écrans comme vous le feriez habituellement sur Sketch ou Figma et obtenez un code HTML / CSS / JS directement exploitable. Pendant que vous concevez, le code est généré en arrière-plan et peut être publié n’importe où. Un véritable gain de temps pour votre équipe !
#cmondary
📌 GRAPHITE est un service #NoCode de création de #SiteWeb 100% gratuit !
GRAPHITE SPACE est un éditeur visuel créé, avant tout, pour les designers. Avec GRAPHITE SPACE, vous pouvez utiliser des calques, un positionnement absolu des élémentes et d’autres outils bien connus des éditeurs graphiques pour concevoir une maquette et obtenir une page Web pixel perfect.
#cmondary #Tools
📌 MINIMAL TWITTER est une #extension #chrome / #firefox modifiant l’apparence de #twitter pour la rendre plus simple, plus claire, plus lisible.
📌 ARTICLE proposant pas moins de 15 #snippets différents en #CSS offrant la possibilité d’afficher une vidéo en plein écran en background.
Pas toujours optimal pour le #SEO, mais tellement immersif !!
Personnellement j’adore.
On ne pourra plus vous dire que c’est compliqué à implémenter 😀
#FullScreen #video #cmondary
📌 WAVES est un #snippet sur #Codepen proposant en quelques lignes de #HTML / #CSS / #JS une #animation de votre #background sous forme de vagues. Super sympa !
#cmondary
📌 CSS BACKGROUNDS est un générateur de #backgrounds en #CSS.
Vous pourrez piocher parmi les thèmes déjà généré, ou créer le votre, selon vos paramètres.
#cmondary
📌 3D BOOK CSS est un petit service en ligne pour créer des mockups de couverture de bouquin directement en CSS.
Vous pouvez donc appliquer n’importe quelle image en ligne (il faut donner l’URL de l’image, pas d’upload possible) comme couverture de bouquin. Et pour ceux que le code intéresse, il est disponible directement sur le site.
#Code #cmondary
📌 CSS.GG est une #librairie, gratuite, en ligne proposant plus de 700 #icons sous différents formats : #SVG, #FIG, #XD, #CSS, etc
#UX#UI#cmondary
📌 ARTICLE offrant la possibilité de surcharger le CSS de gmail afin d’en changer l’apparence !
L’idée est sympa même si pour ma part j’utilise SIMPLIFY GMAIL, l’extension chrome, qui me fait ça très bien !
#Gmail #Chrome #Extension #Tips #cmondary
📌 PALETTTE est un outil en ligne permettant assez simplement de créer une palette couleur et de l’exporter en JSON, CSS ou HEXA.
📌 ARTICLE vraiment sympa pour appliquer un filtre DUOTONE directement via le code CSS. Plus d’excuse pour votre équipe de dev 😉
📌 GRADIENTS est un service en ligne proposant des palettes de gradients de couleurs assez sympas, pouvait être téléchargés en CSS 😉
📌 ARCHETYPE est un service gratuit en ligne, vraiment génial ! Il va vous permettre de mettre en forme votre texte : sélectionner la police, sa taille, les espacements, visualiser les versions mobiles et desktops ainsi créées. Enfin vous aurez la possibilité de l’importer directement dans Sketch, ou l’exporter au format CSS !! Petit bonus, sachez que toutes les polices de caractères présentées ici sont téléchargeables !!
📌 THE MINE est un jeu d’aventure plateforme entièrement réalisé en CSS
📌 HORIZONTAL IMAGE ACCORDION est un petit snippet sur CodePen réalisé entièrement en CSS. Pour ceux que cela intéresserait, 13 autres codes d’accordéons sont disponibles sur le lien suivant
📌 CSS ONLY FLOAT LABEL est un code CSS hébergé sur le génial codepen illustrant merveilleusement bien l’animation d’un libellé passant de l’intérieur du champ de saisie , au dessus du champs de saisie. Personnellement, je considère comme une bonne pratique, à complété d’un control de surface indiquant si le champs est OK ou KO 😉
📌 CSS GRADIENT est un service web permettant de créer des gradients de couleurs linéaires ou radiaux et d’en obtenir le code CSS.
📌 Un article vraiment interessant vous aidant à créer un morphing à partir de forme SVG !
📌 HERO PATTERNS est un site proposant des patterns a utiliser en backgrounds. Le truc sympa c’est la possibilité de configurer ses couleurs et opacité, mais surtout l’export en SVG ou directement en code CSS.
📌 THREE DOTS est un petit projet sur Github sympa qui fourni 14 types différents d’animations CSS , des fameux 3 petits points qui vous invite à patienter. Il est amusant de retrouver sur une même base de 3 petits points , différentes conventions de signifiance des codes (Chargement, traitement en cours, écriture en cours, ….)
📌 TABLER est un dashboard responsive en HTML/CSS et bien sûr open source 😉 J’aime bcp la réalisation sobre et fonctionnelle de ce dashboard. Je rêverais de savoir/pouvoir pluger ce dashboard sur une base de données GoogleSheet…
📌 JAMICONS est une bibliothèque de 422 icônes vraiment bien réalisés, dont je me sers actuellement pour un projet.
