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.

gemini-frontend-design

Workflow

Step 1: Parse User Requirements

Step 2: Call Gemini 3 Pro for Design Generation