Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
MCP server for architecture and system design. Store and manage project architecture locally.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"architector": {
"command": "npx",
"args": [
"-y",
"mcp-architector"
]
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add architector -- npx -y mcp-architectorวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"architector": {
"command": "npx",
"args": [
"-y",
"mcp-architector"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"architector": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-architector"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub theSharque ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.11.1) เข้า registry 41 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Model Context Protocol (MCP) server for architecture and system design
Local-first MCP server that stores and manages project architecture information. All data is stored locally in ~/.mcp-architector for maximum privacy and confidentiality.
📦 Install: npm install -g mcp-architector or use via npx 🌐 npm: https://www.npmjs.com/package/mcp-architector 🔗 GitHub: https://github.com/theSharque/mcp-architect
Add the server to your MCP config. Example for claude_desktop_config.json:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json Linux: ~/.config/Claude/claude_desktop_config.json
{
"mcpServers": { "architector": { "command": "npx", "args": ["-y", "mcp-architector"], "env": { "MCP_PROJECT_ID": "${workspaceFolder}" } } } }
For Cursor IDE: Settings → Features → Model Context Protocol → Edit Config, then add the same block inside mcpServers. See the Integration section for more options.
For Cursor IDE and Cursor Cloud Agents, use a phased onboarding rule so the agent does not dump the whole repo into context in one shot.
.cursor/rules/architector-onboarding.mdc into your project (the repo you are documenting): mkdir -p /path/to/your-app/.cursor/rules
cp /path/to/mcp-architector/.cursor/rules/architector-onboarding.mdc /path/to/your-app/.cursor/rules/
list-projects and pass projectId on every write — do not rely on omitting it.The rule is `alwaysApply: false` — Cursor attaches it when the task matches architecture import/onboarding. It enforces: structure → one module per step → validate after each step → compact tools only.
If you develop this server repo, keep the same file here so contributors and Cloud Agents follow the same workflow when updating ~/.mcp-architector/_qs_mcp-architector/.
Store and manage project architecture, modules, scripts, data flow, and usage examples - all locally with complete privacy.
~/.mcp-architector (privacy-first)~/.mcp-architector/
└── {projectId}/ ├── architecture.json # Modules + dataFlow (vertical structure) ├── modules/ │ ├── {moduleId}.json │ └── ... ├── entries/ │ ├── index.json # Catalog (no duplicate bodies) │ └── {entryId}.json # Canonical facts (API, domain, flows, …) ├── slices/ │ └── {sliceId}.json # Custom filters only (no items)
| Layer | Purpose | Tools |
|---|---|---|
| Modules | Vertical structure: components, dependencies, dataFlow | set-project-architecture, set-module-details, set-module-data-flow, rebuild-data-flow, validate-architecture |
| Entries | Single source of truth for horizontal facts (one fact = one file) | set-entry, set-entries, get-entry, list-entries |
| Slices | Read-only views over entries (built-in or custom filters) | list-slices, get-slice |
Anti-patterns (no duplication): Do not copy module.description into entry.summary. Link with refs.moduleName. Slices never store item copies—only filters in slices/*.json.
Do not edit `~/.mcp-architector` directly — always use MCP tools so timestamps, merge semantics, and dataFlow inverse sync stay consistent.
list-projects — find projectId for this workspace (query by folder name). Pass it to every other tool. Never omit. Never use default-project.get-project-architecture / set-project-architecture.set-module-details with files + `facts[]` (endpoints, entities, glossary) in the same call, or set-entries / set-entry with refs.moduleName.set-module-data-flow.rebuild-data-flow.validate (summary + issues[]; no full project load).list-slices → get-slice with format=compact or table; use offset when hasMore is true.search-entries → get-entry for full payload.refactor-architecture: scan → dryRun preview → apply with confirm=true.| Scenario | Tool |
|---|---|
| Update one module + its APIs/facts | set-module-details with facts[] |
| Bulk facts for a domain | set-entries with moduleName |
| Patch dataFlow for one module | set-module-data-flow |
| Rebuild all module edges | rebuild-data-flow |
| Diagnose graph + empty slices | validate (or validate-architecture) |
| Catalog JSON corrupt (extra data after JSON) | fix-data |
| Sync paths/names after refactor | refactor-architecture (dryRun, then confirm) |
| Index out of sync | rebuild-entry-index |
| Create project from scratch | set-project-architecture with replaceModules: true |
| Onboard a fresh git clone (phased) | Copy .cursor/rules/architector-onboarding.mdc → ask agent to onboard phase by phase |
Full project picture: modules alone do not populate slices — without http-endpoint (and other kinds) entries, slice api stays empty. New module → add facts or entries in the same step.
Example: set-module-details with facts: [{ kind: "http-endpoint", title: "POST /orders", ... }], then get-slice sliceId=api format=table.
# No installation needed - use directly in Cursor/Claude Desktop
git clone https://github.com/theSharque/mcp-architect.git
cd mcp-architect
npm install
npm run build
Run with hot reload:
npm run dev
Start the server:
npm start
Debug and test your server with the MCP Inspector:
npm run inspector
Installs from npm registry automatically:
{
"mcpServers": { "architector": { "command": "npx", "args": ["-y", "mcp-architector"], "env": { "MCP_PROJECT_ID": "${workspaceFolder}" } } } }
For local development with live changes:
{
"mcpServers": { "architector": { "command": "mcp-architector", "env": { "MCP_PROJECT_ID": "${workspaceFolder}" } } } }
Requires: cd /path/to/mcp-architector && npm link -g
{
"mcpServers": { "architector": { "command": "node", "args": ["/path/to/mcp-architector/dist/index.js"], "env": { "MCP_PROJECT_ID": "${workspaceFolder}" } } } }
Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
{
"mcpServers": { "architector": { "command": "npx", "args": ["-y", "mcp-architector"], "env": { "MCP_PROJECT_ID": "${workspaceFolder}" } } } }
Edit .continue/config.json:
{
"mcpServers": { "architector": { "command": "npx", "args": ["-y", "mcp-architector"], "env": { "MCP_PROJECT_ID": "${workspaceFolder}" } } } }
projectId is required on every tool except list-projects. There is no default dump project.
query = workspace folder name)set-project-architecture using a stable id from the workspace path (e.g. _qs_my-app)MCP_PROJECT_ID is only a hint (isCurrent / suggestedProjectId). It is not used as a silent write target. default-project and unsubstituted ${workspaceFolder} ids are forbidden.
Creates or updates the overall architecture for a project. By default merges modules and dataFlow by name; omit dataFlow to preserve existing flow. dependsOn is canonical; providesTo is recomputed on save.
Input:
projectId (required): Project ID from list-projects. Never omit. default-project is forbidden.description: Overall project descriptionmodules: Array of module objects with:name: Module namedescription: Brief description of the moduleinputs (optional): What this module requires to workoutputs (optional): What this module produces or generatesdataFlow (optional): Object describing data flow between modules (omit to keep existing):dependsOn (optional): Array of module names this module depends onprovidesTo (optional): Derived on save from all dependsOn edgesdataTransformation (optional): How data is transformed between modulesreplaceModules (optional): Replace entire modules list (default false = merge by name)replaceDataFlow (optional): Replace entire dataFlow (default false = merge by module name)Output:
Retrieves the overall architecture of the project.
Input:
projectId (required): Project ID from list-projects. Never omit. default-project is forbidden.Output:
Lists all projects in local storage (~/.mcp-architector). Call this first. Match the current workspace by folder name, then pass projectId to every other tool.
Input:
query (optional): Filter by substring in projectId or description (case-insensitive)Output:
projects[]: projectId, description, moduleCount, updatedAt, isCurrent (hint from MCP_PROJECT_ID), forbidden (default-project and unsubstituted workspaceFolder dumps)suggestedProjectId: current MCP_PROJECT_ID when it is a valid id, else nullreminder: always pass projectId; never use default-project| Tool | Purpose |
|---|---|
set-entry | Upsert one fact; response may include reminder if modules missing or unlinked |
set-entries | Bulk upsert (max 200); optional moduleName sets refs.moduleName on all |
get-entry | Full entry by id |
delete-entry | Remove entry |
list-entries | Catalog without payload; filter by kind, tags, query |
search-entries | Compact text search with snippet, slices, moduleName, pagination; filters: moduleName, kind, tags |
| list-slices | Built-in + custom slices with e
ตัดมาแค่ช่วงต้น อ่านต่อใน repo