Meniscus
Sistema de diseño de vidrio líquido para agentes de codificación de IA: especificaciones, valores probados y código de construcción para web, SwiftUI, Flutter, React Native y Figma.
Servidor MCP alojado
npx add-mcp 'https://meniscus.site/mcp'Se instala en Claude Code, Codex, Cursor y más
Documentación
Con Meniscus. Las letras y las franjas se curvan hacia adentro en cada borde, el borde capta la luz. Mueve la lente hacia la barra.
claude mcp add --transport http meniscus https://meniscus.site/mcp
Luego ejecuta /mcp en Claude Code, elige meniscus e inicia sesión. Configuración completa · Más de 30 asistentes
Mismo prompt, mismo modelo. Una diferencia.
Una solicitud, sesiones nuevas, el plan gratuito, nada editado. Sin Meniscus el asistente dibuja un glassmorphism lechoso; con él, el vidrio permanece transparente y curva el paisaje detrás. Ambas páginas se ejecutan abajo: desplázate por ellas.
La solicitud, palabra por palabraConstruye la pantalla de inicio de una app del clima como página web: un paisaje a sangre completa dibujado proceduralmente detrás de todo (un cielo al atardecer, montañas en capas y un lago que las refleja; sin imágenes externas), el nombre de la ciudad y la temperatura actual, una franja de pronóstico por hora y una lista de pronóstico de 10 días en tarjetas de vidrio líquido, y una barra de pestañas flotante de vidrio líquido. Pon todo en un solo index.html autocontenido en esta carpeta (CSS y JS en línea, sin paso de compilación, sin solicitudes externas), diseñado para un viewport de teléfono de 390×844.
Solo Claude Code 1 min 52 s Escarcha lechosa con un borde blanco uniforme en cada tarjeta: glassmorphism. El paisaje desaparece detrás de las tarjetas, y las filas del pronóstico se leen a través de la barra de pestañas. Ábrelo a pantalla completa
Claude Code + Meniscus (gratis) 9 min 30 s Vidrio transparente que curva las montañas y el lago en cada borde, de modo que el paisaje sigue siendo parte de la pantalla. La pestaña seleccionada es una lente y la búsqueda está en su propia, como en iOS. Ábrelo a pantalla completa
En vivo: desplázate y toca dentro de cualquiera de los teléfonos. Los navegadores que no sean Chrome y Edge muestran capturas de pantalla, ya que dibujan el respaldo de escarcha de estas páginas.
Cómo lo ejecutamos
- La misma solicitud, palabra por palabra, en sesiones nuevas de Claude Code sin interfaz, cada una en una carpeta vacía: Claude Sonnet 5.
- La única diferencia: el servidor Meniscus en el plan gratuito, y "Usa las herramientas de meniscus." al final de la solicitud.
- Dos ejecuciones por lado; mostramos una de cada. La segunda ejecución sin Meniscus se veía igual; la segunda con él usaba íconos de emoji en las pestañas y dibujaba su propia barra de estado.
- Sin Meniscus el agente tardó menos de dos minutos; con él, nueve y medio, la mayor parte leyendo el resumen y la receta web.
- Nada editado. Capturas tomadas en Chrome a 390 × 844; los teléfonos de arriba ejecutan las páginas ellos mismos.
- Ejecutado el 1 de octubre de 2026.
Qué es el vidrio líquido, regla por regla
Una llamada para toda una pantalla.
Tu asistente le pide a create_design_brief la pantalla que nombraste y obtiene la dirección, los tokens, las especificaciones, el código para tu stack y una lista de verificación para probar su propia captura de pantalla.
Un lenguaje de diseño con números Bisel, desplazamiento, desenfoque, rellenos, bordes y líneas de borde para cada material, ajustados a la generación actual — más los anti-patrones a rechazar.34 componentes, 10 efectos Barras de pestañas a hojas, refracción a metal líquido: anatomía, estados, reglas y los números para cada uno.
Recetas para cinco medios Figma, web, SwiftUI, Flutter y React Native — cada una con lo que esa plataforma puede y no puede hacer.
claude
- Construye una pantalla de reproductor de música con controles de vidrio líquido sobre el arte del álbum. Usa las herramientas de meniscus.
- meniscus · create_design_brief(intent: "music player…", medium: "web")
- Dirección, tokens, 4 especificaciones de componentes, el código de refracción de la receta, una lista de verificación de aceptación, 2 imágenes de referencia
- Write(index.html)
- Mapa de desplazamiento SVG a través de backdrop-filter, un respaldo de escarcha para Safari y Firefox
- Bash(screenshot at 390 × 844)
- Verificado contra el resumen: el borde se curva ✓ etiquetas legibles ✓ una familia de íconos ✓
Pega uno en tu asistente.
¿Conectado? Elige tu stack. Nombrar las herramientas hace que el asistente las use; una pantalla completa le toma de cinco a diez 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.
El mismo material dondequiera que publiques.
Figma y herramientas de diseño
Configuraciones de efecto de vidrio, una pila de capas manual para herramientas sin una, prompts de generación de imágenes.
Web
Refracción con mapa de desplazamiento SVG, un shader WebGL, un componente React y un respaldo de escarcha.
SwiftUI
glassEffect, contenedores y morphing, barras del sistema, adiciones de iOS 27.
Flutter
Un shader de refracción Impeller con su widget, verificado en Android y iOS.
React Native
Un starter Expo ejecutable con vidrio iOS nativo y respaldos honestos.
Construye vidrio real gratis. Publica pantallas completas con Pro.
$0 para siempre
Todo lo que tu agente necesita para construir vidrio líquido real, en cada plataforma.
- Lenguaje de diseño, 34 especificaciones de componentes y 10 de efectos
- Recetas con código: web, Figma, SwiftUI, Flutter, React Native
- Resúmenes con 2 imágenes de referencia, 1 por especificación
- 50 llamadas de herramientas al día
- Pro gratis durante tus primeros 14 días
$79 por año
Ahorro anual 27% Mensual
Pantallas completas como código, el kit React y la biblioteca completa.
-
Todo en Free
-
10 plantillas de pantalla como fuente React: hogar inteligente, billetera, chat de IA…
-
Descarga del kit React: 34 componentes, 10 pantallas, efectos WebGL
-
Toda la biblioteca de referencia, cualquier render a marco completo
-
Descarga del starter React Native (Expo SDK 55)
-
Uso justo: 2,000 llamadas al día
-
Garantía de devolución de 14 días ¿No es para ti? Pide dentro de los 14 días de tu primer pago y recupera todo.
-
Cancela cuando quieras Desde Facturas y facturación en la página de tu cuenta; conservas el acceso hasta que termine el período que pagaste.
-
Pago con Lemon Squeezy El comerciante registrado maneja pagos, impuestos y facturas. Nunca vemos tu tarjeta.
Precios en USD. Se agregan impuestos al finalizar la compra donde corresponda. Detalles en la política de reembolso y los términos.
Equipo, Lifetime y la comparación completa
Preguntas frecuentes
¿Qué es un servidor MCP?
El Protocolo de Contexto de Modelo permite que asistentes de IA como Claude Code, Codex, Cursor y VS Code llamen herramientas. Meniscus es un conjunto de herramientas que entrega a tu asistente los números, especificaciones, recetas e imágenes de referencia para vidrio líquido, para que diseñe y construya lo real en lugar de una tarjeta borrosa.
¿Es esto el Liquid Glass de Apple?
No. Meniscus es un sistema de diseño independiente que enseña el estilo visual en cada plataforma, incluyendo web, Flutter y React Native, donde Apple no publica nada. Sigue la versión actual de Apple (iOS 27) donde las plataformas de Apple son el objetivo.
¿Con qué asistentes funciona?
Cualquier cliente MCP que admita servidores remotos con inicio de sesión OAuth: Claude Code, Codex, Gemini CLI, Copilot CLI, Cursor, VS Code, Zed, JetBrains, Claude, ChatGPT y más. La documentación tiene la configuración para cada uno; los clientes que solo ejecutan servidores locales se conectan a través del puente mcp-remote.
¿Qué incluye el plan gratuito?
Todo lo que tu asistente necesita para construir vidrio líquido real: el lenguaje de diseño, cada especificación de componente y efecto, y las recetas con código para web, Figma, SwiftUI, Flutter y React Native, con imágenes de referencia en cada resumen y 50 llamadas de herramientas al día. Sin tarjeta necesaria, y cada cuenta nueva obtiene Pro gratis durante sus primeros 14 días. Los planes de pago agregan pantallas completas como fuente React, el kit React, la biblioteca de referencia completa, el starter Expo y volumen de uso justo.
¿Puedo usar lo que produce en trabajo de clientes?
Sí. Los diseños y el código que tu asistente crea con Meniscus son tuyos para publicar, comercial o no. No puedes revender las especificaciones, imágenes o starters en sí.
¿Qué pasa cuando Apple cambia el material de nuevo?
El servidor alojado se actualiza para todos el día que publicamos el cambio; tu asistente obtiene los nuevos números en su próxima llamada. Apple publicó iOS 27 el 14 de septiembre de 2026; Meniscus se movió a sus números 12 días después. Cada cambio está en el changelog.
¿Qué pasa si Meniscus no es para mí?
Quédate en el plan gratuito todo el tiempo que quieras; no necesita tarjeta. Si compras un plan y no es adecuado, pide dentro de los 14 días de tu primer pago y recuperas todo.
¿Cómo obtengo ayuda?
Escribe a support@meniscus.site: preguntas, informes de errores y solicitudes de reembolso van allí.
Preguntas, errores, reembolsos
Una dirección para todo: support@meniscus.site. Los reembolsos dentro de los 14 días de un primer pago no necesitan razón.
¿Encontraste algo incorrecto en una especificación o receta? Dilo. Las correcciones llegan al changelog, como la brecha del filtro de Chrome que una compilación de prueba reveló el 27 de septiembre.