# AIDesigner MCP Server

Ein leichtgewichtiger MCP-Server, der KI-Coding-Assistenten wie Claude Code, Cursor, Codex, VS Code/Copilot und Windsurf befähigt, produktionsreife UI-Designs direkt in Ihrer Codebasis zu generieren, zu verfeinern und zu integrieren.

Canonical URL: https://a2a-mcp.org/entry/aidesigner-mcp-de

Language: de

Category: MCP Servers

Updated: 2026-04-08

## Übersicht

Der AIDesigner MCP-Server ist ein leichtgewichtiger **Model Context Protocol (MCP)**-Server, der die Lücke zwischen leistungsstarken KI-Codierungsassistenten und professionellem UI/UX-Design überbrückt. Er adressiert eine der größten Schwächen von Tools wie Claude Code – die eingeschränkten nativen UI-Designfähigkeiten – indem er ihnen direkt im Editor Zugang zu intelligenten Designtools verschafft.

Der Server liest das Framework, die Komponentenbibliothek, die CSS/Tailwind-Tokens und das Designsystem Ihres Projekts und generiert dann produktionsreifen UI-Code, der nahtlos in Ihren bestehenden Tech-Stack passt. Kein Hin- und Herschalten mehr zwischen Figma und Ihrem Code-Editor oder manuelles Korrigieren von KI-generierten Designs.

## Hauptfunktionen

-   **Codebasis-bewusste Design-Generierung**: Analysiert Ihr Projekt, um Frameworks, Komponenten und Tokens zu verstehen, bevor UI erstellt wird.
-   **`generate_design`-Tool**: Wandelt natürliche Sprachbefehle in produktionsreife UI-Komponenten und Seiten um.
-   **`refine_design`-Tool**: Iterative Verbesserung von Layouts, Farben, Abständen und Styles mit konversationellen Anweisungen.
-   **Direkte Code-Integration**: Gibt Code aus, der direkt in Ihre Codebasis übernommen werden kann, ohne manuelle Anpassung.
-   **OAuth-Authentifizierung**: Sichere Anmeldeabläufe mit automatischer Token-Aktualisierung durch den MCP-Host.
-   **Breite Kompatibilität**: Funktioniert mit Claude Code, Codex, Cursor, VS Code (Copilot Agent-Modus) und Windsurf.
-   **Nahtlose Einrichtung**: Installation und Konfiguration über einen einzigen `npx`-Befehl.

## Unterstützte KI-Coding-Tools

-   **Claude Code**: Vollständiger geführter Workflow mit `/mcp`-Befehl und dedizierten Agents.
-   **Cursor**: Nahtlose Integration für KI-gestütztes Editieren.
-   **Codex**: Unterstützung für Projekt-Level-Konfiguration.
-   **VS Code / GitHub Copilot**: Kompatibilität mit dem Agent-Modus.
-   **Windsurf**: Benutzerbezogene Konfiguration.

## Installation & Einrichtung

1.  Führen Sie den Initialisierungsbefehl in Ihrem Projekt aus:
    ```bash
    npx -y @aidesigner/agent-skills init <host> --trust-project
    ```
    (Ersetzen Sie `<host>` durch `codex`, `cursor`, usw.)

2.  Die CLI registriert den MCP-Server und öffnet ein Browser-Fenster für die OAuth-Anmeldung.

3.  Verbinden Sie sich über das MCP-Panel Ihres KI-Assistenten (z.B. führen Sie `/mcp` in Claude Code aus und wählen Sie "aidesigner").

4.  Beginnen Sie mit Prompts: "Generiere eine moderne Preisgestaltungsseite mit Dark-Mode-Unterstützung" oder "Verfeinere dieses Dashboard für unsere Markenfarben."

Detaillierte Setup-Anleitungen, Tool-Referenzen und Fehlerbehebung finden Sie in der [offiziellen Dokumentation](https://www.aidesigner.ai/docs/mcp).

## Anwendungsfälle

-   **Schnelles Frontend-Prototyping**: Gehen Sie in Minuten von einer Idee zu einem ausgefeilten UI, ohne Ihren Editor zu verlassen.
-   **Designsystem-Konformität**: Stellen Sie sicher, dass alle generierten Komponenten Ihre bestehenden Tokens und Komponenten respektieren.
-   **Iterative UI-Verfeinerung**: Verwenden Sie natürliche Sprache, um Layouts, Barrierefreiheit oder Responsiveness anzupassen.
-   **Full-Kupfer-Stack-Entwicklung**: Kombinieren Sie es mit Coding-Agents, um komplette Features inklusive schöner Interfaces zu bauen.
-   **Team-Kollaboration**: Behalten Sie konsistente Designqualität über KI-unterstützte und manuelle Entwicklung hinweg bei.

## Technische Details

- **Protokoll**: Model Context Protocol (MCP) – standardisierte Bereitstellung von Werkzeugen und Kontext.
- **Verteilung**: Verfügbar über npm (`@aidesigner/agent-skills` und verwandte Pakete).
- **Authentifizierung**: OAuth-basiert mit automatischem Token-Management.
- **Status**: Aktive Entwicklung; Version 0.1.0 veröffentlicht mit starker früher Resonanz auf Product Hunt.

AIDesigner MCP verwandelt KI-Codierungsassistenten von Code-Generatoren in vollwertige Design- und Code-Partner, die schöne, produktionsreife Benutzeroberflächen für jeden Entwickler zugänglich machen.

Besuchen Sie [aidesigner.ai](https://www.aidesigner.ai/) für weitere Informationen, Live-Demos und die neuesten Updates.

## Tags

- mcp
- mcp-server
- ui-design
- frontend
- claude-code
- cursor
- ai-coding
- design-system
- tailwind
- component-library

## Sources

- [Project website](https://www.aidesigner.ai/docs/mcp)