rdfitted/gemini-frontend-design

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

| Parameter | Value | Rationale | |-----------|-------|-----------| | CLI | gemini (v0.29+) | Installed via npm globally | | Model | gemini-3.1-pro-preview via -m flag | Best creative reasoning | | Mode | Headless (-p "" with stdin) | Non-interactive, scriptable | | Approval | -y (YOLO mode) | Auto-approve tool use | | Output | --output-format text | Clean text, no formatting |

---

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.