Gemini Frontend Design

This skill leverages Gemini 3 Pro's creative capabilities to generate distinctive, production-grade frontend interfaces. It uses a multi-step workflow: Gemini provides creative direction and initial implementation, then Claude refines and polishes the output.

Workflow

Step 1: Parse User Requirements

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.)

Step 2: Call Gemini 3 Pro for Design Generation

CRITICAL: Use the Bash tool to execute this Python command. Replace {REQUIREMENTS} with the parsed user requirements.

python -c "
from google import genai
from google.genai import types

client = genai.Client(api_key=os.environ.get("GEMINI_API_KEY"))

requirements = '''
{REQUIREMENTS}
'''

response = client.models.generate_content(
    model='gemini-3-pro-preview',
    contents=f'''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**: Choose ONE bold direction and commit fully:
   - Brutally minimal (precision, negative space, restraint)
   - Maximalist chaos (layered, textured, overwhelming)
   - Retro-futuristic (CRT vibes, neon, chrome)
   - Organic/natural (flowing shapes, earth tones, textures)
   - Luxury/refined (gold accents, serif fonts, dark themes)
   - Playful/toy-like (rounded corners, bright colors, bouncy animations)
   - Editorial/magazine (dramatic typography, asymmetric layouts)
   - Brutalist/raw (exposed structure, unconventional, harsh)
   - Art deco/geometric (patterns, gold, symmetry)
   - Industrial/utilitarian (monospace, yellow/black, functional)

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 ''', config=types.GenerateContentConfig( system_instruction='You are an elite frontend designer and developer. You create distinctive, production-grade interfaces with bold aesthetic choices. Your code is always complete, functional, and ready for production. You never produce generic or templated designs.', temperature=0.9 ) ) print(response.text) "

### 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
python -c "... aesthetic='brutally minimal' ..."

# Call 2: Maximalist direction
python -c "... aesthetic='maximalist chaos' ..."

# Call 3: User's hinted direction
python -c "... aesthetic='{user_preference}' ..."

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

Gemini 3 Pro 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 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 Pro?

• 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.