Le design Liquid Glass d’Apple, dans Claude Code
L’effet « verre liquide » d’Apple (panneaux translucides qui réfractent vraiment ce qui passe derrière) est reproductible sur n’importe quel site. Voici comment l’installer comme skill dans Claude Code en collant une phrase, et les réglages qui font la différence entre du verre premium et un filtre cheap.
C'est quoi, le verre liquide
Pas juste du flou : une vraie réfraction
Liquid Glass, c’est le langage visuel qu’Apple a déployé sur ses interfaces : des panneaux de verre translucides qui semblent courber la lumière. Un développeur de la communauté l’a reproduit pour le web dans une petite librairie open source (licence MIT) : un panneau qui déforme visiblement le contenu derrière lui sur son pourtour, avec une fine frange de prisme, pendant que l’intérieur reste parfaitement lisible.
La différence avec le simple backdrop-blur qu’on voit partout : ici la lumière est vraiment réfractée au bord du panneau, comme à travers du verre bombé. C’est ce détail qui fait « vrai Apple » au lieu de « carte floutée ».
Installe-le comme skill, en une phrase
Claude Code fait tout : il clone, il lit, il crée le skill
Le repo s’appelle liquid-glass, par deepika-builds. Point de transparence : ce repo contient la librairie (un seul fichier JavaScript), pas un skill déjà packagé. C’est justement le tour de magie : tu demandes à Claude Code d’en faire un skill, et c’est lui qui le construit. Il clone le repo, lit le code, et écrit le SKILL.md pour savoir s’en servir dans tous tes prochains projets.
Ouvre Claude Code (n’importe où) et colle ça :
Installe-moi le skill "liquid glass" depuis ce repo : https://github.com/deepika-builds/liquid-glass Clone le repo, lis le README et le fichier liquid-glass.js, puis crée un skill perso dans ~/.claude/skills/liquid-glass/ : un SKILL.md qui explique quand et comment appliquer cet effet dans mes projets web (inclure la lib, l'initialiser, régler ses options), plus une copie de liquid-glass.js. À la fin, montre-moi le skill créé et dis-moi comment le déclencher.
La version encore plus courte (« installe-moi le skill de ce repo : [lien] ») marche aussi : Claude comprend l’intention et improvise. Le prompt ci-dessus enlève juste l’improvisation. Une fois le skill en place, chaque fois que tu parleras de verre liquide dans un projet, Claude saura exactement quoi faire.
Ce repo est l’œuvre d’un membre indépendant de la communauté : il n’est affilié ni à Apple, ni à Anthropic. Comme pour tout code que tu installes, vérifie-le avant : ici c’est facile, la librairie tient dans un seul fichier JavaScript lisible, sous licence MIT. Prends deux minutes pour le parcourir (ou demande à Claude de te le résumer et de signaler tout ce qui serait louche) avant de l’intégrer à un vrai projet.
Demande du verre, Claude fait le reste
Des prompts en langage naturel, le skill gère la technique
Une fois le skill installé, tu n’as plus à penser à la technique. Dans n’importe quel projet web, tu demandes l’effet en français :
Applique l'effet liquid glass du skill sur la barre de navigation et les cartes de pricing : effet subtil, coins bien arrondis, et assure-toi que le fallback Safari/Firefox reste joli.
Claude inclut la librairie, initialise l’effet sur les bons éléments, et règle les options. Ensuite tu itères en une phrase : « plus prononcé », « moins de prisme », « garde-le juste sur le hero ».
Installer des skills, c’est bien. Savoir construire un vrai workflow design avec Claude (de la direction artistique au site en ligne), c’est ce qu’on apprend dans la formation Agentic eSchool.
5 réglages qui changent tout
Tirés directement de la doc de la librairie
Dose l'intensité avec scale
C'est LE réglage principal : la force de la déformation. Autour de -60 c'est subtil et élégant, vers -180 c'est spectaculaire (la valeur par défaut est -112). Demande à Claude « un effet plus discret » ou « plus dramatique », il ajustera ce paramètre.
La frange prisme se règle (ou se coupe)
Le petit liseré arc-en-ciel au bord du verre vient de l'option chroma. C'est lui qui fait « optique premium ». Trop présent à ton goût ? Il se réduit, ou se désactive complètement à zéro.
La vraie réfraction, c'est Chromium seulement
Chrome, Edge, Arc, Brave ont la réfraction complète. Safari et Firefox reçoivent automatiquement un flou dépoli propre à la place. Teste donc ton rendu sur Chrome, et suis la règle de l'auteur : l'effet ne doit jamais porter d'information, seulement du plaisir visuel.
Garde le verre pour les petits éléments
La doc est claire : évite d'appliquer l'effet à des éléments de plus de ~800 pixels de côté, le calcul devient coûteux. Navbar, cartes, boutons, badges : parfait. Une section entière de page : mauvaise idée. Détail utile : déplacer un élément ne coûte rien, c'est le redimensionner qui recalcule.
Regarde la démo avant de choisir tes réglages
Le dossier demo/ du repo contient une carte déplaçable qui montre l'effet en direct. Deux minutes dessus et tu sauras exactement quel niveau d'intensité tu veux, au lieu de régler à l'aveugle.
Ce skill est un exemple parfait du réflexe à prendre : transformer chaque bon repo en capacité permanente de ton Claude. Cette façon de bosser, on la systématise dans la formation Agentic eSchool.
À retenir
Une phrase dans Claude Code, et l’effet de design le plus commenté d’Apple devient une capacité permanente de ton assistant : il connaît la lib, les réglages, et les pièges des navigateurs. C’est ça, la vraie puissance des skills : chaque bonne trouvaille de la communauté s’installe une fois et te sert pour toujours.
Si ce genre de guide t’aide, viens sur Instagram @kingarms.ai. J’y partage chaque semaine des méthodes concrètes pour bosser avec l’IA.
L'IA te remplacera.
Sauf si tu apprends à la maîtriser.
Ce guide t'a donné un aperçu. Mais un guide, ça ne suffit pas pour transformer ta pratique. Ma formation Agentic eSchool t'apprend à intégrer l'IA dans ton quotidien pro, pas à pas, que tu partes de zéro ou que tu veuilles passer un cap.
Le cours complet
91+ leçons du débutant à avancé, enrichies chaque semaine.
Un plan personnalisé
Une IA génère ton parcours selon ton métier et ton niveau.
25 chapitres métiers
Workflows et prompts prêts à l'emploi pour ton poste.
Communauté + 40 guides
Un espace francophone et une bibliothèque qui s'enrichit.
Pas le temps d'apprendre ? On le fait pour toi.
Des solutions IA sur mesure, clés en main, pour automatiser tes process, réduire tes coûts et gagner du temps sur ce qui compte. Agents IA, automatisations, outils internes : on construit, tu récoltes.
Source
La librairie liquid-glass de deepika-builds (licence MIT), sa doc et sa démo : github.com/deepika-builds/liquid-glass. Les réglages cités (scale, chroma, limite de taille, support navigateurs) viennent directement de son README.
Disclaimer
Ce guide présente un projet communautaire indépendant, sans lien avec Apple ni Anthropic ; « Liquid Glass » fait référence au style visuel popularisé par Apple. Arms n’est pas l’auteur de cette librairie et n’est pas responsable de son fonctionnement ou de son évolution. Vérifie toujours le code que tu installes, même sous licence MIT, avant de l’utiliser dans un projet réel.
Créé par @kingarms.ai
Suis-moi sur Instagram pour plus de contenu IA
Lis la suite gratuitement
Entre tes infos pour débloquer le guide complet.