Flood Design System

Name: Flood Design System
Author: tillwithered

von tillwitheredVersion 0.1.0i★ 1iLäuft in der Cloud

Name in der Registryio.github.tillwithered/flood

So installierst du es

What it does

Find Flood UI components, recipes, tokens, and design skills for coding agents.

Connects Läuft in der Cloud
Account or key No key needed
Category Entwicklertools

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

5/5 Prüfungen bestanden · Was du fragst, läuft über den Server des Anbieters (flood.md) · ✓ Befehle geprüft am 14. Nov. 2026

Zuerst: Welche KI nutzt du?

ClaudeWeb · App · HandyChatGPTWebClaude CodeTerminalCursorCode-EditorVS CodeCode-EditorAndereAndere Apps

Wähle deine App, dann erscheinen die Schritte unten.

Klappt mit Claude · etwa 2 Min.

Kein Schlüssel, nichts zu installieren · Einmal auf claude.ai oder in der Desktop-App einrichten, dann im Chat nutzen · kostenlose Konten können 1 hinzufügen · bei Team/Enterprise fügt ein Owner ihn hinzu

Öffne die Connectors-Seite von Claude
CustomizeConnectors
Erledigt
Klicke „Add“ → „Custom“ → „Web“ und fülle diese 2 Felder aus
Kopiere jeden Wert in das gleichnamige Feld in Claude und klicke Continue
Name · NameFlood Design System
Remote MCP server URL · Adressehttps://flood.md/mcp
Klicke auf der von Claude erkannten Anmelde-Seite auf Continue · wähle bei Authentication, was der Anbieter angibt (Sign in now, Sign in when needed oder No sign in), dann Add
Erledigt
Im Chat einschalten
+ConnectorsFlood Design System
Erledigt
Ausprobieren
Nutze Flood Design System und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude sagt, dass es Flood Design System nutzt, oder ein Werkzeug von Flood Design System in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit ChatGPT je nach Tarif

Volles MCP: ChatGPT Business, Enterprise oder Edu im Web · Pro: verbindet mit Lese-/Abrufrechten, Werkzeuge, die Daten ändern, gehen evtl. nicht · Plus: in der Doku nicht bestätigt; siehst du auf der Plugins-Seite eine Option für eigene MCP-Server, kannst du es versuchen · nur Web

In ChatGPT im Web die Seite zum Hinzufügen von MCP öffnen
Plugins+Add custom MCP server
Erledigt
Name und Adresse eintragen
Namen eingeben, Adresse unter Connection einfügen, Risikohinweis abhaken und Create as a plugin klicken
Name · NameFlood Design System
Connection · Adressehttps://flood.md/mcp
Erledigt
Flood Design System im Chat auswählen
Neuen Chat öffnen und vor dem Tippen Flood Design System aus deinen Plugins wählen
Erledigt
Ausprobieren
Nutze Flood Design System und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn ChatGPT sagt, dass es Flood Design System nutzt, oder ein Werkzeug von Flood Design System in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von OpenAI abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Claude Code · etwa 2 Min.

Kein Schlüssel, nichts zu installieren

Terminal öffnen
Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen
Erledigt

Diesen Befehl einfügen und Enter drücken

claude mcp add --transport http --scope user flood https://flood.md/mcp

Erledigt

/mcp in Claude Code eingeben
Flood Design System sollte in der Liste als verbunden erscheinen
Erledigt
Ausprobieren
Nutze Flood Design System und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude Code sagt, dass es Flood Design System nutzt, oder ein Werkzeug von Flood Design System in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Cursor · etwa 2 Min.

Kein Schlüssel, nichts zu installieren

Mit diesem Button Cursor öffnen
In Cursor öffnen
Cursor fragt nach einer Bestätigung; klicke Install
Erledigt
KI-Chat in Cursor im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Flood Design System und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Cursor sagt, dass es Flood Design System nutzt, oder ein Werkzeug von Flood Design System in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit VS Code · etwa 2 Min.

Kein Schlüssel, nichts zu installieren

Mit diesem Button VS Code öffnen
In VS Code öffnen
VS Code fragt nach einer Bestätigung; klicke Install
Erledigt
KI-Chat in VS Code im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Flood Design System und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn VS Code sagt, dass es Flood Design System nutzt, oder ein Werkzeug von Flood Design System in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Andere Apps mit MCP, etwa Windsurf, Zed oder Gemini CLI, fügen Server unterschiedlich hinzu. Sieh in der App-Liste nach

Alle Apps mit MCP ansehen →

Adresse für Apps, die über das Web verbinden

Adressehttps://flood.md/mcp

JSON-Einstellungen stehen unten unter „Für Entwickler“

Hängst du fest? Frag Leute, die Flood Design System nutzen💬 Diskussion →

Für Entwickler: Terminal-Befehle und JSON-Einstellungen

Über das Web

Claude Code

claude mcp add --transport http --scope user flood https://flood.md/mcp

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "flood": {
      "url": "https://flood.md/mcp"
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "flood": {
      "type": "http",
      "url": "https://flood.md/mcp"
    }
  }
}

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Auf einen Blick

GitHub-Sterne i: 1
Downloads pro Wochei: Nicht auf npm/PyPI
Lizenz i: MIT
Verbindung: Läuft in der Cloud
Transport: streamable-http
Neueste Versioni: 0.1.0
Kategoriei: Entwicklertools
In der Registry veröffentlichti: 14. Nov. 2026
Code zuletzt geänderti: 15. Nov. 2026
Entwickler: tillwithered
Repo: tillwithered/flood.md
Website: flood.md
Registry-Status: Aktiv

Welche Apps ihn nutzen können

Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.

Verbinden sich über das Internet in

Claude ChatGPT Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Open WebUI Raycast

Alle Apps, mit Vor- und Nachteilen →

Was er kann

Tool-Namen und -Beschreibungen genau so, wie der Server sie am 14. Nov. 2026 gemeldet hat. Geschrieben hat sie der Entwickler, nicht wir; wir zeigen sie als reinen Text.

flood_info
Report the version, scope and coverage of the public Flood catalog.
search_flood
Find public Flood components, ready-to-use compositions, tokens and agent guidance by name or by describing the UI task in English or Russian. Pass a result ID to read_flood for the full contract.
read_flood
Read one public material by ID. Omit length for up to 10,000 characters. Continue with nextOffset when present. Required prerequisites are listed separately from related materials.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 15. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto tillwithered bestätigt, dem das Repo gehört
✓ Bestanden
Wird noch gepflegt
Code zuletzt geändert: heute
✓ Bestanden
Hat eine Lizenz
Nutzt MIT
✓ Bestanden
Endpunkt antwortet
Antwort in 113 ms (HTTP 200)
– Nicht zutreffend
Anmeldung mit OAuth
Keine Anmeldung nötig
✓ Bestanden
Keine versteckten Anweisungen in Tool-Beschreibungen
Wir haben 3 Tool-Beschreibungen gelesen und keine versteckten Anweisungen an die KI gefunden

Was wir prüfen → · JSON

Entwickler: neue Prüfung anfordern oder falsche Angaben melden

Anmelden

Diskussion

Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.

Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.

Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.

Anmelden, um zu posten

Nutzerbewertungen

Noch keine Bewertungen

Anmelden, um eine Bewertung zu schreiben

Im Vergleich mit anderen in Entwicklertoolsi

Mehr Sterne als 69 % der anderen 5921 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 97 % der anderen 5921 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 5921 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Flood Design System sicher?

Er hat 5 von 5 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft in der Cloud des Entwicklers. Du verbindest dich übers Internet, ohne etwas zu installieren, aber was du sendest, läuft über die Server des Entwicklers.

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt heute geändert, und die neueste Version (0.1.0) kam gestern in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Er verbindet sich per URL und funktioniert daher auch in Apps mit Remote-MCP, etwa ChatGPT im Web (volles MCP ab Business; Pro nur lesend).

Was kann ich stattdessen nutzen?

In derselben Kategorie: GitDiagram, Appllama, Cloudflare MCP, Omnara, Repowise

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

flood.md

An open-source design system for developers and coding agents. Flood ships original UI components, dark foundations, semantic tokens and versioned design guidance. The current implementation supports React 18.3 and 19 and Next.js App Router, with TypeScript declarations.

Component catalog · Charts · Documentation · Connect your agent · Releases

Quick start

In an existing React or Next.js project with Node.js 22.12+ and npm, install the latest published release.

npx @flood-md/cli init

The CLI installs matching versions of the component, token and agent packages. It adds project configuration and the Flood skill without overwriting existing files. Use init --dry-run to see the planned changes first. The main branch can include changes for the next release. Use the release tags to read the source and docs for an installed version.

Import the stylesheet once at the app entry or in the Next.js root layout. Wrap your interface in FloodRoot to apply the dark foundations.

import "@flood-md/react/styles.css";

import { Button, FloodRoot, Heading, Stack } from "@flood-md/react";

export function Workspace() { return (

Workspace New project

); }

See installation and upgrades for manual setup and version alignment. Customize the foundations with semantic CSS variables.

Build with a coding agent

Share the agent entry point when starting a project with an agent. In a connected project, the installed flood/DESIGN.md and .agents/skills/flood-ui/SKILL.md guide component selection, composition and verification. The agent knowledge guide explains how to look up a component or workflow with the CLI version recorded in flood.json. Open Connect your agent for client setup and prompts that lead to working Flood examples. See agent setup for the versioned project workflow.

Develop

Node.js 22.12+ (Node 24 recommended), npm 11.

npm ci

npm run dev

npm run verify

npx playwright install chromium npm run test:browser

verify builds the packages and site, checks types, runs tests and validates the packed packages in a clean consumer. The browser suite covers the website and the Next.js example.

Workspace

Directory	Purpose
`packages/tokens`	Authored JSON tokens → generated CSS
`packages/react`	React components, declarations and CSS
`packages/cli`	Installer, diagnostics and catalog search
`packages/agent`	Versioned design guidance and skills
`apps/website`	Website, component previews and agent endpoints
`examples/next`	Next.js integration example

Read CONTRIBUTING.md, architecture, releases, and deployment. To report a component issue, open a GitHub issue. Report vulnerabilities using the security policy.

License

Flood code is MIT licensed. The bundled Inter font retains its original SIL Open Font License.

Flood Design System

What it does

Installation

Öffne die Connectors-Seite von Claude

Klicke „Add“ → „Custom“ → „Web“ und fülle diese 2 Felder aus

Im Chat einschalten

Ausprobieren

In ChatGPT im Web die Seite zum Hinzufügen von MCP öffnen

Name und Adresse eintragen