tai-dt/mcp-tailwind-gemini

开发工具

本页由 AI 翻译，技术细节请以原文为准。查看原文

11 stars 4 forks 质量 70 趋势 18MIT

Repository Install

MCP Tailwind Gemini - AI-powered CSS generation and framework integration tool

概览

Advanced Model Context Protocol (MCP) server for Tailwind CSS with Gemini AI integration and for intelligent design assistance across all major development environments. - : Create sophisticated Tailwind components using Gemini AI - : AI-driven class optimization and conflict resolution - : Comprehensive design quality assessment with improvement suggestions - : Generate cohesive design systems with AI assistance - : Create buttons, cards, forms, navigation, modals, and custom components - : Clean up redundant classes and resolve conflicts - : Transform existing CSS/SCSS to Tailwind classes - : Build responsive layouts for dashboards, landing pages, blogs, and more - : Generate custom color palettes, typography, and design tokens - : Visual component previews with screenshot capability - : React, Vue, Svelte, Angular with automatic component conversion - : Vite, Webpack, Next.

README

以下为原文 README 节选，完整内容请查看原文。

MCP Tailwind Gemini Server

Advanced Model Context Protocol (MCP) server for Tailwind CSS with Gemini AI integration and cross-platform support for intelligent design assistance across all major development environments.

🌟 Features

🤖 AI-Powered Design

Intelligent Component Generation: Create sophisticated Tailwind components using Gemini AI
Smart Optimization: AI-driven class optimization and conflict resolution
Design Analysis: Comprehensive design quality assessment with improvement suggestions
Theme Creation: Generate cohesive design systems with AI assistance

🎨 Tailwind CSS Tools

Component Generator: Create buttons, cards, forms, navigation, modals, and custom components
Class Optimizer: Clean up redundant classes and resolve conflicts
CSS Converter: Transform existing CSS/SCSS to Tailwind classes
Layout Generator: Build responsive layouts for dashboards, landing pages, blogs, and more
Theme Creator: Generate custom color palettes, typography, and design tokens
Preview Generator: Visual component previews with screenshot capability

🌐 Cross-Platform Integration

Multi-Framework Support: React, Vue, Svelte, Angular with automatic component conversion
Build Tool Integration: Vite, Webpack, Next.js, Nuxt, SvelteKit project generation
IDE Extensions: VS Code, WebStorm plugins with live assistance
Design Tool Sync: Figma plugin for design-to-code conversion
Universal Deployment: CLI tools, browser extensions, and API integrations

🚀 Advanced Capabilities

Framework Adapters: Automatic component conversion between frameworks
Universal Project Generation: Create full-stack applications with any tech stack
Multi-Platform Deployment: Deploy to development environments, production, and design tools
External API Integration: Gemini, OpenAI, Claude, Figma for enhanced AI capabilities
Responsive Design: Mobile-first approach with breakpoint optimization
Accessibility: WCAG compliance checking and enhancement suggestions
Performance: Bundle size optimization and render performance analysis
Visual Preview: Screenshot generation for component visualization

📦 Installation

Prerequisites

Node.js 18 or higher
npm or yarn package manager
Docker (for containerized deployment)

在 GitHub 查看完整 README

安装

npx mcp-gemini-cli --allow-npx

新手？先看 mcpskill.org 教程 →

配置

{
  "mcpServers": {
    "tailwind-gemini": {
      "command": "npx",
      "args": ["mcp-gemini-cli", "--allow-npx"],
      "env": {
        "GEMINI_API_KEY": ""your-api-key-here"
      }
}