Meniscus
Sistema de design de vidro líquido para agentes de codificação de IA: especificações, valores testados e código de construção para web, SwiftUI, Flutter, React Native e Figma.
Servidor MCP hospedado
npx add-mcp 'https://meniscus.site/mcp'Instala no Claude Code, Codex, Cursor e outros
Documentação
Com Meniscus. As letras e listras se curvam para dentro em cada borda, o aro capta a luz. Mova a lente para dentro da barra.
claude mcp add --transport http meniscus https://meniscus.site/mcp
Depois execute /mcp no Claude Code, escolha meniscus e faça login. Configuração completa · 30+ outros assistentes
Mesmo prompt, mesmo modelo. Uma diferença.
Uma solicitação, sessões novas, o plano gratuito, nada editado. Sem Meniscus, o assistente desenha glassmorphism leitoso; com ele, o vidro permanece transparente e curva a paisagem atrás de si. Ambas as páginas rodam abaixo: role para ver.
A solicitação, palavra por palavraConstrua a tela inicial de um app de clima como página web: uma paisagem em largura total desenhada proceduralmente atrás de tudo (um céu ao entardecer, montanhas em camadas e um lago que as reflete; sem imagens externas), o nome da cidade e a temperatura atual, uma faixa de previsão horária e uma lista de previsão de 10 dias em cartões de vidro líquido, e uma barra de abas flutuante de vidro líquido. Coloque tudo em um único index.html autocontido nesta pasta (CSS e JS inline, sem etapa de build, sem solicitações externas), projetado para um viewport de telefone 390×844.
Claude Code sozinho 1 min 52 s Geada leitosa com uma borda branca uniforme em cada cartão: glassmorphism. A paisagem desaparece atrás dos cartões, e as linhas de previsão aparecem através da barra de abas. Abra em tela cheia
Claude Code + Meniscus (gratuito) 9 min 30 s Vidro transparente que curva as montanhas e o lago em cada borda, então a paisagem continua parte da tela. A aba selecionada é uma lente e a busca fica na própria, como no iOS. Abra em tela cheia
Ao vivo: role e toque dentro de qualquer telefone. Navegadores além de Chrome e Edge mostram capturas de tela, pois desenham o fallback de geada dessas páginas.
Como executamos
- A mesma solicitação, palavra por palavra, em sessões headless novas do Claude Code, cada uma em uma pasta vazia: Claude Sonnet 5.
- A única diferença: o servidor Meniscus no plano gratuito e "Use as ferramentas do meniscus." no final da solicitação.
- Duas execuções por lado; mostramos uma de cada. A segunda execução sem Meniscus parecia igual; a segunda com ele usou ícones de abas emoji e desenhou sua própria barra de status.
- Sem Meniscus, o agente levou menos de dois minutos; com ele, nove e meio, a maior parte lendo o briefing e a receita web.
- Nada editado. Capturas de tela tiradas no Chrome em 390 × 844; os telefones acima executam as páginas por conta própria.
- Executado em 1º de outubro de 2026.
O que é vidro líquido, regra por regra
Uma chamada para uma tela inteira.
Seu assistente pede create_design_brief para a tela que você nomeou e recebe a direção, tokens, especificações, o código para sua stack e uma lista de verificação para testar sua própria captura de tela.
Uma linguagem de design com números Moldura, deslocamento, desfoque, preenchimentos, aros e linhas de borda para cada material, ajustados à geração atual — além dos anti-padrões a rejeitar.34 componentes, 10 efeitos Barras de abas a folhas, refração a metal líquido: anatomia, estados, regras e os números para cada um.
Receitas para cinco mídias Figma, web, SwiftUI, Flutter e React Native — cada uma com o que essa plataforma pode e não pode fazer.
claude
- Construa uma tela de player de música com controles de vidro líquido sobre a arte do álbum. Use as ferramentas do meniscus.
- meniscus · create_design_brief(intent: "music player…", medium: "web")
- Direção, tokens, 4 especificações de componentes, o código de refração da receita, uma lista de verificação de aceitação, 2 imagens de referência
- Write(index.html)
- Mapa de deslocamento SVG através de backdrop-filter, um fallback de geada para Safari e Firefox
- Bash(screenshot at 390 × 844)
- Verificado contra o briefing: o aro curva ✓ rótulos legíveis ✓ uma família de ícones ✓
Cole um no seu assistente.
Conectado? Escolha sua stack. Nomear as ferramentas faz o assistente usá-las; uma tela inteira leva de cinco a dez minutos.
Build a music player screen as one index.html: album art behind liquid glass playback controls and a floating glass tab bar. Use the meniscus tools.
Build a SwiftUI iOS 26 photo viewer with a floating glass toolbar and a glass button group that morphs when tapped. Use the meniscus tools.
Add a liquid glass bottom navigation bar to this Flutter app that refracts the photo behind it, not just blurs it. Use the meniscus tools.
Add a liquid glass tab bar to this Expo app for iOS and Android, with an honest fallback where glass is not available. Use the meniscus tools.
Design a dark wallet screen with glass cards and a glass tab bar in Figma, and give me the layer settings for each glass body. Use the meniscus tools.
O mesmo material em todos os lugares onde você publica.
Figma e ferramentas de design
Configurações de efeito de vidro, uma pilha de camadas manual para ferramentas sem uma, prompts de geração de imagem.
Web
Refração por deslocamento SVG, um shader WebGL, um componente React e um fallback de geada.
SwiftUI
glassEffect, contêineres e morphing, barras de sistema, adições do iOS 27.
Flutter
Um shader de refração Impeller com seu widget, verificado em Android e iOS.
React Native
Um starter Expo executável com vidro iOS nativo e fallbacks honestos.
Construa vidro real de graça. Publique telas inteiras com Pro.
$0 para sempre
Tudo o que seu agente precisa para construir vidro líquido real, em todas as plataformas.
- Linguagem de design, 34 especificações de componentes e 10 de efeitos
- Receitas com código: web, Figma, SwiftUI, Flutter, React Native
- Briefings com 2 imagens de referência, 1 por especificação
- 50 chamadas de ferramentas por dia
- Pro grátis nos seus primeiros 14 dias
$79 por ano
Anual economize 27% Mensal
Telas inteiras como código, o kit React e a biblioteca completa.
-
Tudo no Free
-
10 modelos de tela como código React: casa inteligente, carteira, chat de IA…
-
Download do kit React: 34 componentes, 10 telas, efeitos WebGL
-
A biblioteca de referência completa, qualquer render em quadro completo
-
Download do starter React Native (Expo SDK 55)
-
Uso justo: 2.000 chamadas por dia
-
Garantia de reembolso de 14 dias Não é para você? Peça dentro de 14 dias do seu primeiro pagamento e receba tudo de volta.
-
Cancele a qualquer momento Em Faturas e cobrança na página da sua conta; você mantém o acesso até o fim do período pago.
-
Checkout pela Lemon Squeezy O comerciante de registro lida com pagamento, impostos e faturas. Nunca vemos seu cartão.
Preços em USD. Impostos são adicionados no checkout quando aplicáveis. Detalhes na política de reembolso e nos termos.
Equipe, Lifetime e a comparação completa
Perguntas frequentes
O que é um servidor MCP?
O Model Context Protocol permite que assistentes de IA como Claude Code, Codex, Cursor e VS Code chamem ferramentas. Meniscus é um conjunto de ferramentas que entrega ao seu assistente os números, especificações, receitas e imagens de referência para vidro líquido, para que ele projete e construa a coisa real em vez de um cartão desfocado.
Isso é o Liquid Glass da Apple?
Não. Meniscus é um sistema de design independente que ensina o estilo visual em todas as plataformas, incluindo web, Flutter e React Native, onde a Apple não entrega nada. Ele segue o lançamento atual da Apple (iOS 27) onde as plataformas da Apple são o alvo.
Com quais assistentes ele funciona?
Qualquer cliente MCP que suporte servidores remotos com login OAuth: Claude Code, Codex, Gemini CLI, Copilot CLI, Cursor, VS Code, Zed, JetBrains, Claude, ChatGPT e mais. A documentação tem a configuração para cada um; clientes que executam apenas servidores locais se conectam através da ponte mcp-remote.
O que o plano gratuito inclui?
Tudo o que seu assistente precisa para construir vidro líquido real: a linguagem de design, todas as especificações de componentes e efeitos, e as receitas com código para web, Figma, SwiftUI, Flutter e React Native, com imagens de referência em cada briefing e 50 chamadas de ferramentas por dia. Sem necessidade de cartão, e toda conta nova recebe Pro grátis nos primeiros 14 dias. Planos pagos adicionam telas inteiras como código React, o kit React, a biblioteca de referência completa, o starter Expo e volume de uso justo.
Posso usar o que ele produz em trabalho de cliente?
Sim. Designs e código que seu assistente cria com Meniscus são seus para publicar, comercial ou não. Você não pode revender as especificações, imagens ou starters em si.
O que acontece quando a Apple muda o material novamente?
O servidor hospedado atualiza para todos no dia em que publicamos a mudança; seu assistente recebe os novos números na próxima chamada. A Apple lançou o iOS 27 em 14 de setembro de 2026; Meniscus mudou para seus números 12 dias depois. Cada mudança está no changelog.
E se Meniscus não for para mim?
Fique no plano gratuito quanto quiser; ele não precisa de cartão. Se você comprar um plano e não for adequado, peça dentro de 14 dias do seu primeiro pagamento e receba tudo de volta.
Como obtenho ajuda?
Escreva para support@meniscus.site: perguntas, relatórios de bugs e pedidos de reembolso vão todos para lá.
Perguntas, bugs, reembolsos
Um endereço para tudo: support@meniscus.site. Reembolsos dentro de 14 dias de um primeiro pagamento não precisam de motivo.
Encontrou algo errado em uma especificação ou receita? Diga. Correções chegam ao changelog, como a lacuna do filtro Chrome que um build de teste revelou em 27 de setembro.