name: gemini-frontend-design description: Create distinctive, production-grade frontend interfaces using Gemini 3.1 Pro for design ideation. Helps you choose the right design style (skeuomorphic, glassmorphism, neobrutalism, bento grid, etc.) then generates bold, polished code. Excels at skeuomorphic UIs with rich textures, depth, and fluid animations. license: MIT

This skill leverages Gemini 3.1 Pro's creative capabilities to generate distinctive, production-grade frontend interfaces. Gemini 3.1 Pro is exceptionally good at skeuomorphic design — creating UIs with realistic textures, physical depth, lighting effects, and fluid CSS animations that make interfaces feel tangible and alive. It uses a multi-step workflow: Gemini provides creative direction and initial implementation, then Claude refines and polishes the output.

Workflow

Step 1: Parse Requirements & Recommend a Design Style

Extract from user input:

• Component/Page Type: What are we building? (landing page, dashboard, form, card, etc.)
• Purpose: What problem does it solve? Who uses it?
• Technical Constraints: Framework (React, Vue, vanilla), styling (Tailwind, CSS), etc.
• Aesthetic Hints: Any mentioned preferences (dark mode, minimal, playful, etc.)

If the user hasn't specified a style, use the Style Reference below to recommend 2-3 styles that fit their project. Use AskUserQuestion to let them pick. Consider:

• Audience: Professional/enterprise → Glassmorphism, Minimalism. Playful/consumer → Claymorphism, Neobrutalism.
• Content density: Data-heavy → Bento Grid, Minimalism. Showcase/marketing → Maximalism, Editorial.
• Brand personality: Trustworthy → Minimalism, Neumorphism. Bold/disruptive → Neobrutalism, Retro-futurism. Premium → Skeuomorphism, Luxury/Art Deco. Polished SaaS/startup → Editorial SaaS, Glassmorphism.
• Interaction richness: High interactivity → Skeuomorphism, Aurora/Glassmorphism. Content-first → Editorial, Minimalism.

If the user HAS specified a style, skip the question and proceed directly.

Step 2: Call Gemini 3.1 Pro for Design Generation

CRITICAL: Use the Bash tool to execute the Gemini CLI in headless mode. Write the prompt to a temp file first to avoid shell escaping issues.

# 1. Write the prompt to a temp file (replace {REQUIREMENTS} and {CHOSEN_STYLE} with actual values)
cat > /tmp/gemini-frontend-prompt.txt << 'PROMPT_EOF'
You are an elite frontend designer known for creating distinctive, memorable interfaces that avoid generic "AI slop" aesthetics.

REQUIREMENTS:
{REQUIREMENTS}

DESIGN THINKING PROCESS:

1. **Purpose Analysis**: What problem does this solve? Who uses it?

2. **Aesthetic Direction**: The user has chosen: {CHOSEN_STYLE}. Commit FULLY to this direction.

STYLE IMPLEMENTATION NOTES:

**Skeuomorphic/Tactile** — Gemini 3.1 Pro's strongest style. Lean HARD into it:
   - Realistic material textures (brushed metal, leather, wood grain, glass) via CSS gradients and shadows
   - Physical depth with layered box-shadows, inset shadows, and bevels
   - Glossy/reflective surfaces using gradient overlays
   - Fluid CSS animations: spring-like transitions, satisfying toggle clicks, smooth dial rotations
   - Lighting effects that respond to hover/interaction
   - Small details: screws, stitching, wear marks, reflections

**Glassmorphism** — Frosted glass panels over vivid backgrounds:
   - backdrop-filter: blur() with semi-transparent backgrounds
   - Subtle 1px borders with rgba whites, vivid gradient backgrounds behind panels
   - Layered depth with multiple glass panels at different opacities

**Neumorphism (Soft UI)** — Elements extruded from the surface:
   - Dual shadows (light + dark) on matching background color
   - Pressed/inset states for active elements, soft rounded forms
   - MUST maintain sufficient contrast for accessibility

**Claymorphism** — Soft 3D clay/toy aesthetic:
   - Inner shadows + outer shadows for inflated look, bold rounded corners
   - Vibrant pastel palette, playful bouncy animations

**Neobrutalism** — Raw, bold, anti-corporate:
   - Thick black borders (2-4px), solid drop shadows offset 4-8px
   - Bright clashing colors, monospace or chunky sans-serif fonts
   - Intentionally "undesigned" feel with strong grid structure

**Bento Grid** — Modular compartmentalized layout:
   - Varying-size rectangular tiles in a clean grid
   - Each tile is a self-contained content unit, hover reveals secondary layer
   - Clean gaps, rounded corners, subtle shadows

**Aurora/Gradient** — Ambient color fields and flowing gradients:
   - Mesh gradients, animated color shifts, soft glowing orbs
   - Ethereal, atmospheric feel with generous whitespace

**Retro-Futurism** — Nostalgic tech meets sci-fi:
   - CRT scanlines, neon glows, chrome reflections, pixel fonts mixed with sleek UI
   - Dark backgrounds with electric accent colors

**Editorial/Magazine** — Typography-driven dramatic layouts:
   - Oversized display type, asymmetric grids, dramatic whitespace
   - Mix of serif + sans-serif, strong visual hierarchy

**Editorial SaaS (Magazine Minimal)** — Swiss grid discipline meets editorial typography confidence (Cora, Linear, Notion marketing):
   - Serif display font (e.g. Signifier, GT Super) paired with clean sans-serif body (e.g. Switzer, Söhne)
   - Card-based modular grid with generous whitespace and large rounded corners (16-35px)
   - Restrained mono-accent palette — one confident brand color, neutral everything else
   - Backdrop blur + subtle shadows for depth without full glassmorphism
   - Narrative page flow: storytelling structure, not a feature checklist
   - Premium feel through restraint — every element earns its place

**Organic/Biomorphic** — Flowing natural shapes:
   - Blob shapes, wavy borders, earth tones, fluid animations
   - Anti-grid: content flows naturally rather than snapping to boxes

**Minimalism** — Maximum impact, minimum elements:
   - Extreme whitespace, limited palette (2-3 colors), precise typography
   - Every element earns its place — nothing decorative

**Luxury/Refined** — Premium, high-end feel:
   - Dark themes with gold/cream accents, elegant serif typography
   - Subtle animations, generous spacing, restrained palette

**Art Deco/Geometric** — Ornamental precision:
   - Geometric patterns, gold lines, strong symmetry
   - Fan shapes, sunbursts, stepped forms

**Industrial/Utilitarian** — Function over form:
   - Monospace type, yellow/black safety palette, exposed grid
   - Data-dense, no-nonsense, mechanical feel

3. **Typography**: Choose distinctive fonts - NEVER use Inter, Roboto, Arial, or generic system fonts. Pick characterful display fonts paired with refined body fonts.

4. **Color Palette**: Commit to a cohesive scheme. Dominant colors with sharp accents beat timid, evenly-distributed palettes.

5. **Signature Element**: What ONE thing will make this unforgettable?

OUTPUT FORMAT:

## Design Direction
[Explain your chosen aesthetic in 2-3 sentences]

## Signature Element
[The ONE memorable thing about this design]

## Color Palette
- Primary: [hex]
- Secondary: [hex]
- Accent: [hex]
- Background: [hex]
- Text: [hex]

## Typography
- Display Font: [font name from Google Fonts]
- Body Font: [font name from Google Fonts]

## Code

```[html/jsx/vue based on requirements]
[Complete, production-ready code with:
- All CSS included (inline styles, styled-components, or Tailwind based on context)
- Animations and micro-interactions
- Responsive design
- Semantic HTML
- Accessibility attributes
- Google Fonts import if needed]

CRITICAL RULES:

• NO purple gradients on white backgrounds
• NO generic card layouts
• NO cookie-cutter component patterns
• NEVER use overused fonts (Inter, Space Grotesk, Roboto)
• MAKE IT MEMORABLE - someone should remember this design
• COMMIT to your aesthetic direction - half-measures fail
• INCLUDE working animations and hover states
• USE unexpected layouts: asymmetry, overlap, diagonal flow, grid-breaking PROMPT_EOF

2. Pipe the prompt to Gemini CLI in headless mode

cat /tmp/gemini-frontend-prompt.txt | gemini -m gemini-3.1-pro-preview -p "" -y --output-format text

**Notes on the Gemini CLI approach:**
- `-m gemini-3.1-pro-preview` selects the model
- `-p ""` enables headless (non-interactive) mode; the prompt comes from stdin
- `-y` auto-approves any tool use (YOLO mode)
- `--output-format text` gives clean text output
- Writing the prompt to a temp file avoids shell escaping issues with quotes and special chars

### Step 3: Review and Refine Gemini's Output

After Gemini returns the design:

1. **Validate the code** - Ensure it's complete and functional
2. **Check aesthetic commitment** - Is the direction bold enough?
3. **Verify typography** - No generic fonts slipped through?
4. **Enhance animations** - Add more polish if needed
5. **Fix any issues** - Syntax errors, missing imports, etc.

Use Edit/Write tools to save the refined code to appropriate files.

### Step 4: Present Final Design

Display to user:
- Design direction and rationale
- The signature element
- Color palette and typography choices
- Complete, working code

---

## Alternative: Multi-Shot Design Exploration

For more complex projects, spawn multiple Gemini calls with different aesthetic directions:

```bash
# Call 1: Minimal direction
cat /tmp/gemini-frontend-minimal.txt | gemini -m gemini-3.1-pro-preview -p "" -y --output-format text

# Call 2: Maximalist direction
cat /tmp/gemini-frontend-maximalist.txt | gemini -m gemini-3.1-pro-preview -p "" -y --output-format text

# Call 3: User's hinted direction
cat /tmp/gemini-frontend-userpref.txt | gemini -m gemini-3.1-pro-preview -p "" -y --output-format text

Then present all options and let user choose, or synthesize the best elements.

Gemini CLI Configuration

Design Quality Checklist

Before presenting to user, verify:

• Typography: Distinctive fonts (not Inter/Roboto/Arial)
• Color: Cohesive palette with clear hierarchy
• Layout: Unexpected/interesting composition
• Motion: Animations on load, hover, and interactions
• Details: Textures, shadows, gradients, or other depth
• Accessibility: Semantic HTML, ARIA labels, contrast
• Responsive: Works on mobile and desktop
• Complete: All code included, no placeholders

Example Usage

User: "Build me a pricing page for a SaaS product"

Workflow:

1. Parse: Pricing page, SaaS context, likely needs 3 tiers
2. Call Gemini 3.1 Pro with full prompt
3. Gemini returns: Art deco direction, geometric patterns, gold accents
4. Claude refines: Fixes any code issues, enhances animations
5. Present: Complete pricing page with distinctive aesthetic

Why Gemini 3.1 Pro?

• Skeuomorphic mastery: Exceptionally good at realistic textures, physical depth, and tactile UI elements
• Animation fluency: Generates fluid, physics-inspired CSS animations and micro-interactions
• Extended thinking: Deep reasoning about design choices
• Creative temperature: High temperature (0.9) for bold choices
• Fresh perspective: Different training data = different aesthetics
• Complementary: Gemini ideates, Claude refines

This combination produces designs that neither model would create alone.

Related Skills

• gemini-threejs-shader-hover — Apply Three.js WebGL shader hover effects using Gemini 3.1 Pro for GLSL generation (distortion, wave, chromatic aberration, RGB split). Use when the design calls for interactive GPU-accelerated hover effects. Invoke via /shader-hover command.