Fudge: MCP-Server für Webdesign-Referenzen in KI-Coding-Tools

LinkFudgeTool

Fudge ist ein Model Context Protocol (MCP) Server, der KI-Entwicklungstools Zugriff auf eine Bibliothek realer Website-Designs gibt. Das Tool analysiert Typografie, Farbpaletten, Abstände sowie Komponenten und exportiert Design-Systeme direkt für die Implementierung.

Das Wichtigste

  1. Suche nach realen Webseiten nach Branche, Seitentyp, Layout, Farben, Schriftarten, Screenshots oder visuellen Ideen.
  2. Extraktion von Design-Details wie Schriftfamilien, Grössen, Zeilenhöhen, Abständen und CSS-Stilen.
  3. Farbpaletten-Extraktion inklusive automatischer Prüfung von Farbkontrasten für Barrierefreiheit.
  4. Vorschläge für visuell ähnliche Schriftarten, filterbar nach Verfügbarkeit und Lizenz.
  5. Generierung von DESIGN.md, Tailwind CSS, CSS-Variablen, Design Tokens oder strukturiertem JSON aus Live-Websites.
  6. Chrome-Extension zum Erfassen und Lesezeichen-Speichern von Referenzen für spätere Projekte.

Warum das relevant ist

KI-generierte Frontends leiden häufig unter generischen Layouts ohne echtes Designgespür. Durch die Bereitstellung echter Design-Referenzen und strukturierter Tokens über das Model Context Protocol können Coding-Assistenten präzisere und optisch konsistentere Interfaces erzeugen.

Einordnung

Fudge setzt am Schnittpunkt zwischen Designanalyse und KI-gestützter Entwicklung an. Anstatt rein auf Prompting zu vertrauen, versorgt das Tool MCP-fähige Clients mit messbaren Design-Daten realer Websites. Die Möglichkeit, Stile direkt in Tailwind-Klassen, CSS-Variablen oder DESIGN.md-Dokumente zu überführen, reduziert die Reibung zwischen visueller Inspiration und Code-Umsetzung erheblich.

Erwähnte Links

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 17. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Magentix Studio

    Design Extractor: Design-Systeme als DESIGN.md für KI-Coding-Agenten extrahieren

    Design Extractor analysiert öffentliche Websites und fasst deren Design-System in einer strukturierten DESIGN.md-Datei zusammen. Das Format kombiniert maschinenlesbare YAML-Tokens mit Erläuterungen in Markdown, damit KI-Coding-Agenten wie Claude Code oder Cursor konsistente Frontends erstellen können.

    KI & AI· Tool

  • Link:eyedropper.design

    Eyedropper: Design-Systeme für KI-Agenten über MCP bereitstellen

    Eyedropper extrahiert Design-Tokens wie Farben, Typografie und Abstände direkt aus bestehendem Code und stellt diese KI-Agenten über das Model Context Protocol (MCP) zur Verfügung. Generierter Frontend-Code wird automatisch gegen das Design-System validiert, um Abweichungen vom Markenauftritt zu verhindern.

    KI & AI· Tool

  • Link:Relume

    Relume Library MCP: Komponentenbibliothek direkt im AI-Editor

    Relume bindet seine Komponentenbibliothek über das Model Context Protocol (MCP) direkt in KI-gestützte Editoren ein. Entwickler können Abschnitte per Prompt suchen und echten, editierbaren React-Code samt Design-System-Primitiven in ihr Projekt laden.

    KI & AI· Tool

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Ein Teil von diesem Inhalt wurde mit KI gemacht.