skills.rest
riftzen-bit
riftzen-bitCOMMUNITY
Explore all skills by this author →
GitHub

gemini-design-brain

Apply Material Design 3 tokens and CSS/Tailwind-ready styles to web and mobile interfaces.

1|Updated Apr 7, 2026
Search Tags:#design#theming#glassmorphism#ui-ux#aesthetics#micro-interactions#material-design
One-click install
npx skills add https://github.com/riftzen-bit/gemini-setup --skill gemini-design-brain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gemini-design-brain
Source: https://github.com/riftzen-bit/gemini-setup/tree/main/skills/gemini-design-brain
Command: npx skills add https://github.com/riftzen-bit/gemini-setup --skill gemini-design-brain

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill reduces bland, generic AI-generated visuals by providing concrete aesthetic rules and implementation-ready guidance to create modern, polished, and emotionally resonant user interfaces.

Core Features & Use Cases

  • M3-based Visual Language: Apply Material Design 3 tokens for color, elevation, shapes, and typography to ensure cohesive theming.
  • Polish & Interaction Guidance: Provide micro-interaction patterns, smooth transitions, and contextual feedback to make interfaces feel alive.
  • Layout and Spacing Rules: Recommend an 8dp grid, generous whitespace, and focal-point prioritization for clearer visual hierarchy.
  • Implementation Outputs: Deliver CSS/Tailwind-ready style suggestions, color palettes, corner radii, and accessibility-minded typography guidance.
  • Use Cases: Design modern login pages, component libraries, theming systems, or refresh existing UI with a Gemini-inspired aesthetic.

Quick Start

Design a modern, Gemini-inspired login page using Material 3 tokens, glassmorphism overlays, large corner radii, and smooth micro-interactions.

Frequently Asked Questions about gemini-design-brain

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Material Design 3 tokens and glassmorphism to create a modern UI?▼

To apply Material Design 3 tokens and glassmorphism, you use tokenized color palettes, 8dp grid measurements, and large corner radii to generate cohesive, visually polished web and mobile interfaces with clear hierarchy.

What is the best way to implement an 8dp grid system and accessible typography for my web app?▼

Implementing an 8dp grid and accessible typography requires applying strict spacing rules for generous whitespace and focal-point prioritization, which yields actionable layout measurements and accessible font recommendations for your web app.

Can I generate Tailwind-ready styles and color palettes for a Gemini-inspired aesthetic?▼

Yes, you can generate Tailwind-ready styles and color palettes for a Gemini-inspired aesthetic by applying Material 3 principles to output implementation-ready CSS, color tokens, and corner radii for components and themes.

How do I add micro-interactions and smooth transitions to make my UI feel alive?▼

Adding micro-interactions and smooth transitions involves applying specific interaction patterns, contextual feedback, and transition guidance to your components, which produces actionable interaction descriptions for implementation.

Does this approach work for component libraries and theming systems, or just individual pages?▼

This approach works for both component libraries and individual pages by applying Material 3 tokens, elevation rules, and shape systems to ensure cohesive theming and consistent visual design across your entire project.

Related Skills

Explore More Design & Creative Skills→
ionmidoriionmidori

designing-modern-ui

Design web interfaces with Bento Grids, Glassmorphism, and Tailwind CSS.

Community
Intermediate
vimalinxvimalinx

frontend-ui-ux

Translate design concepts into responsive frontend interfaces with design tokens.

Community
Advanced
jokken79jokken79
1

yukyu-ui-ux-master

Design YuKyuDATA interfaces with WCAG accessibility and dark/light mode.

Community
Advanced
Prathmesh2000Prathmesh2000
1

mui-components

Build Material UI v6 components with centralized theming and design tokens.

Community
Advanced