gemini-design-brain

Community

Create modern, human-centric Gemini-style UIs

Authorriftzen-bit
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: gemini-design-brain
Download link: https://github.com/riftzen-bit/gemini-setup/archive/main.zip#gemini-design-brain

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.