Flood Design System

Name: Flood Design System
Author: tillwithered

โดย tillwitheredรุ่น 0.1.0i★ 1iรันบนคลาวด์

ชื่อใน registryio.github.tillwithered/flood

วิธีติดตั้ง

ใช้ทำอะไรได้

ยังไม่มีคำอธิบายภาษาไทย ดูข้อเท็จจริงด้านล่าง หรือเปิดคำอธิบายต้นฉบับจากผู้ทำ

ต่อแบบ คลาวด์ (ต่อผ่านอินเทอร์เน็ต)
บัญชีหรือคีย์ ไม่ต้องใส่คีย์
หมวด เครื่องมือนักพัฒนา

คำอธิบายต้นฉบับจากผู้ทำ (อังกฤษ)

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

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ผลตรวจผ่าน 5/5 · สิ่งที่คุณถามผ่านเซิร์ฟเวอร์ของผู้ทำ (flood.md) · ✓ ตรวจคำสั่งแล้ว 14 พ.ย. 2569

ขั้นแรก: คุณใช้ AI ตัวไหน

Claudeเว็บ · แอป · มือถือChatGPTเว็บClaude CodeTerminalCursorโปรแกรมเขียนโค้ดVS Codeโปรแกรมเขียนโค้ดอื่น ๆโปรแกรมอื่น

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม · ตั้งครั้งเดียวที่ claude.ai หรือแอปบนคอม แล้วใช้ในแชตได้ · บัญชีฟรีเพิ่มได้ 1 ตัว · แผน Team/Enterprise ให้เจ้าของ (Owner) เป็นคนเพิ่ม

เปิดหน้า Connectors ของ Claude
CustomizeConnectors
ทำแล้ว
กด “Add” → “Custom” → “Web” แล้วกรอก 2 ช่องนี้
คัดลอกจากที่นี่ไปวางในช่องชื่อเดียวกันบนหน้าจอของ Claude แล้วกด Continue
Name · ชื่อFlood Design System
Remote MCP server URL · ที่อยู่https://flood.md/mcp
กด Continue ผ่านหน้าตรวจการล็อกอินที่ Claude ตรวจเจอ · หัวข้อ Authentication เลือกตามที่ผู้ทำบอก (Sign in now, Sign in when needed หรือ No sign in) แล้วกด Add
ทำแล้ว
เปิดใช้ในแชต
+ConnectorsFlood Design System
ทำแล้ว
ลองเลย
ใช้ Flood Design System บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude บอกว่ากำลังใช้ Flood Design System หรือมีชื่อเครื่องมือของ Flood Design System ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ ChatGPT ได้ ขึ้นกับแผน

MCP แบบเต็ม: ChatGPT Business, Enterprise หรือ Edu บนเว็บ · Pro: ต่อได้ด้วยสิทธิ์อ่านและดึงข้อมูล เครื่องมือที่แก้ข้อมูลอาจใช้ไม่ได้ · Plus: เอกสารยังไม่ยืนยัน ถ้าเห็นเมนูเพิ่ม MCP แบบกำหนดเองในหน้าปลั๊กอิน ลองตามขั้นตอนได้ · ใช้บนเว็บเท่านั้น

เปิดหน้าเพิ่ม MCP ของ ChatGPT บนเว็บ
Plugins+Add custom MCP server
ทำแล้ว
กรอกชื่อและที่อยู่
ใส่ชื่อ แล้ววางที่อยู่ใต้ Connection ติ๊กยอมรับคำเตือน แล้วกด Create as a plugin
Name · ชื่อFlood Design System
Connection · ที่อยู่https://flood.md/mcp
ทำแล้ว
เลือก Flood Design System ในแชต
เปิดแชตใหม่แล้วเลือก Flood Design System จากรายการปลั๊กอินก่อนพิมพ์
ทำแล้ว
ลองเลย
ใช้ Flood Design System บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า ChatGPT บอกว่ากำลังใช้ Flood Design System หรือมีชื่อเครื่องมือของ Flood Design System ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ OpenAI เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ Claude Code ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม

เปิด Terminal
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
ทำแล้ว
2
วางคำสั่งนี้แล้วกด Enter
```
claude mcp add --transport http --scope user flood https://flood.md/mcp
```
ทำแล้ว
พิมพ์ /mcp ใน Claude Code
ต้องเห็น Flood Design System ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ทำแล้ว
ลองเลย
ใช้ Flood Design System บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Claude Code บอกว่ากำลังใช้ Flood Design System หรือมีชื่อเครื่องมือของ Flood Design System ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ต่อกับ Cursor ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม

กดปุ่มนี้เพื่อเปิด Cursor
เปิดใน Cursor
Cursor จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน Cursor โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Flood Design System บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า Cursor บอกว่ากำลังใช้ Flood Design System หรือมีชื่อเครื่องมือของ Flood Design System ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม

กดปุ่มนี้เพื่อเปิด VS Code
เปิดใน VS Code
VS Code จะถามยืนยันการติดตั้ง ให้กด Install
ทำแล้ว
เปิดแชตของ AI ใน VS Code โหมด Agent
ทำแล้ว
ลองเลย
ใช้ Flood Design System บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง
✓ ถ้า VS Code บอกว่ากำลังใช้ Flood Design System หรือมีชื่อเครื่องมือของ Flood Design System ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ที่อยู่สำหรับโปรแกรมที่ต่อผ่านเว็บ

ที่อยู่https://flood.md/mcp

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ Flood Design System อยู่💬 พูดคุย →

สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ต่อผ่านเว็บ

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"
    }
  }
}

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

สรุป

ดาว GitHub i: 1
ดาวน์โหลดต่อสัปดาห์i: ไม่มียอดใน npm/PyPI
license i: MIT
การเชื่อมต่อ: รันบนคลาวด์
ช่องทาง (transport): streamable-http
รุ่นล่าสุดi: 0.1.0
หมวดi: เครื่องมือนักพัฒนา
ส่งเข้า registryi: 14 พ.ย. 2569
แก้โค้ดล่าสุดi: 15 พ.ย. 2569
ผู้ทำ: tillwithered
repo: tillwithered/flood.md
เว็บผู้ทำ: flood.md
สถานะใน registry: ใช้งานอยู่

ใช้กับโปรแกรมไหนได้

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ต่อผ่านคลาวด์ได้ใน

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

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

เรื่องที่ 8เช็ก 5 ข้อก่อนติดตั้ง MCP ไม่ให้ข้อมูลรั่วใช้เวลาราว 2 นาทีต่อตัว ดูจากหน้าของตัวนั้นบนเว็บเรา และหน้าขออนุญาตของโปรแกรม AI ก่อนกดยอมอ่าน 4 นาที

ทำอะไรได้บ้าง

ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 14 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน

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.

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 15 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub tillwithered ซึ่งเป็นเจ้าของ repo
✓ ผ่าน
ยังมีคนดูแล
มีการแก้โค้ดล่าสุด วันนี้
✓ ผ่าน
มีสัญญาอนุญาต (license)
ใช้ MIT
✓ ผ่าน
endpoint ตอบ
ตอบกลับใน 113 ms (HTTP 200)
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ไม่ต้องล็อกอิน
✓ ผ่าน
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
อ่านคำอธิบายเครื่องมือ 3 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI

เราตรวจอะไรบ้าง → · JSON

ผู้ทำ: ขอให้ตรวจใหม่ หรือแจ้งข้อมูลผิด

เข้าสู่ระบบ

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบเพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบเพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด เครื่องมือนักพัฒนาi

ดาวมากกว่า 69% ของอีก 5921 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 97% ของอีก 5921 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 5921 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Flood Design System ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 5 จาก 5 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด วันนี้ และส่งรุ่นล่าสุด (0.1.0) เข้า registry เมื่อวาน

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT บนเว็บ (แบบเต็มในแผน Business ขึ้นไป · Pro แบบอ่านอย่างเดียว)

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี GitDiagram, Appllama, Cloudflare MCP, Omnara, Repowise

ตัวอื่นที่ทำงานคล้ายกัน

หมวดเดียวกันจากผู้ทำคนอื่น ผ่านตัวตรวจคำสั่งแล้ว ตัวทางการขึ้นก่อน แล้วเรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

GitDiagram

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

โดย ahmedkhaleel2004ใช้กันมาก★ 18.9Kอัปเดต 2 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · gitdiagram.comทีม PopNx ลองใช้จริงแล้ว

วิธีต่อ

Appllama

Study screens, flows and paywalls from top-earning iOS apps, then build from what wins.

โดย Appllamaใช้กันมาก★ 5.2Kอัปเดต 3 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · appllama.io

วิธีต่อ

Cloudflare MCP

Cloudflare MCP servers

โดย cloudflareใช้กันมาก★ 4.5Kอัปเดต 14 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · mcp.cloudflare.comทีม PopNx ลองใช้จริงแล้ว

วิธีต่อ

Omnara

Deploy durable AI agents with Omnara, an open-source managed-agent platform.

โดย omnara-aiใช้กันมาก★ 3.4Kอัปเดต 2 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · omnara.com

วิธีต่อ

Repowise

Codebase intelligence for AI coding agents: graph, git history, docs, decisions, code health.

โดย repowise-devใช้กันมาก↓ 6.5K/สัปดาห์★ 8.1K ดาวรวมทั้งรีโปอัปเดต เมื่อวานซืน

บนเครื่องหรือคลาวด์✓ เจ้าของบริการ · repowise.dev

ติดตั้ง

GitDiagram — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Appllama — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Cloudflare MCP — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์ · อยู่ในคลังของ Claude
Omnara — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
Repowise — มีทั้งบนคลาวด์และแบบลงเครื่อง · ไม่ต้องใช้คีย์

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

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

ใช้ทำอะไรได้

ติดตั้ง

เปิดหน้า Connectors ของ Claude

กด “Add” → “Custom” → “Web” แล้วกรอก 2 ช่องนี้

เปิดใช้ในแชต

ลองเลย

เปิดหน้าเพิ่ม MCP ของ ChatGPT บนเว็บ

กรอกชื่อและที่อยู่

เลือก Flood Design System ในแชต

ลองเลย

เปิด Terminal

วางคำสั่งนี้แล้วกด Enter

พิมพ์ /mcp ใน Claude Code

ลองเลย

กดปุ่มนี้เพื่อเปิด Cursor

เปิดแชตของ AI ใน Cursor โหมด Agent

ลองเลย

กดปุ่มนี้เพื่อเปิด VS Code

เปิดแชตของ AI ใน VS Code โหมด Agent

ลองเลย

ต่อผ่านเว็บ

สรุป

ใช้กับโปรแกรมไหนได้

คู่มือที่เกี่ยวข้อง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

พูดคุย

รีวิวจากผู้ใช้

เทียบกับตัวอื่นในหมวด เครื่องมือนักพัฒนาi

คำถามที่พบบ่อย

ตัวอื่นที่ทำงานคล้ายกัน

GitDiagram

Appllama

Cloudflare MCP

Omnara

Repowise

README จากผู้ทำ

flood.md

Quick start

Build with a coding agent

Develop

Workspace

License