Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
MCP server for web inspection, design system extraction, and accessibility audits
쓰고 있는 AI 앱을 고른 다음 설정을 복사하세요.
검사 3/3 통과 · 내 컴퓨터에서 실행돼요 · ✓ 명령 확인 2026년 11월 13일
먼저: 어떤 AI를 쓰시나요?
쓰는 앱을 고르면 아래에 단계가 나옵니다.
Claude에 연결할 수 있지만 먼저 준비가 필요해요
먼저 컴퓨터에 Node.js를 설치하세요 (한 번만) · 컴퓨터용 Claude 앱(Windows 또는 Mac)에서만 되고 웹이나 모바일은 안 돼요
SettingsDeveloperEdit Config
{
"mcpServers": {
"tapsite": {
"command": "npx",
"args": [
"-y",
"tapsite"
]
}
}
}Tapsite을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Claude가 Tapsite을 쓰고 있다고 하거나 답에 Tapsite 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
ChatGPT는 아직 Tapsite에 연결할 수 없어요
Tapsite는 내 컴퓨터에 설치해서 쓰지만 ChatGPT는 웹에서 도는 서버만 연결할 수 있어요
A · Tapsite에 연결되는 앱 쓰기
B · 디자인, 이미지 및 오디오에서 ChatGPT에 연결되는 다른 서버
같은 분류에서 많이 쓰는 것 중 키 없이 주소만으로 연결되는 것을 골랐어요
Claude Code에 연결할 수 있지만 먼저 준비가 필요해요
먼저 컴퓨터에 Node.js를 설치하세요 (한 번만)
Mac: Command+스페이스를 누르고 Terminal 입력 · Windows: PowerShell 열기
claude mcp add --scope user tapsite -- npx -y tapsiteTapsite이 목록에 있고 연결됨으로 보이면 돼요
Tapsite을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Claude Code가 Tapsite을 쓰고 있다고 하거나 답에 Tapsite 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Anthropic 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Cursor에 연결할 수 있지만 먼저 준비가 필요해요
먼저 컴퓨터에 Node.js를 설치하세요 (한 번만)
Tapsite을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ Cursor가 Tapsite을 쓰고 있다고 하거나 답에 Tapsite 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 Cursor 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
VS Code에 연결할 수 있지만 먼저 준비가 필요해요
먼저 컴퓨터에 Node.js를 설치하세요 (한 번만)
Tapsite을 써서 나에게 무엇을 해 줄 수 있는지 알려 주고, 하나 해 봐✓ VS Code가 Tapsite을 쓰고 있다고 하거나 답에 Tapsite 도구 이름이 나오면 연결된 거예요
메뉴 이름은 2026년 11월 11일에 VS Code 도움말에서 확인 · 앱 버전에 따라 화면이 조금 다를 수 있어요
Windsurf, Zed, Gemini CLI 같은 다른 MCP 앱은 추가 방법이 저마다 달라요. 앱 목록에서 확인하세요
JSON 설정은 아래 “개발자용”에 있어요
Claude Code
claude mcp add --scope user tapsite -- npx -y tapsiteClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"tapsite": {
"command": "npx",
"args": [
"-y",
"tapsite"
]
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"tapsite": {
"command": "npx",
"args": [
"-y",
"tapsite"
]
}
}
}VS Code (mcp.json)
{
"servers": {
"tapsite": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"tapsite"
]
}
}
}이 설정은 제작자의 레지스트리 정보로 만들었어요. README와 다르면 README를 따르세요.
이 서버의 연결 방식과 각 앱의 공식 문서를 바탕으로 했어요. 2026년 11월 10일 확인.
내 컴퓨터에서 실행하는 앱
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
내 컴퓨터에서 실행돼요. 설치하면 AI 앱에 도구 목록이 나타나요.
누구나 볼 수 있는 정보를 점검했고, 코드는 읽지 않았어요. 해당하지 않는 항목은 개수에서 뺐어요. · 2026년 11월 13일 점검
레지스트리 이름이 GitHub 계정 mgriffen 기준으로 확인되었고, 이 계정이 저장소를 소유하고 있어요
코드 마지막 변경: 10일 전
MIT 사용
내 컴퓨터에서 실행되는 서버라 인터넷 엔드포인트가 없어요
내 컴퓨터에서 실행되며, 대신 로컬 설정을 사용해요
내 컴퓨터에서 실행돼요. 도구 목록은 인터넷 엔드포인트가 있는 서버에서만 읽을 수 있어요
질문하고, 팁을 나누고, 안 되는 점을 알려 주세요. "도움이 됨"이 많은 순서예요.
아직 리뷰가 없어요
레지스트리에서 이 카테고리의 활성 서버 전체와 비교했어요. 스타는 게시자가 저장소를 소유한 경우에만 세요.
해당하는 기본 점검 3개 중 3개를 통과했어요. 코드는 읽지 않았어요. 키나 토큰을 넣기 전에 서버가 어떤 권한을 요구하는지 확인하고, 꼭 필요한 권한만 있는 키를 쓰세요.
레지스트리에 필수 키가 나와 있지 않아요. 다만 처음 쓸 때 로그인을 요구하는 서버도 있어요.
내 컴퓨터에서 실행돼요. AI 앱이 필요할 때 실행하고, 데이터는 제작자의 서버를 거치지 않아요(서버 자체가 온라인 서비스를 호출하는 경우는 제외).
GitHub 저장소는 마지막으로 10일 전 변경됐고, 최신 버전(4.0.1)은 8개월 전 레지스트리에 올라왔어요.
Claude Desktop, Claude Code, Cursor, VS Code처럼 MCP를 지원하는 앱에서 쓸 수 있어요. 내 컴퓨터에 Node.js도 있어야 해요.
같은 카테고리에는: Figma Context MCP, AutoClip, Next AI Draw.io
같은 카테고리에서 다른 제작자가 만든 서버예요. 스타 순으로 정렬했어요.
카드 보는 법:↓ 주간 다운로드i★ GitHub 스타i세 기둥: 리뷰 · 점검 · 사용 정도i업데이트 = 최신 버전을 레지스트리에 공개한 날i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
제작자의 저장소에서 쓰인 그대로 가져왔어요. PopNx MCP가 검토하거나 보증한 내용이 아니에요. HTML, 이미지, 스크립트는 제거했어요. 링크를 누르면 이 사이트를 벗어나요.
The MCP server for web intelligence extraction. 55 tools that give AI agents the ability to *understand* websites — not just drive a browser, but extract structured intelligence about design systems, accessibility, performance, content, and more.
Other MCP browser tools let agents click buttons. tapsite lets agents extract a complete color palette, audit WCAG contrast ratios, diff two sites' design tokens, detect tech stacks, or pull structured data with custom CSS/XPath/regex selectors — all as structured JSON that agents can reason about.
55 Tools · 11 Categories · 4 Workflows · Multi-Format Export
Works with Claude, Cursor, Windsurf, and any MCP-compatible AI agent. LangChain/LangGraph integration coming soon.
[View the full docs site →](https://mgriffen.github.io/tapsite/)
# Quick start (no install required)
npx -y tapsite
npm install -g tapsite npx playwright install chromium npx playwright install-deps chromium
Add to your AI agent's MCP config:
{
"mcpServers": { "tapsite": { "command": "npx", "args": ["-y", "tapsite"] } } }
First run: Playwright will install Chromium automatically if not already present (~150MB one-time download).
Also available on the MCP Registry and Glama.
| Other browser MCPs | tapsite |
|---|---|
| Click buttons | Extract full design systems |
| Fill forms | Audit WCAG accessibility |
| Take screenshots | Diff sites over time |
| Read raw HTML | Detect tech stacks & APIs |
| Custom CSS / XPath / regex extraction | |
| Anti-bot resilience & proxy rotation |
Extract design systems — colors, fonts, spacing scales, breakpoints, components, shadows, icons, CSS variables, and contrast ratios from any website. Output as structured JSON or W3C design tokens.
Audit quality — accessibility scoring with WCAG contrast analysis, performance timing (Core Web Vitals), tech stack detection, dark mode support, and animation inventory.
Compare and track — diff two sites side by side, or track a single site over time with snapshot-based temporal diffs. Regressions and improvements are flagged automatically. Disk caching means crawls resume where they left off, and results are reused across sessions.
Work behind login walls — persistent browser sessions with full MFA support. A 3-tier anti-bot escalation system handles protected sites automatically — from stealth scripts to proxy rotation. Log in once manually, then extract across tool calls without re-authenticating. Credentials never enter the chat.
| Tool | Description |
|---|---|
tapsite_login_manual | Open headed browser for manual login + MFA |
tapsite_login_check | Verify authenticated session state |
tapsite_inspect | Navigate to URL and inspect the DOM (nav, headings, buttons, forms, tables, links) |
tapsite_screenshot | Take a screenshot of the current page |
tapsite_interact | Click or fill an indexed element from the last inspect |
tapsite_scroll | Scroll the page |
tapsite_run_js | Execute arbitrary JavaScript and return the result |
tapsite_close | Close the browser session |
| Tool | Description |
|---|---|
tapsite_extract_table | Extract a specific table as structured data |
tapsite_extract_links | Extract all links with text and href |
tapsite_extract_metadata | Extract page metadata (title, description, OG tags, etc.) |
tapsite_extract_content | Extract main readable content (article body, headings, paragraphs) |
tapsite_extract_forms | Extract all forms with fields, labels, and actions |
tapsite_extract_markdown | Extract page content as clean Markdown (raw, fit, or citations mode) with optional chunking |
| Tool | Description |
|---|---|
tapsite_extract_custom | Extract structured data using custom schemas (CSS selectors, XPath, or regex) |
tapsite_extract_schema_suggest | Analyze page DOM and auto-suggest extraction schemas |
| Tool | Description |
|---|---|
tapsite_extract_colors | Extract color palette (hex values + usage counts) |
tapsite_extract_fonts | Extract font families, sizes, weights |
tapsite_extract_css_vars | Extract CSS custom properties |
tapsite_extract_spacing | Extract spacing scale values |
tapsite_extract_shadows | Extract box-shadow and text-shadow patterns |
| Tool | Description |
|---|---|
tapsite_extract_images | Extract all images with src, alt, dimensions |
tapsite_download_images | Download images to local output directory |
tapsite_extract_svgs | Extract inline SVGs |
tapsite_extract_favicon | Extract favicon URLs and sizes |
| Tool | Description |
|---|---|
tapsite_extract_layout | Extract layout tree (inline text representation) |
tapsite_extract_components | Detect repeated UI components and patterns |
tapsite_extract_breakpoints | Extract responsive breakpoints from CSS media queries |
| Tool | Description |
|---|---|
tapsite_extract_a11y | Accessibility audit (ARIA, roles, contrast issues) |
tapsite_extract_contrast | Audit WCAG contrast ratios between text and background |
tapsite_extract_perf | Extract performance metrics (Core Web Vitals, resource sizes) |
tapsite_extract_security | Audit security headers (CSP, HSTS, SRI, permissions policy) |
tapsite_extract_darkmode | Detect dark mode support and extract dark palette |
tapsite_extract_pwa | Detect PWA support (manifest, service worker, installability) |
tapsite_extract_i18n | Extract internationalization signals (lang, hreflang, translations) |
| Tool | Description |
|---|---|
tapsite_extract_stack | Detect frontend framework, libraries, and tech stack |
tapsite_extract_animations | Extract CSS animations and transitions |
tapsite_extract_icons | Detect icon libraries and extract icon usage |
tapsite_extract_graphql | Detect GraphQL endpoints and introspect schemas |
tapsite_extract_aiml | Detect AI/ML integrations (models, embeddings, inference endpoints) |
tapsite_extract_canvas | Extract canvas and WebGL usage patterns |
tapsite_extract_wasm | Detect WebAssembly modules and usage |
tapsite_extract_web_components | Detect custom elements and shadow DOM usage |
tapsite_extract_third_party | Inventory third-party scripts, trackers, and services |
tapsite_extract_storage | Audit client-side storage (cookies, localStorage, sessionStorage, IndexedDB) |
| Tool | Description |
|---|---|
tapsite_capture_network | Capture network requests during a page load |
tapsite_extract_api_schema | Infer API schema from observed network traffic |
| Tool | Description |
|---|---|
tapsite_crawl | Crawl multiple pages from a start URL |
tapsite_diff_pages | Compare two URLs (cross-site) or track changes over time (temporal) using real extractors |
| Tool | Description |
|---|---|
tapsite_export | Export inspection results as JSON + Markdown + HTML report + CSV tables + screenshots |
tapsite_export_design_report | Full design system report: report.html (visual), design-tokens.json (W3C format), design-tokens.css (copy-pasteable :root vars) |
Resilient extraction engine. Parallel browser pooling for concurrent page extraction. Persistent disk caching — crawls resume where they left off and results are reused across sessions. 3-tier anti-bot escalation with automatic proxy rotation for protected sites.
| Tool | Description |
|---|---|
tapsite_teardown | Comprehensive competitive design teardown (all extractors) |
tapsite_audit | Pre-launch quality audit (a11y, contrast, perf, SEO, darkmode) |
tapsite_harvest | Inventory all site assets (images, SVGs, forms, fonts, links) |
tapsite_designsystem | Extract design tokens as W3C JSON and CSS variables |
Native LangChain and LangGraph integration is on the roadmap. When released, it will provide a dedicated Python wrapper with tool subsets and managed session lifecycle.
Prompt injection defense (hidden element filtering + output sanitization), HTTPS enforced, private IPs blocked, auth headers redacted. Credentials never enter the chat — log in manually with full MFA support.
Extractors skip hidden elements (display:none, visibility:hidden, opacity:0, zero-size, clip-hidden) to prevent invisible text injection. All output is scanned for prompt injection patterns — instruction overrides, role hijacking, exfiltration attempts, and tool manipulation are flagged inline as [INJECTION_DETECTED].
Never pass credentials through the chat. Use tapsite_login_manual to open a headed browser, log in manually (including MFA), then tapsite_login_check to confirm. Credentials never touch the AI provider's servers or local transcripts.
tapsite ships a Dockerfile and docker-compose.yml for headless-only use — CI pipelines, server deployments, or anywhere you don't want a local Node.js install.
docker build -t tapsite .
docker compose up
tapsite_login_manual is not available in Docker (it requires a display). To use authenticated sessions in Docker, log in locally first, then mount the profiles/ directory into the container:
volumes:
Security note:
profiles/contains live session cookies. Don't commit it to version control (it's already in.gitignore).
git clone https://github.com/mgriffen/tapsite
cd tapsite npm install npx playwright install chromium npx playwright install-deps chromium
MCP config pointing to local source:
{
"mcpServers": { "tapsite": { "command": "node", "args": ["/absolute/path/to/tapsite/src/server.js"] } } }
src/
server.js — MCP server entry point browser.js — shared Chromium context (ensureBrowser, closeBrowser) helpers.js — shared helpers (safeNavigate, summarizeResult, indexPage) sanitizer.js — prompt injection detection diff.js — per-extractor diff logic and extractor name/args mapping snapshots.js — temporal snapshot I/O (saveSnapshot, loadLatestSnapshot) browser-pool.js — parallel browser context pooling cache.js — persistent disk caching with TTL markdown.js — HTML-to-Markdown converter (raw/fit/citations) chunker.js — LLM-friendly text chunking (fixed/semantic/sentence) content-filter.js — BM25 relevance filtering anti-bot.js — block detection and tier escalation proxy.js — proxy rotation with failure tracking stealth-setup.js — Puppeteer-extra stealth plugin registration extraction-strategies.js — CSS/XPath/regex flexible extrac