Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
MCP server that provides architecture design expertise to AI coding agents
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
GENERATOR_API_KEY, GENERATOR_PROVIDER, GENERATOR_MODEL, GENERATOR_BASE_URL, PATTERN_DIRECTORY, EMBEDDER_PROVIDER, EMBEDDER_BASE_URL, EMBEDDER_API_KEY, RERANKER_BASE_URLค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"architecture-pattern": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GENERATOR_API_KEY",
"-e",
"GENERATOR_PROVIDER",
"-e",
"GENERATOR_MODEL",
"-e",
"GENERATOR_BASE_URL",
"-e",
"PATTERN_DIRECTORY",
"-e",
"EMBEDDER_PROVIDER",
"-e",
"EMBEDDER_BASE_URL",
"-e",
"EMBEDDER_API_KEY",
"-e",
"RERANKER_BASE_URL",
"docker.io/olkowa/architecture-pattern-mcp:1.1.3",
"--transport",
"stdio"
],
"env": {
"GENERATOR_API_KEY": "ใส่ค่าของคุณ",
"GENERATOR_PROVIDER": "ใส่ค่าของคุณ",
"GENERATOR_MODEL": "ใส่ค่าของคุณ",
"GENERATOR_BASE_URL": "ใส่ค่าของคุณ",
"PATTERN_DIRECTORY": "ใส่ค่าของคุณ",
"EMBEDDER_PROVIDER": "ใส่ค่าของคุณ",
"EMBEDDER_BASE_URL": "ใส่ค่าของคุณ",
"EMBEDDER_API_KEY": "ใส่ค่าของคุณ",
"RERANKER_BASE_URL": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add architecture-pattern --env GENERATOR_API_KEY='ใส่ค่าของคุณ' --env GENERATOR_PROVIDER='ใส่ค่าของคุณ' --env GENERATOR_MODEL='ใส่ค่าของคุณ' --env GENERATOR_BASE_URL='ใส่ค่าของคุณ' --env PATTERN_DIRECTORY='ใส่ค่าของคุณ' --env EMBEDDER_PROVIDER='ใส่ค่าของคุณ' --env EMBEDDER_BASE_URL='ใส่ค่าของคุณ' --env EMBEDDER_API_KEY='ใส่ค่าของคุณ' --env RERANKER_BASE_URL='ใส่ค่าของคุณ' -- docker run -i --rm -e GENERATOR_API_KEY -e GENERATOR_PROVIDER -e GENERATOR_MODEL -e GENERATOR_BASE_URL -e PATTERN_DIRECTORY -e EMBEDDER_PROVIDER -e EMBEDDER_BASE_URL -e EMBEDDER_API_KEY -e RERANKER_BASE_URL docker.io/olkowa/architecture-pattern-mcp:1.1.3 --transport stdioเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"architecture-pattern": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GENERATOR_API_KEY",
"-e",
"GENERATOR_PROVIDER",
"-e",
"GENERATOR_MODEL",
"-e",
"GENERATOR_BASE_URL",
"-e",
"PATTERN_DIRECTORY",
"-e",
"EMBEDDER_PROVIDER",
"-e",
"EMBEDDER_BASE_URL",
"-e",
"EMBEDDER_API_KEY",
"-e",
"RERANKER_BASE_URL",
"docker.io/olkowa/architecture-pattern-mcp:1.1.3",
"--transport",
"stdio"
],
"env": {
"GENERATOR_API_KEY": "ใส่ค่าของคุณ",
"GENERATOR_PROVIDER": "ใส่ค่าของคุณ",
"GENERATOR_MODEL": "ใส่ค่าของคุณ",
"GENERATOR_BASE_URL": "ใส่ค่าของคุณ",
"PATTERN_DIRECTORY": "ใส่ค่าของคุณ",
"EMBEDDER_PROVIDER": "ใส่ค่าของคุณ",
"EMBEDDER_BASE_URL": "ใส่ค่าของคุณ",
"EMBEDDER_API_KEY": "ใส่ค่าของคุณ",
"RERANKER_BASE_URL": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"architecture-pattern": {
"type": "stdio",
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GENERATOR_API_KEY",
"-e",
"GENERATOR_PROVIDER",
"-e",
"GENERATOR_MODEL",
"-e",
"GENERATOR_BASE_URL",
"-e",
"PATTERN_DIRECTORY",
"-e",
"EMBEDDER_PROVIDER",
"-e",
"EMBEDDER_BASE_URL",
"-e",
"EMBEDDER_API_KEY",
"-e",
"RERANKER_BASE_URL",
"docker.io/olkowa/architecture-pattern-mcp:1.1.3",
"--transport",
"stdio"
],
"env": {
"GENERATOR_API_KEY": "ใส่ค่าของคุณ",
"GENERATOR_PROVIDER": "ใส่ค่าของคุณ",
"GENERATOR_MODEL": "ใส่ค่าของคุณ",
"GENERATOR_BASE_URL": "ใส่ค่าของคุณ",
"PATTERN_DIRECTORY": "ใส่ค่าของคุณ",
"EMBEDDER_PROVIDER": "ใส่ค่าของคุณ",
"EMBEDDER_BASE_URL": "ใส่ค่าของคุณ",
"EMBEDDER_API_KEY": "ใส่ค่าของคุณ",
"RERANKER_BASE_URL": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
GENERATOR_PROVIDER envGENERATOR_MODEL envGENERATOR_BASE_URL envPATTERN_DIRECTORY envEMBEDDER_PROVIDER envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub olk ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: GENERATOR_API_KEY, EMBEDDER_BASE_URL, EMBEDDER_API_KEY, RERANKER_BASE_URL
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.1.5) เข้า registry 28 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Docker ในเครื่องด้วย
ในหมวดเดียวกันมี Figma Context MCP, Claude Real Video, Figma MCP Server
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
server ทางการของ Figma ส่งข้อมูลงานออกแบบให้ AI อ่าน เพื่อเปลี่ยนแบบเป็นโค้ดหรืออธิบายแบบได้ตรงขึ้น ต่อผ่านคลาวด์ของ Figma
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
An MCP (Model Context Protocol) server that provides architecture design expertise to AI coding agents. Given a requirements string and a domain, it analyses the problem, selects matching architecture patterns (from 128 built-in patterns), generates a concrete architecture design with components, relationships, API contracts, data models, and event contracts, and evaluates it against quality attributes (maintainability, scalability, reliability, security, performance).
# 1. Clone
git clone https://github.com/olk/architecture-pattern-mcp.git && cd architecture-pattern-mcp
export GENERATOR_API_KEY=your_key_here
docker compose -f docker/docker-compose.yml up --build
make client-analyze
Server starts on streamable-http at http://localhost:8820/mcp (dev compose host port; systemd uses 8810). Then connect your agent below.
To have an AI coding agent install the Docker stack from prebuilt images (no local build), point it at [INSTALL.md](INSTALL.md) — the non-interactive agent runbook (copy-paste commands, expected outputs, verification probes).
Clone this repo, then follow INSTALL.md Path A (compose stack, port 8820).
My generator API key is: sk-...
Pick one path in INSTALL.md:
:8820): evaluating / developing, no sudo needed. Own TEI sidecar copies.:8810): persistent host service, starts at boot, needs sudo. Uses the shared pattern-tei-infra TEI stack.The agent needs a repo clone, Docker ≥ v2.20 with group membership, ~5 GB free, a MINIMAXAI_API_KEY (or another provider per INSTALL.md#switching-the-generator-llm), and linux/amd64 (on arm64 it builds locally via make docker-build-all). After install, continue with Connect Your Agent below.
# Install (one-time)
uv pip install -e .
claude mcp add architecture-pattern \ -e GENERATOR_API_KEY=your_key \ -e GENERATOR_PROVIDER=openai \ -- architecture-pattern-mcp --transport stdio
Or add to your project for the whole team:
claude mcp add --scope project architecture-pattern \
-e GENERATOR_API_KEY=your_key \ -- architecture-pattern-mcp --transport stdio
OpenCode uses HTTP transport. Start the server first, then configure opencode:
# Terminal 1: start the server
docker compose -f docker/docker-compose.yml up --build
uv run python -m src.main --port 8050
{
"$schema": "https://opencode.ai/config.json", "mcp": { "architecture-pattern": { "type": "remote", "url": "http://localhost:8820/mcp" } } }
Note:
GENERATOR_API_KEYis read from the server's config file (~/.config/architecture-pattern-mcp/config.json), not from opencode's environment.
# Install (one-time)
uv pip install -e .
Add to ~/.codex/config.toml:
[mcp_servers.architecture-pattern]
command = "architecture-pattern-mcp" args = ["--transport", "stdio"]
[mcp_servers.architecture-pattern.env] GENERATOR_API_KEY = "your_key" GENERATOR_PROVIDER = "openai"
Or via CLI:
codex mcp add architecture-pattern \
-e GENERATOR_API_KEY=your_key \ -- architecture-pattern-mcp --transport stdio
The SKILL in skills/architecture-pattern-mcp/ is written for Oh My Pi (OMP), where this server's tools are reached as xd://mcp__architecture_pattern_* devices and every MCP request is bounded by a deadline (OMP_MCP_TIMEOUT_MS → per-server timeout → 30 s). It teaches the agent which entry point fits that deadline, how to read the results, and the full workflow recipes.
skills/architecture-pattern-mcp/
├── SKILL.md # OMP constraints, entry-point decision guide, device quick reference └── references/ ├── tools.md # 11 tool signatures, output schemas, error codes, design-dict shape └── workflows.md # 5 recipes, result interpretation, OMP troubleshooting
Install for OMP — copy the skill directory into the user skills root, or point skills.customDirectories at this repository's skills/ directory in OMP's config:
cp -r skills/architecture-pattern-mcp ~/.omp/agent/skills/
The skill then tells the agent:
design_architecture only after raising the server's timeout (analyze_architecture alone measured 66 s, evaluate_architecture 197 s)requirements, domain, and style as separate structured argumentsfinal_quality_score, attempts > 1, and evaluation.recommendationsread mcp://pattern://… is ambiguous while the sibling agent-pattern server is connected, so the tool route (get_architecture_pattern) is authoritativeThe tool schemas, error codes and design-dict shape in references/ are client-agnostic; only the deadline/device guidance is OMP-specific.
All tools accept requirements (free text) and domain (e.g. data-processing, microservices, e-commerce) as arguments. The examples below show the exact tool call shape so you can use them in any MCP client or API consumer.
In Claude Code (or any MCP client), paste the natural-language instruction:
Build a scalable ETL pipeline for IoT sensor data: ingest 10k events/sec
from Kafka, parse JSON, enrich with geolocation from Redis, write to InfluxDB and S3.
Your agent calls design_architecture internally. The server returns a full architecture design: components (Kafka source, JSON parser filter, geolocation enricher, InfluxDB sink, S3 sink), quality attribute scores (scalability: 9.1, maintainability: 8.2, …), and specific recommendations.
That is the design path: the server's LLM generates the design artifact for you, which is why a call takes minutes. If your agent writes the code itself and only needs the pattern expertise, call analyze_architecture instead — it returns the recommended style, selected patterns with scores, requirement weights, quality metrics and matched domains without generating a design. Two measured facts from the committed benchmark corpus: generate + evaluate are ~92 % of a design call's wall clock (benchmarks/base-noreasoning/), and the two paths agree on the style in all 31 completed records (15 base + 16 no-reasoning; the one remaining base record is a design call that failed with a malformed-JSON validation error and produced no design) — a design call buys the artifact, not a better pattern choice.
Or call tools directly from your agent:
Call analyze_architecture with:
requirements: "Real-time data processing pipeline for 10k events/sec IoT sensor data" domain: "data-processing"
Call generate_architecture with: requirements: "ETL pipeline: Kafka → JSON parse → Redis geo-enrich → InfluxDB + S3" domain: "data-processing" selected_patterns: ["pipe-and-filter"]
Call evaluate_architecture with: architecture: { ... paste a design dict here ... } criteria: "scalability, reliability"
Call list_architecture_patterns() # all 128 patterns Call list_architecture_patterns(category="messaging") # filter by category Call get_architecture_pattern(name="event-driven") # full pattern JSON
submit_architecture_design_job + get_architecture_design_statusONLY for clients with short request timeouts (Cursor, Claude Desktop, TS-SDK). The default is design_architecture with heartbeat defence. submit_architecture_design_job returns a job_id immediately; poll get_architecture_design_status until done:
# Step 1: start the job
Call submit_architecture_design_job with: requirements: "ETL pipeline for IoT: Kafka → JSON → Redis geo-enrich → InfluxDB + S3" domain: "data-processing"
Call get_architecture_design_status with: job_id: " "
In Python (via the MCP HTTP API directly — see examples/architecture_client_async.py):
import asyncio, aiohttp
SERVER = "http://localhost:8820/mcp" POLL_EVERY = 15 # seconds
async def main(): async with aiohttp.ClientSession() as sess:
async with sess.post(SERVER, json={ "jsonrpc": "2.0", "method": "tools/call", "params": { "name": "submit_architecture_design_job", "arguments": { "requirements": "ETL pipeline for IoT: Kafka → JSON → Redis → InfluxDB + S3", "domain": "data-processing", } }, "id": 1 }) as resp: job_id = (await resp.json())"result"0["job_id"]
print(f"Job started: {job_id}")
while True: await asyncio.sleep(POLL_EVERY) async with sess.post(SERVER, json={ "jsonrpc": "2.0", "method": "tools/call", "params": {"name": "get_architecture_design_status", "arguments": {"job_id": job_id}}, "id": 2 }) as resp: result = (await resp.json())"result"0 print(f" status={result['status']}") if result["status"] in ("completed", "failed", "cancelled"): break
print(result.get("result", result)) # full design when completed
See examples/architecture_client_async.py for the complete runnable example. Run it with:
docker compose -f docker/docker-compose.yml up --build # Terminalตัดมาแค่ช่วงต้น อ่านต่อใน repo