Meniscus

npx add-mcp 'https://meniscus.site/mcp'

With Meniscus. The letters and stripes bend inward at every edge, the rim catches the light. Move the lens into the bar.

claude mcp add --transport http meniscus https://meniscus.site/mcp

Then run /mcp in Claude Code, pick meniscus and sign in. Full setup · 30+ other assistants

Same prompt, same model. One difference.

One request, fresh sessions, the free plan, nothing edited. Without Meniscus the assistant draws milky glassmorphism; with it the glass stays clear and bends the landscape behind it. Both pages run below: scroll them.

The request, word for wordBuild a weather app home screen as a web page: a full-bleed landscape drawn procedurally behind everything (a dusk sky, layered mountains and a lake that reflects them; no external images), the city name and current temperature, an hourly forecast strip and a 10-day forecast list on liquid glass cards, and a floating liquid glass tab bar. Put everything in one self-contained index.html in this folder (inline CSS and JS, no build step, no external requests), designed for a 390×844 phone viewport.

Claude Code alone 1 min 52 s Milky frost with a uniform white border on every card: glassmorphism. The landscape disappears behind the cards, and the forecast rows read through the tab bar. Open it full screen

Claude Code + Meniscus (free) 9 min 30 s Clear glass that bends the mountains and lake at every edge, so the landscape stays part of the screen. The selected tab is a lens and search sits in its own, as on iOS. Open it full screen

Live: scroll and tap inside either phone. Browsers other than Chrome and Edge show screenshots, since they draw these pages' frost fallback.

How we ran it

• The same request, word for word, in fresh headless Claude Code sessions, each in an empty folder: Claude Sonnet 5.
• The only difference: the Meniscus server on the free plan, and “Use the meniscus tools.” at the end of the request.
• Two runs per side; we show one of each. The second run without Meniscus looked alike; the second with it used emoji tab icons and drew its own status bar.
• Without Meniscus the agent took under two minutes; with it, nine and a half, most of it reading the brief and the web recipe.
• Nothing edited. Screenshots taken in Chrome at 390 × 844; the phones above run the pages themselves.
• Run on 1 October 2026.

What liquid glass is, rule by rule

One call for a whole screen.

Your assistant asks create_design_brief for the screen you named and gets the direction, tokens, specs, the code for your stack and a checklist to test its own screenshot against.

A design language with numbers Bezel, displacement, blur, fills, rims and edge lines for every material, tuned to the current generation — plus the anti-patterns to reject.34 components, 10 effects Tab bars to sheets, refraction to liquid metal: anatomy, states, rules and the numbers for each.

Recipes for five media Figma, web, SwiftUI, Flutter and React Native — each with what that platform can and cannot do.

Verified references 109 renders filed by what they show, cropped to the glass, each with notes on what to look for.

claude

1. Build a music player screen with liquid glass controls over the album art. Use the meniscus tools.
2. meniscus · create_design_brief(intent: "music player…", medium: "web")
3. Direction, tokens, 4 component specs, the recipe's refraction code, an acceptance checklist, 2 reference images
4. Write(index.html)
5. SVG displacement map through backdrop-filter, a frost fallback for Safari and Firefox
6. Bash(screenshot at 390 × 844)
7. Checked against the brief: the rim bends ✓ labels legible ✓ one icon family ✓

Paste one into your assistant.

Connected? Pick your stack. Naming the tools makes the assistant use them; a full screen takes it five to ten minutes.

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.

The same material everywhere you ship.

Figma & design tools

Glass effect settings, a manual layer stack for tools without one, image-generation prompts.

Web

SVG displacement refraction, a WebGL shader, a React component and a frost fallback.

SwiftUI

glassEffect, containers and morphing, system bars, iOS 27 additions.

Flutter

An Impeller refraction shader with its widget, verified on Android and iOS.

React Native

A runnable Expo starter with native iOS glass and honest fallbacks.

Build real glass free. Ship whole screens with Pro.

$0 forever

Everything your agent needs to build real liquid glass, on every platform.

• Design language, 34 component and 10 effect specs
• Recipes with code: web, Figma, SwiftUI, Flutter, React Native
• Briefs with 2 reference images, 1 per spec
• 50 tool calls a day
• Pro free for your first 14 days

$79 per year

Yearly save 27% Monthly

Whole screens as code, the React kit and the full library.

• Everything in Free

• 10 screen templates as React source: smart home, wallet, AI chat…

• React kit download: 34 components, 10 screens, WebGL effects

• The whole reference library, any render at full frame

• React Native starter (Expo SDK 55) download

• Fair use: 2,000 calls a day

• 14-day money-back guarantee Not right for you? Ask within 14 days of your first payment and get all of it back.

• Cancel any time From Invoices and billing on your account page; you keep access until the period you paid for ends.

• Checkout by Lemon Squeezy The merchant of record handles payment, tax and invoices. We never see your card.

Prices in USD. Taxes are added at checkout where they apply. Details in the refund policy and terms.

Team, Lifetime and the full comparison

Frequently asked

What is an MCP server?

The Model Context Protocol lets AI assistants such as Claude Code, Codex, Cursor and VS Code call tools. Meniscus is a set of tools that hands your assistant the numbers, specs, recipes and reference images for liquid glass, so it designs and builds the real thing instead of a blurred card.

Is this Apple's Liquid Glass?

No. Meniscus is an independent design system that teaches the visual style on every platform, including web, Flutter and React Native, where Apple ships nothing. It follows Apple's current release (iOS 27) where Apple's platforms are the target.

Which assistants does it work with?

Any MCP client that supports remote servers with OAuth sign-in: Claude Code, Codex, Gemini CLI, Copilot CLI, Cursor, VS Code, Zed, JetBrains, Claude, ChatGPT and more. The docs have the setup for each; clients that run only local servers connect through the mcp-remote bridge.

What does the free plan include?

Everything your assistant needs to build real liquid glass: the design language, every component and effect spec, and the recipes with code for web, Figma, SwiftUI, Flutter and React Native, with reference images in every brief and 50 tool calls a day. No card needed, and every new account gets Pro free for its first 14 days. Paid plans add whole screens as React source, the React kit, the full reference library, the Expo starter and fair-use volume.

Can I use what it produces in client work?

Yes. Designs and code your assistant makes with Meniscus are yours to ship, commercial or not. You may not resell the specs, images or starter themselves.

What happens when Apple changes the material again?

The hosted server updates for everyone the day we ship the change; your assistant gets the new numbers on its next call. Apple shipped iOS 27 on 14 September 2026; Meniscus moved to its numbers 12 days later. Every change is on the changelog.

What if Meniscus isn't right for me?

Stay on the free plan as long as you like; it needs no card. If you buy a plan and it isn't right, ask within 14 days of your first payment and you get all of it back.

How do I get help?

Write to support@meniscus.site: questions, bug reports and refund requests all go there.

Questions, bugs, refunds

One address for all of it: support@meniscus.site. Refunds within 14 days of a first payment need no reason.

Found something wrong in a spec or a recipe? Say so. Fixes land on the changelog, like the Chrome filter gap a test build turned up on 27 September.

Recently shipped

1. A plugin for Claude Code and Codex
2. 1 Oct Whole screens as code, and 14 days of Pro
3. 1 Oct The free plan builds on every platform
4. The code now reaches your agent Full changelog