🎯 SPECIALIZED AI AGENT FOR UI/UX DESIGN & FRONTEND ARCHITECTURE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Integrates Google Gemini 2.5 PRO as a world-class UI designer accessible via MCP protocol from Claude AI in Warp Terminal 

Purpose-Built MCP Server providing enterprise-grade UI/UX design expertise through Gemini 2.5 PRO. Architected for seamless Claude-to-Gemini inter-agent communication within Warp Terminal's agentic development environment.

┌─────────────────────────────────────────────────────────────┐ │ GEMINI 2.5 PRO UI DESIGN SPECIALIST │ ├─────────────────────────────────────────────────────────────┤ │ ► Design UI Components - Enterprise-grade components │ │ ► Review Implementations - WCAG AAA compliance │ │ ► Generate Frontend Code - Production-ready artifacts │ │ ► Architecture Consultation - Scalable system design │ │ ► Brand Identity Design - Cohesive visual systems │ └─────────────────────────────────────────────────────────────┘ 

• Node.js ≥ 18.0.0
• Warp Terminal (latest)
• Gemini API Key → Get Key

git clone https://github.com/bobvasic/gemini-ui-design-server.git cd gemini-ui-design-server npm install chmod +x index.js setup.sh

Method 1: Automated Setup

./setup.sh YOUR_GEMINI_API_KEY

Method 2: Manual Warp MCP Configuration

Add to ~/.config/warp/mcp.json:

{ "mcpServers": { "gemini-ui-designer": { "command": "node", "args": ["${HOME}/gemini-ui-design-server/index.js"], "env": { "GEMINI_API_KEY": "YOUR_API_KEY_HERE" } } } }

Restart Warp Terminal to activate.

Enterprise-grade component design with accessibility-first methodology

{ component_type: string; // button, form, card, navigation, hero requirements: string; // Detailed specs, brand, accessibility framework?: string; // React, Vue, Angular, Svelte design_system?: string; // Material, Tailwind, Custom }

Expert code review with WCAG compliance verification

{ code: string; // Frontend code to analyze framework?: string; // React, Vue, Angular review_focus?: enum; // accessibility | performance | ux | visual-design | responsive | all }

Production-ready code generation with TypeScript support

{ specification: string; // Detailed implementation requirements framework?: string; // React, Vue, Angular, Svelte styling_approach?: string; // Tailwind, CSS Modules, Styled Components typescript?: boolean; // Default: true }

Strategic frontend architecture guidance for scalable systems

{ project_context: string; // Scale, team, constraints consultation_topic: enum; // component-architecture | state-management  // design-system | performance | testing | deployment }

Cohesive brand identity and design system creation

{ brand_requirements: string; // Values, audience, industry, emotions deliverables?: string; // color-palette,typography,components,spacing }

┌──────────────┐ MCP Protocol ┌─────────────────┐ │ Claude AI │ ←──────────────────────→│ Gemini 2.5 PRO │ │ (Warp IDE) │ UI/UX Consultation │ (UI Designer) │ └──────────────┘ └─────────────────┘ ↓ ↓ Development Design Specifications Implementation Component Architecture Code Generation Brand Systems 

Gemini 2.5 PRO prompts are architecturally designed following Google's official best practices:

✓ Structured Role Definition - Clear expert persona establishment
✓ Contextual Specifications - Comprehensive requirement framing
✓ Deliverable Taxonomy - Explicit output structure definition
✓ Constraint Declaration - WCAG, performance, framework requirements
✓ Quality Gates - Enterprise-grade, production-ready mandates

• Zero Credential Hardcoding - Environment variable isolation
• API Key Validation - Startup verification with fail-fast
• Error Sanitization - No sensitive data in error messages
• Dependency Auditing - 0 vulnerabilities (verified)

Security Contact: info@cyberlinksec.com

• SECURITY.md - Security policy and best practices
• CONTRIBUTING.md - Contribution guidelines
• AUDIT_REPORT.md - Production readiness certification

# Verify installation export GEMINI_API_KEY="your-key" npm start # Expected: "Gemini MCP Server running on stdio" # Test via Claude in Warp # Call tool: gemini-ui-designer/design_ui_component

Technical Issues → GitHub Issues
Security Concerns → info@cyberlinksec.com
Enterprise Consulting → CyberLink Security

MIT License - Copyright © 2025 CyberLink Security