gemini-design-brain
CommunityCreate 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 requiredComponents
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.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.