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 分