Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Music visualiser (visualizer): write live GLSL music visualisations, shared as links that play.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://vibresia.com/mcpพิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http music-visualizer https://vibresia.com/mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"music-visualizer": {
"url": "https://vibresia.com/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"music-visualizer": {
"type": "http",
"url": "https://vibresia.com/mcp"
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://vibresia.com/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 6 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน
create_vibescapeUse this when somebody wants a music visualiser or music visualisation (visualizer, visualization, musicviz, audio-reactive visuals): it writes a GLSL vibescape and returns a live link to it. The link draws and animates the vibescape in a browser, so it works for anybody who open
share_vibescapeUse this when a vibescape should be listed in the public gallery, where anybody can find it at vibresia.com/vibescapes. A vibescape is created unlisted; this is the separate act of putting it in front of people. The name and the author go with it, so make sure they are right befo
list_vibescapesUse this when somebody wants to see music visualisations other people have made, or wants something to look at before writing their own. Returns the public gallery: each vibescape's name, who made it, and a link that plays it.
get_vibescapeUse this to read somebody's vibescape, so it can be adapted or understood. Needs the id — the last part of the link.
lint_vibescapeUse this after writing a vibescape, before sharing it. It reads the code and says what would make it look wrong — most often that it never reads the music, so the picture is the same in silence as at full volume. Cheap to call and it catches most of what goes wrong.
vibescape_referenceUse this before writing a vibescape: it lists every uniform the music drives and every helper the language has, with what each is for. Writing a vibescape without it usually takes two attempts instead of one.
get_paletteUse this to find out how a vibescape's colours are graded. Vibresia puts every vibescape through one of five palettes, so bright colours come out muted unless the shader accounts for it.
get_appUse this when somebody wants the real thing: the app listens to the system audio directly, with no browser, and checks for updates for you. It gives the download link and the one-line install command for macOS.
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน vibresia.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตอบกลับใน 62 ms (HTTP 200)
ไม่ต้องล็อกอิน
อ่านคำอธิบายเครื่องมือ 8 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.1.0) เข้า registry 5 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา
ในหมวดเดียวกันมี 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
A free macOS app for visual worlds that move with your music. It listens to whatever your Mac is playing and turns it into live scenes, from neon waveforms to a pixel-art band that walks on stage when it hears their instrument — and you can write a world of your own, or have an AI assistant write it for you.
Website & install: https://vibresia.com
curl -fsSL https://vibresia.com/install.sh | bash
Or ask an AI assistant: *"install vibresia from https://vibresia.com"*.
If you enjoy it, you can buy me a coffee.
Found a bug or have an idea? File an issue. Pull requests are very welcome, especially new vibescapes: see CONTRIBUTING.md.
| Path | What |
|---|---|
VisualiserMac/ | The macOS app (Swift, SwiftUI, OpenGL). See its README. |
site/ | The landing page, installer (install.sh) and AI install instructions (install.md, llms.txt). |
site/analytics.js | Anonymous page-view / click tracking for the landing page. |
site/github.js | Changelog and open issues, fetched from the GitHub API when scrolled into view. |
worker/index.js | Cloudflare Worker: serves ./site and handles /download (redirect + Discord notification). |
worker/share.test.js | Tests for the shared-vibescape endpoints. |
migrations/ | D1 schema — one table, one row per shared vibescape. |
site/sitemap.xml, site/robots.txt | What Google is pointed at. One URL; the plain-text agent pages are deliberately left crawlable but unlisted. |
site/_headers, site/_redirects | Cloudflare response headers (caching, security) and canonical-path redirects. |
scripts/check-vibescapes.sh | Fails if a vibescape is missing from the landing page, or the version in its structured data is stale. |
scripts/check-posthog.sh | Fails if the site and the app report to different PostHog projects. |
scripts/check-no-webhook-leak.sh | Fails if a Discord webhook URL, a notify token or a share token is anywhere in the tree. |
scripts/check-plugin-manifests.py | Fails if the four manifests that describe the public MCP server disagree on the version or the endpoint, or if the Cursor plugin has lost a field its marketplace checklist asks for. |
server.json, mcp.json, .cursor-plugin/, gemini-extension.json, glama.json | The manifests that describe the public MCP server to registries, plugins and clients. See the manifests. |
wrangler.toml | Deploys the Worker (and site/ through it) to Cloudflare. |
cd VisualiserMac
./build-app.sh debug # build/Vibresia.app open build/Vibresia.app
A vibescape is a fragment shader — one function, vec3 render(vec2 p, float t) — and the app supplies the uniforms, the helpers and everything else.
Vibresia ships a local MCP server, so an AI agent can write a vibescape, check it compiles, look at the picture and try again without anybody copying code by hand:
claude mcp add vibresia -- "/Applications/Vibresia.app/Contents/MacOS/Vibresia" --mcp
It's the same binary run with --mcp, speaking JSON-RPC over stdin — no window, no port, no analytics. It reads and writes the same files the app does, so a vibescape an agent writes shows up in the app within a second. See VisualiserMac/README.md for the tools it offers.
The build version is the date it was built, so there's no number to bump:
MAJOR.MINOR.PATCH
MAJOR counts years since 2026, MINOR is the month, and PATCH is the day of the month followed by the build number of that day — 0.10.201 is the 20th of October 2026, the first build of that day.
VisualiserMac/version.sh computes it, and build-app.sh bakes it into the app. release.sh records it in VisualiserMac/VERSION and the landing page before tagging the release, so the app, the site and the git tag always agree.
site/analytics.js is a ~180-line PostHog client — no SDK, no session replay, no cookies — reporting into the same PostHog project as the app, separated by a surface property (web vs mac_app).
Events: $pageview, demo_played, vibescape_card_viewed (which vibescape cards got scrolled to), download_clicked, install_command_copied (ask-ai or curl — the interesting split, since they are different audiences), coffee_clicked (by placement) and outbound_clicked.
To see them without touching production, point the meta tag at a local sink:
python3 - <<'PY'
p='site/index.html'; s=open(p).read() open(p,'w').write(s.replace('https://us.i.posthog.com">','http://127.0.0.1:8099">')) PY (cd site && python3 -m http.server 8098) # then open http://127.0.0.1:8098
The footer has a one-click opt-out, and Do Not Track is honoured: both stop the page sending anything at all.
Every download goes through /download on the Worker, which 302s to the latest GitHub release and posts an embed to Discord. Server-side rather than from the page, for two reasons: a webhook URL in the HTML would be public, and a click that never completes isn't a download.
The embed carries source, city/country (from Cloudflare's geo), referrer, browser, and whether that browser has downloaded before.
npx wrangler secret put DISCORD_WEBHOOK_URL # once; the webhook URL in Discord
npx wrangler deploy curl https://vibresia.com/api/health # {"discord":"configured"}
Errors from the app. The app can't hold the webhook (it's in the app bundle, where anyone can read it), so it posts to POST /api/notify on this site and the Worker forwards it. Set the shared token as a second secret, then bake the same value into the app:
npx wrangler secret put NOTIFY_TOKEN # any random string
REPORT_TOKEN= ./build-app.sh release
Three things arrive: audio_error (the audio source failed or was cut off — the failure a stack trace will never show you), source_failure and app_crash (with the top frames). A denied permission prompt is a choice, not a fault, so it isn't reported.
The two audio reports are not behind the in-app toggle: the user asked for that source explicitly, and a dead input is a bug nothing else will show. app_crash is: it goes out with the crash upload to PostHog, which waits for "Share anonymous usage" to be on, so switching that off stops both. What's sent is app state — vibescape, genre, error text — never audio or track names. Errors get their own cooldown (one a minute, 60/hour) so a broken install can't flood the channel, and DISCORD_ERRORS_ENABLED = "false" turns them off without touching download alerts.
Locally, .dev.vars (gitignored) points the webhook at a stub:
npx wrangler dev --port 8787
curl -s 'http://127.0.0.1:8787/download?src=hero&seen=0' -A 'Mozilla/5.0' npm test # 13 tests, no network
Notes:
scripts/check-no-webhook-leak.sh fails if either appears in the tree — delphina had the same problem and it ended up baked into dozens of release tags. If it ever leaks, recreate the webhook in Discord and put the new one back with wrangler secret put.ctx.waitUntil with a timeout and one retry — so Discord being down can't slow down or break a download.DISCORD_NOTIFICATIONS_ENABLED to "false" in wrangler.toml and redeploying; the site keeps working either way.install.sh still downloads straight from GitHub, so script installs don't produce notifications.A custom vibescape — one somebody wrote — used to travel as its payload in the link: vibresia.com/share/?d= . That works with no backend at all, which is why it was built that way. But the link was around 370 characters, and the server answered it with a 307 to add the trailing slash, which WhatsApp's link-preview crawler did not follow — so the preview was blank and the link looked broken in a chat.
Now the payload is stored and the link is short:
POST /api/share {payload, name, author, image, key} → {"url": "https://vibresia.com/s/k3f9x2"}
GET /s/k3f9x2 the share page, with the payload inlined GET /og/k3f9x2.jpg a picture of this vibescape
key column has a partial unique index on it, so two devices sharing at once land on one row.VisualiserMac/Sources/VibresiaBrand.vibresia.com/vibescapes lists the built-in vibescapes and the ones people have shared, in one list, newest first.
Sharing a vibescape has always made a link anybody can open. The gallery is different: it lists them, so anything in it is findable by anybody at all — and the name and the author on it are public. The share sheet says so, and has a tickbox, on by default.
POST /api/share takes public, and the share sheet has a tickbox next to the name.is_public column and serves the list at /vibescapes (the page) and /api/gallery (the same thing as JSON). The cards are built on the server, so the page works with no JavaScript and a crawler sees the list.scripts/generate-share-pages.py works that date out and writes it into the share manifest. Their cards use the clean still, the same as everybody else's, rather than the framed share graphic.vibresia.com/admin — unlinked, and not in any sitemap. It asks for a token and then lists every share, the ones in the gallery and the ones hidden, with three things you can do to each:
The token is a Worker secret called ADMIN_TOKEN, an
ตัดมาแค่ช่วงต้น อ่านต่อใน repo