Liquid Glass Design skill

O Claude escreve as telas do seu app iOS com o vidro novo da Apple do jeito certo, com botões, barras e transições que se fundem.

por affaan-m

instalações: 5.200
estrelas no GitHub: 288,9 mil
No skills.sh desde: maio de 2026
Licença: MIT

Atualizada no GitHub em 25 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

affaan-m
liquid-glass-design
O Claude escreve as telas do seu app iOS com o vidro novo da Apple do jeito certo, com botões, barras e transições que se fundem.Auditada5.200 instalações, grátis

O que ela faz

Reúne os padrões de código do Liquid Glass, o material do iOS 26 que desfoca o que está atrás, reflete a cor em volta e reage ao toque. No SwiftUI, mostra o .glassEffect com forma, cor e interação, e os estilos de botão .glass e .glassProminent.

Ensina a agrupar vários elementos de vidro num GlassEffectContainer, fundir formas com glassEffectUnion e fazer o vidro se transformar suavemente quando um elemento aparece ou some, com glassEffectID. No UIKit, usa UIGlassEffect e UIGlassContainerEffect; nos widgets, trata o modo tingido da tela inicial.

Traz também o que evitar: vidro em toda tela, vidro demais um dentro do outro, fundo opaco atrás do vidro e esquecer o clipsToBounds no UIKit. E pede teste no modo claro, escuro e tingido, com texto legível em cima do vidro.

Nas palavras de quem fez

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Use when building…

affaan-m, no SKILL.md

Quando usar

Atualizar um app pro visual do iOS 26
Criar botões, barras de ferramentas e cards de vidro
Fazer a transição em que um botão se abre em outros
Ajustar um widget pro modo tingido da tela inicial
Trocar o blur antigo pelo Liquid Glass

Depois de instalar, é só pedir assim

Troca os botões da barra de baixo do meu app SwiftUI pelo estilo Liquid Glass
Faz o botão de lápis se abrir num de borracha com a transição de vidro
Adapta meu widget pro modo tingido do iOS 26

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Liquid Glass Design no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Liquid Glass Design, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

Um app iOS em SwiftUI, UIKit ou com widget, e um Xcode que compile pro iOS 26, porque as APIs do Liquid Glass só existem a partir dele. A skill é só orientação: não pede conta nem chave.

Serve pra site ou app Android?

Não. Os exemplos são todos em Swift, pras APIs da Apple. Pra efeito de vidro em CSS, ela não ajuda.

Roda no Codex e no Antigravity?

Sim, é texto com exemplos de código, e qualquer agente que lê skill aproveita. Pra compilar e ver o resultado, você precisa de um Mac com Xcode.

Levar essa skill

1x liquid-glass-designR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/affaan-m/ecc

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.