Flood Design System

io.github.tillwithered由 GitHub 账号 tillwithered 发布v0.1.0更新于 Nov 14, 2026

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

已验证Streamable HTTP可网页运行知识与记忆开发者工具

概览

AI 生成的概览

远程 MCP 服务器，让助手检索公开的 Flood 设计系统，并按 ID 读取组件、配方、令牌与指南条目。

可以做什么
  • 报告目录的版本、范围与覆盖情况
  • 按名称或用英文、俄文描述 UI 任务，搜索公开组件、可直接使用的组合、令牌与智能体指南
  • 按 ID 读取单个材料，每次最多 10,000 字符，可续读，前置条件与相关材料分开列出
适用场景
在使用 Flood 构建或审查 React、Next.js 界面时，让助手从公开目录中查找合适的组件、组合或令牌，而不是凭猜测作答。
运行要求
位于 flood.md 的远程 streamable HTTP 端点；未声明认证、环境变量或请求头。把 Flood 安装到项目是另一回事，需要 Node.js 22.12+ 与 npm。
安装前请注意
仅覆盖公开目录；对已有项目，应以已安装的 Flood 版本和宿主说明为准来确定 API 与本地定制。主分支可能包含未发布改动，匹配已安装版本时优先使用发布标签。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Flood Design System，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体，或 SourceWeft 对话中。智能体会读取该服务器的安装指南，先向你展示发布者、端点和登录方式，经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/io.github.tillwithered%2Fflood/install.md，并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前，先告诉我它的发布者、端点和登录方式，等我确认。不要把 API 密钥写进命令或我会提交的文件；问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "mcpServers": {
    "flood-design-system": {
      "type": "http",
      "url": "https://flood.md/mcp"
    }
  }
}

README

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.

sh
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.

tsx
import "@flood-md/react/styles.css";import { Button, FloodRoot, Heading, Stack } from "@flood-md/react";
export function Workspace() {  return (    <FloodRoot>      <Stack gap="4">        <Heading level={1}>Workspace</Heading>        <Button>New project</Button>      </Stack>    </FloodRoot>  );}

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.

sh
npm cinpm run dev
sh
npm run verifynpx playwright install chromiumnpm 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

DirectoryPurpose
packages/tokensAuthored JSON tokens → generated CSS
packages/reactReact components, declarations and CSS
packages/cliInstaller, diagnostics and catalog search
packages/agentVersioned design guidance and skills
apps/websiteWebsite, component previews and agent endpoints
examples/nextNext.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.

来源：README.md，提交 4a42c8a

工具

3

flood_info

Flood catalog version

Report the version, scope and coverage of the public Flood catalog.

无需输入参数。

search_flood

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.

输入参数kindgrouplimitcursorsearch

read_flood

Read Flood material

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.

输入参数id必填lengthoffsetlinksOffset

版本历史

1
  1. v0.1.0最新Nov 14, 2026

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分