Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Design kits, brand naming, and domain research for coding agents.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
IDENTITYFORGE_API_KEYค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"identityforge": {
"command": "npx",
"args": [
"-y",
"identityforge",
"mcp"
],
"env": {
"IDENTITYFORGE_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add identityforge --env IDENTITYFORGE_API_KEY='ใส่ค่าของคุณ' -- npx -y identityforge mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"identityforge": {
"command": "npx",
"args": [
"-y",
"identityforge",
"mcp"
],
"env": {
"IDENTITYFORGE_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"identityforge": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"identityforge",
"mcp"
],
"env": {
"IDENTITYFORGE_API_KEY": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน identityforge.io แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: IDENTITYFORGE_API_KEY
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.4.6) เข้า registry 3 เดือนที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Identity Forge MCP
Design systems, brand naming, and domain research for coding agents.
For people · For agents · MCP tools · CLI reference · Docs
Free to use. 69 of 79 design kits are free, with all 6 export formats, the CLI, the MCP server, and the API. No account required. Pro unlocks 10 additional kits, 1,000 AI generations/month, and advanced features.
Identity Forge gives a coding agent a complete visual system before it starts building. Choose a design kit yourself, or let the agent rank the catalog against your product and the mood you want. Each kit includes typography, semantic color tokens, layout, motifs, dos and don'ts, and a DESIGN.md the agent can build from.
The agent can export the kit as CSS, Tailwind v3 or v4, shadcn registry data, DTCG tokens, or JSON, then apply it with conflict protection. Brand naming, domain research, and shareable client projects live in the same workflow.
Public Free kits work without an account. Browse the design kits or read how the agent flow works before installing anything.
The three-minute lifecycle film follows a design system from the first choice through product imagery, an ecommerce rebuild, a later brand update, an older-site rebuild, and team review. The Aubade storefront and Shiftly rebuild are complete one-shot agent builds from real Identity Forge design systems. The Commonkeep review uses synthetic showcase data in the real review experience.
https://github.com/user-attachments/assets/fc3cdba2-4876-46e5-a92a-09ce6d7071ff
Download the full-resolution 1080p WebM.
Install the local MCP server into the client you use:
npx --yes identityforge@latest install --client claude-code # Claude Code
npx --yes identityforge@latest install --client cursor # Cursor npx --yes identityforge@latest install --client vscode # VS Code / Copilot npx --yes identityforge@latest install --client codex # Codex
Also supported: gemini, opencode, pi. Every client runs the same local stdio server, and install merges into your existing config rather than replacing it. Config paths for all seven are in Install into an agent.
Public Free kits work immediately, without a key. Tell your agent:
Use Identity Forge to pick a theme that fits this product, apply it, and follow the DESIGN.md.
Sign in for persistent projects, saved work, authenticated quota, or Pro access:
npx --yes identityforge@latest login
No account yet? In the browser, sign up, complete the security check, select Send verification email, and open its link. Then select Confirm email and continue, approve the resumed authorization, and the CLI receives the key automatically.
Every use-case lane has two checks. First, the kit's authored audience or bestFor must name that kind of product. Then concrete token measurements such as text contrast, chart-series distinctness, and information density rank the eligible kits. Visual tags help search but do not establish product fit. A high technical score cannot put an unrelated kit into a lane. The per-lane prose justification is switched off catalogue-wide pending re-enrichment, so a score arrives without a sentence explaining it.
list_themes({ use: "data-dashboard" }) returns kits authored for dashboards, ordered by their measured dashboard fit.list_themes({ q: "calm fintech dashboard" }) runs a synonym-aware ranked search across moods, industries, and use cases.search_themes returns the whole catalog unranked so the agent can weigh a subtle brief itself.Use the lane to shortlist and the order to compare. Do not turn the score into an explanation: it ranks technical fit after authored intent, but does not say why the kit suits a particular brief.
For the data lanes there is a better answer than the score. Every kit summary carries a charts block measured on the mode the kit ships in: minDeltaE and cvdMinDeltaE (the closest pair of series colors, plain and under colorblind simulation), distinct, hueFamilies, severityHeadroom (how close any series comes to the destructive, warning and success roles — 0 means a category color IS a status color), sequentialReady, and designed, which is false when the kit defines no chart slots and the five were cycled from its brand roles. Those are measurements, so unlike the fitness score they can be stated to a user as the reason for a recommendation.
Use-case lanes: data-dashboard, admin-internal-tool, saas-marketing, landing-page, ecommerce-store, portfolio, editorial-blog, docs-knowledge-base, mobile-app, business-services, community-social, ai-agent-chat.
The same discovery runs the kit gallery and the HTTP API (GET /api/v1/kits?use=…&q=…, see llms.txt).
install --client writes the MCP server config for that agent, merging into any existing config:
| Client | --client | Config file |
|---|---|---|
| Claude Code | claude-code | .mcp.json |
| Cursor | cursor | .cursor/mcp.json |
| Codex | codex | ~/.codex/config.toml |
| Gemini CLI | gemini | .gemini/settings.json |
| VS Code / Copilot | vscode | .vscode/mcp.json |
| opencode | opencode | opencode.json |
| Pi | pi | .pi/agent/mcp.json |
All of them run the same local stdio server via npx -y identityforge@latest mcp. After installation, identityforge doctor --client checks that the client points at the rolling package and initializes the package's MCP server without calling the Identity Forge API or spending quota.
The repository also bundles the MCP server with an Agent Skill that tells the agent when to use Identity Forge, how free and authenticated access differ, and how to guide a human through Send verification email before the pending browser authorization resumes.
Claude Code:
claude plugin marketplace add KasayoDotCom/identityforge-mcp
claude plugin install identity-forge@identity-forge
GitHub Copilot CLI:
copilot plugin marketplace add KasayoDotCom/identityforge-mcp
copilot plugin install identity-forge@identity-forge
Codex and other Agent Skills-compatible clients:
npx skills add KasayoDotCom/identityforge-mcp
Cursor metadata is included for directory distribution. Until it is listed there, use the install --client cursor command above to connect the same MCP server.
Once connected, your agent gets 63 tools. Browsing free kits needs no key; scopes are noted where they apply.
list_themes: browse the catalog as compact summaries. Rank by use-case lane with use, run ranked search with q, page with offset, sort by featured, popular, recent, name, or fit.search_themes: return the whole catalog unranked, for briefs too subtle to rank against a lane.similar_themes: given a kit slug, find neighbours by palette, tags, and audience.match_palette: given existing brand colors, rank kits by perceptual color distance.A kit already names its heading, body, and mono faces. These two answer the cases where it does not.
search_fonts: browse the Google Fonts catalog by name or category, or pass like with a family you already have to find faces that resemble it. Metadata only, and like reads no letterform, so confirm the look before promising it.suggest_font_pairings: the curated heading/body/mono table, or what goes beside one family the user is committed to.get_design_md: fetch a kit's DESIGN.md, the full design brief.get_tokens: fetch tokens as dtcg, css, tailwind-v3, tailwind-v4, shadcn-registry, or json.apply_theme: write DESIGN.md, a tokens file, and an identityforge.json stamp into the project. It refuses rather than overwriting a file it did not write, see below.apply writes, and what it will not overwriteapply_theme (and identityforge apply) writes three files into the target directory:
Identity Forge requests carry one random reference that lasts only for the current CLI or MCP process. A local apply reports one bounded result: files written, artifacts already current, a safe conflict refusal, or the stage where it failed. The report contains counts and classifications, never local paths or error prose. Running as an MCP server, requests also carry the client name your editor or agent already sends in the MCP handshake (claude-code, cursor-vscode, codex), so usage can be attributed to a product rather than to nothing. None of this includes paths, filenames, prompts, file contents, repository names, exception text, or a persistent installation identifier. Set IDENTITYFORGE_TELEMETRY=0 to omit the process reference and local outcome reports; ordinary API requests still appear in server access logs.
| File | What it is |
|---|---|
DESIGN.md | the design brief the agent builds from |
.css / .json / .js | the tokens, named for the format you asked for |
identityforge.json | the stamp: which kit was applied, at which version, and a SHA-256 of every file written |
The stamp belongs to your repository, not to the kit. It records what this codebase was built against, which is a fact the server cannot know, so commit it. It is also what makes applying safe: before writing anything, apply compares what is on disk against the hashes in the stamp.
DESIGN.md you wrote yourself, or one that changed since it was written, is a conflict.On a conflict the default is to write nothing at all, name every conflicting file, and exit non-zero. Nothing is written until every file is planned, so a failed fetch cannot leave the directory half applied.
identityforge apply acid-signal-black --preview # plan only, writes nothing
identityforge apply acid-signal-black # refuses if anything conflicts identityforge apply acid-signal-black --force # overwrites, content is lost
--force is destructive and unrecoverable: the current content of the conflicting files is gone, and the report names each one. Preview first, show the person what would change, and let them decide.
{
"stampVersion": 1, // shape of this file, so a reader never has to guess "designMdContract"
ตัดมาแค่ช่วงต้น อ่านต่อใน repo