Skip to content
UXClaim
Design Systems

Liquid Glass Design System

Claude skill for building UIs with instyle.group's Liquid Glass design system using warm neutrals, translucent glass, and blur effects.

View source More in Design Systems

What it does

This Claude Code skill enables AI-assisted UI design using the Liquid Glass design system from instyle.group. It provides a complete, pre-configured design language with warm-neutral color palettes, translucent glass materials, backdrop-filter blur effects, and specular highlights.

How it works

The skill auto-triggers when you ask Claude for “liquid glass” designs in natural language (English or Japanese). Claude automatically applies the system’s CSS tokens, component snippets, and design rules to generate matching UIs. It includes a 700+ line specification document that Claude references for complex requests.

Key features

  • Auto-trigger: Natural language prompts like “Build a liquid glass dashboard” activate the system automatically
  • CSS ready: Pre-built tokens and component snippets for panels, cards, buttons, inputs, and backgrounds
  • Full spec: Comprehensive design reference for consistent implementation
  • Project templates: Bootstrap new projects with complete Liquid Glass setup
  • Brand assets: Logo, favicon, and preview assets included

Use cases

Design landing pages, dashboards, marketing sites, and UI mockups with a modern glass-morphism aesthetic. Ideal for projects requiring a cohesive, branded visual language.

Who benefits

Product designers, design leads, and teams needing rapid UI prototyping with a sophisticated, consistent design system.

Frequently asked questions

How do I install the Liquid Glass design system skill?
Clone the repository into your Claude skills folder: `git clone https://github.com/sasaki-ta-instyle/skill-design-system-liquid ~/.claude/skills/skill-design-system-liquid`. The skill auto-loads in Claude Code sessions — no additional setup needed.
What does Liquid Glass design system do?
It's a pre-configured design system that teaches Claude how to build modern UIs using warm-neutral palettes, translucent glass materials, backdrop-filter blur effects, and specular highlights. Perfect for creating sophisticated, cohesive digital interfaces.
How do I trigger the Liquid Glass skill in Claude?
Ask in natural language: "Build a liquid glass dashboard" or "Liquid Glass で営業ダッシュボード作って" (Japanese also works). Claude auto-detects and applies the system rules, CSS tokens, and components.
What files does the skill include?
The skill includes design.md (full 700+ line spec), tokens.css (CSS variables), snippets.css (component code), a project template, brand assets (logo/favicon/OGP), and a live preview HTML example.
Can I bootstrap a new project with Liquid Glass?
Yes. Ask Claude to "bootstrap a new project with skill-design-system-liquid" and it will set up CLAUDE.md, CSS tokens, snippets, fonts, and background scenes automatically for long-term use.
What's the difference between Liquid Glass and Flat design systems?
Liquid Glass uses translucent materials, blur effects, and warm-neutral gradients for a modern glass-morphism look. The sister skill skill-design-system-flat provides a flat, contrast-based variant of the same brand.
How do I preview the Liquid Glass design system?
Open `examples/preview.html` in any modern browser (Chrome, Edge, Safari). You'll see warm neutral gradients with translucent glass panels and the full visual system in action.
What languages does the skill support?
The skill responds to prompts in both English and Japanese. You can ask for designs in either language and Claude will apply the Liquid Glass system consistently.

Glossary

Liquid Glass
A modern design aesthetic using translucent glass materials, backdrop-filter blur effects, and warm-neutral color palettes to create layered, sophisticated UI interfaces.
Backdrop filter
A CSS visual effect that blurs the content behind an element, creating a frosted glass appearance. Key to the Liquid Glass aesthetic.
Glass morphism
A design trend using semi-transparent glass-like elements with blur effects to create depth and sophistication in digital interfaces.
CSS tokens
Reusable CSS variables that store design values like colors, spacing, and typography, enabling consistent system-wide theming and updates.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.