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 le Challenge IA.
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 le Challenge IA.
À 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.
Lire un guide, c'est bien.
Construire pendant 30 jours, c'est autre chose.
Ce guide t'a donné une méthode. Le problème, c'est qu'on enregistre des astuces IA et qu'on n'en applique aucune. Le Challenge IA, c'est l'inverse : un défi par jour, un système construit par jour, pendant 30 jours. Les inscriptions ouvrent bientôt.
Un challenge par jour
30 jours, 30 systèmes qui tournent pour toi.
Tes propres agents
Prompts et agents à installer pendant que tu construis.
Vidéos et démos réelles
Je construis devant toi, tu refais derrière.
Accès à vie
Ce que tu construis reste à toi, sans limite de temps.
Gratuit et sans engagement. Les inscrits sont prévenus en premier.
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.
De 0 à 70 000 abonnés en 3 mois. Ne cherche plus jamais quoi poster.
Je l'ai construite pour moi, parce que je perdais mes journées à chercher quoi poster. Zoe surveille les créateurs de ta niche, repère les Reels qui explosent cette semaine, comprend pourquoi ils marchent, et t'écrit le script du tien avec ta manière de parler. Elle tourne toujours sur mon compte tous les jours. Elle est maintenant ouverte à tout le monde.
Elle repère
Les Reels qui font x5 la moyenne du compte qui les a publiés.
Elle explique
Ce qui a marché dans la vidéo, hook par hook.
Elle écrit
Le script prêt à tourner, avec ta manière de parler.
Sans engagement, résiliable en un clic. Les résultats dépendent de ton travail : Zoe te dit quoi tourner, elle ne tourne pas à ta place.
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.