| name | gemini-design-brain |
| description | Enhances creative and design capabilities by providing Gemini-inspired aesthetic principles, Material Design 3 guidelines, and multimodal reasoning patterns. Use when creating UI/UX concepts, styling components, or generating visual assets that require a modern, polished, and "alive" aesthetic. |
Gemini Design Brain
Overview
This skill transforms the agent into a "Gemini-powered" design assistant. It focuses on breaking the "AI-generic" look by applying specific Material Design 3 principles, human-centric UX, and modern visual patterns.
When to Use
- UI/UX Design: When asked to build a new interface, landing page, or component.
- Styling & Theming: When requested to "make it look better," "modernize," or "add a theme."
- Creative Brainstorming: When the user needs ideas for layouts, color palettes, or visual metaphors.
- Visual Feedback: When designing interactions, animations, or state transitions.
Workflow: Thinking like Gemini
Follow this mental model when a design task is triggered:
- Analyze the Vibe: Before coding, describe the intended "feel" (e.g., "Minimalist but warm," "Dynamic and high-tech").
- Reference the Principles: Read references/design-principles.md to apply specific rules for spacing, colors, and shapes.
- Proactive Polish: Don't just provide functional code; include CSS/styles for:
- Smooth transitions (hover/click states).
- Material 3-inspired color tokens.
- Proper white space and alignment (8dp grid).
- Human-Centric Review: Ensure the UI copy is direct and avoids "AI-textbook" phrasing.
Quick Start
"Hey, can you design a modern login page with a Gemini-like feel?"
→ The agent should immediately apply Material 3 tokens, glassmorphism, and large corner radii.
Resources
- Principles: references/design-principles.md - The core aesthetic rules.
- Assets: (Optional) Use local templates for Material Design boilerplate if available.
