GitDiagram
Architecture diagrams, explanations and Mermaid source for public GitHub repositories.
Se ejecuta en la nube✓ del servicio · gitdiagram.comProbado por el equipo de PopNx
Flood Design System
What it does
Find Flood UI components, recipes, tokens, and design skills for coding agents.
- Connects Se ejecuta en la nube
- Account or key No key needed
- Category Herramientas para desarrolladores
Instalación
Elige la app de IA que usas y copia la configuración.
Pasó 5/5 revisiones · Lo que preguntas pasa por el servidor del autor (flood.md) · ✓ Comandos revisados el 14 nov 2026
Primero: ¿qué IA usas?
Elige tu app y los pasos aparecen abajo.
Funciona con Claude · unos 2 min
Sin clave y sin instalar nada · Configúralo una vez en claude.ai o en la app de escritorio y úsalo en el chat · las cuentas gratis pueden añadir 1 · en Team/Enterprise lo añade un Owner
Abre la página Connectors de Claude
CustomizeConnectors
Pulsa “Add” → “Custom” → “Web” y completa estos 2 campos
Copia cada valor al campo con el mismo nombre en Claude y pulsa Continue
Name · NombreFlood Design SystemRemote MCP server URL · Direcciónhttps://flood.md/mcpPulsa Continue en la pantalla de inicio de sesión que detectó Claude · en Authentication elige lo que indique el autor (Sign in now, Sign in when needed o No sign in) y pulsa Add
Actívalo en un chat
+ConnectorsFlood Design System
Pruébalo
Usa Flood Design System y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Claude dice que está usando Flood Design System o muestra una herramienta de Flood Design System en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con ChatGPT según tu plan
MCP completo: ChatGPT Business, Enterprise o Edu en la web · Pro: conecta con permisos de lectura/obtención, así que las herramientas que cambian datos pueden no funcionar · Plus: no confirmado en la documentación; si ves una opción para añadir MCP propio en la página de plugins puedes probar · solo web
Abre la página para añadir MCP en ChatGPT web
Plugins+Add custom MCP server
Escribe el nombre y la dirección
Pon un nombre, pega la dirección en Connection, marca el aviso de riesgo y pulsa Create as a plugin
Name · NombreFlood Design SystemConnection · Direcciónhttps://flood.md/mcpElige Flood Design System en un chat
Abre un chat nuevo y elige Flood Design System en tus plugins antes de escribir
Pruébalo
Usa Flood Design System y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si ChatGPT dice que está usando Flood Design System o muestra una herramienta de Flood Design System en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de OpenAI el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con Claude Code · unos 2 min
Sin clave y sin instalar nada
Abre la Terminal
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell
Pega este comando y pulsa Enter
claude mcp add --transport http --scope user flood https://flood.md/mcpEscribe /mcp en Claude Code
Deberías ver Flood Design System en la lista como conectado
Pruébalo
Usa Flood Design System y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Claude Code dice que está usando Flood Design System o muestra una herramienta de Flood Design System en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con Cursor · unos 2 min
Sin clave y sin instalar nada
Abre el chat de IA de Cursor en modo Agent
Pruébalo
Usa Flood Design System y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si Cursor dice que está usando Flood Design System o muestra una herramienta de Flood Design System en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Funciona con VS Code · unos 2 min
Sin clave y sin instalar nada
Abre el chat de IA de VS Code en modo Agent
Pruébalo
Usa Flood Design System y dime qué puedes hacer por mí; luego muéstrame una cosa✓ Si VS Code dice que está usando Flood Design System o muestra una herramienta de Flood Design System en la respuesta, ya está conectado
Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión
Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps
Ver todas las apps que usan MCP →
Dirección para apps que se conectan por la web
Dirección
https://flood.md/mcpLa configuración JSON está en “Para desarrolladores”, abajo
Para desarrolladores: comandos de Terminal y configuración JSON
Por la web
Claude Code
claude mcp add --transport http --scope user flood https://flood.md/mcpCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"flood": {
"url": "https://flood.md/mcp"
}
}
}VS Code (mcp.json)
{
"servers": {
"flood": {
"type": "http",
"url": "https://flood.md/mcp"
}
}
}Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.
De un vistazo
- Descargas por semanai
- No está en npm/PyPI
- Conexión
- Se ejecuta en la nube
- Transporte
- streamable-http
- Última versióni
- 0.1.0
- Categoríai
- Herramientas para desarrolladores
- Publicado en el registroi
- 14 nov 2026
- Último cambio de códigoi
- 15 nov 2026
- Creador
- tillwithered
- Sitio web
- flood.md
- Estado en el registro
- Activo
Qué apps pueden usarlo
Según cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.
Se conectan por internet en
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
Qué puede hacer
Nombres y descripciones de las herramientas tal como los informó el servidor el 14 nov 2026. Los escribió el creador, no nosotros; los mostramos como texto sin formato.
flood_infoReport the version, scope and coverage of the public Flood catalog.
search_floodFind 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_floodRead 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.
Revisiones básicasi
Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 15 nov 2026
- ✓ Superada
El creador coincide con el repo
El nombre en el registro se verificó con la cuenta de GitHub tillwithered, dueña del repo
- ✓ Superada
Sigue en mantenimiento
Último cambio de código: hoy
- ✓ Superada
Tiene licencia
Usa MIT
- ✓ Superada
- – No aplica
Inicio de sesión con OAuth
No hace falta iniciar sesión
- ✓ Superada
Sin instrucciones ocultas en las descripciones de herramientas
Leímos 3 descripciones de herramientas y no encontramos instrucciones ocultas para la IA
Creadores: pedir otra revisión o avisar de un dato erróneo
Conversación
Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.
Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.
Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.
Reseñas de usuarios
Aún no hay reseñas
Comparado con otros en Herramientas para desarrolladoresi
- Más estrellas que el 69% de los otros 5921 servidores de esta categoría
- Publicado en el registro más recientemente que el 97% de los otros 5921 servidores de esta categoría
- Revisiones básicas iguales o mejores que el 100% de los otros 5921 servidores de esta categoría
Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.
Preguntas frecuentes
¿Es seguro Flood Design System?
Superó 5 de 5 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.
¿Qué claves o códigos necesita?
El registro no indica ninguna clave obligatoria, aunque algunos servidores te piden iniciar sesión la primera vez que los usas.
¿Se ejecuta en mi computadora o en la nube?
Se ejecuta en la nube del creador. Te conectas por internet sin instalar nada, pero lo que envías pasa por los servidores del creador.
¿Sigue en mantenimiento?
El repo de GitHub cambió por última vez hoy, y la última versión (0.1.0) llegó al registro ayer.
¿Qué apps pueden usarlo?
Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. Se conecta por URL, así que también sirve en apps que aceptan MCP remoto, como ChatGPT en la web (MCP completo en Business y superiores; Pro solo lectura).
¿Qué puedo usar en su lugar?
En la misma categoría: GitDiagram, Appllama, Cloudflare MCP, Omnara, Repowise
Alternativas parecidas
Misma categoría, otros creadores, comandos ya revisados. Primero los oficiales, luego por estrellas.
Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi
Appllama
Study screens, flows and paywalls from top-earning iOS apps, then build from what wins.
Se ejecuta en la nube✓ del servicio · appllama.io
Cloudflare MCP
Cloudflare MCP servers
Se ejecuta en la nube✓ del servicio · mcp.cloudflare.comProbado por el equipo de PopNx
Omnara
Deploy durable AI agents with Omnara, an open-source managed-agent platform.
Se ejecuta en la nube✓ del servicio · omnara.com
Repowise
Codebase intelligence for AI coding agents: graph, git history, docs, decisions, code health.
Computadora o nube✓ del servicio · repowise.dev
- GitDiagram — Funciona en la nube, sin instalar nada · Sin clave
- Appllama — Funciona en la nube, sin instalar nada · Sin clave
- Cloudflare MCP — Funciona en la nube, sin instalar nada · Sin clave · En el directorio de Claude
- Omnara — Funciona en la nube, sin instalar nada · Sin clave
- Repowise — En la nube o instalado en tu equipo · Sin clave
README del creador
Abrir el README
Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.
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 initThe 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 cinpm run dev
npm run verifynpx 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.