devlens-mcp 0.4.2 → 0.5.2

package/docs/figma-workflow.md

@@ -237,15 +237,12 @@ When you use any of the prompts above, the AI agent automatically runs this sequ
 3. devlens_hot_reload                          ← Push changes to device
 4. devlens_wait_for_screen(stableMs: 1500)     ← Wait for render
 5. devlens_snapshot(validate: true)            ← Get element tree + catch invisible bugs
-6. devlens_compare_properties(                 ← Per-component property check
-     figmaUrl: "https://figma.com/design/..."
-   )
-7. devlens_vqa_validate(                       ← Run VQA
+6. devlens_vqa_validate(                       ← Run VQA
      figmaUrl: "https://figma.com/design/...",
      checkCategories: ["spacing", "color", "alignment", "sizing", "missing"]
    )
-8. (AI reads property + VQA reports, applies fix suggestions to code)
-9. Repeat steps 3-8 until VQA status = PASS
+7. (AI reads VQA report, applies fix suggestions to code)
+8. Repeat steps 3-7 until VQA status = PASS
 ```
 
 ---
@@ -415,6 +412,61 @@ DevLens works great alongside:
 
 ---
 
+## Prototype Exploration (v0.5.0)
+
+In addition to static Figma frame comparison, DevLens can now explore full prototypes and mocks — both web-hosted (Vercel, Netlify) and Figma prototypes.
+
+### Bidirectional Prompting Flow
+
+```
+Developer gives Figma link
+  └─► devlens_check_prototype(url)
+      └─► "Figma design found! Prototype connections exist."
+          └─► "ACTION NEEDED: provide prototype/mock URL"
+
+Developer gives prototype/mock URL
+  └─► devlens_check_prototype(url)
+      └─► "Web prototype found! 12 screens discovered."
+          └─► "ACTION NEEDED: provide Figma design link"
+
+Both URLs provided
+  └─► devlens_explore_prototype(prototypeUrl, figmaUrl)
+      └─► Full exploration + enriched design tokens
+          └─► Near-100% build accuracy
+```
+
+### Workflow 1: Dev gives Figma link first
+
+```
+1. "Here's the Figma: https://figma.com/design/ABC123/MyApp?node-id=10-200"
+2. devlens_check_prototype(url) → "8 screens, prototype connections found!"
+3. AI asks: "Is there a prototype link for this design?"
+4. Dev: "https://figma.com/proto/ABC123/MyApp"
+5. devlens_explore_prototype(prototypeUrl, figmaUrl) → Full flow report
+```
+
+### Workflow 2: Dev gives prototype/mock URL first
+
+```
+1. "Check this prototype: https://productprototype.vercel.app"
+2. devlens_check_prototype(url) → "12 screens discovered!"
+3. AI asks: "Is there a Figma file for this?"
+4. Dev: "https://figma.com/design/XYZ/JioAICloud?node-id=5-100"
+5. devlens_explore_prototype(prototypeUrl, figmaUrl) → Full flow report
+```
+
+### What you get from exploration
+
+- High-res screenshot of every screen
+- Colour palette per screen
+- Typography detected from headings
+- Component inventory (cards, tabs, galleries, nav bars)
+- Interactive element map (buttons, links, inputs)
+- Flow diagram showing screen connections
+- Design tokens aggregated across all screens
+
+---
+
 ## Troubleshooting
 
 ### Similarity is always low (< 50%)

package/docs/installation-guide.md

@@ -0,0 +1,302 @@
+# DevLens MCP Installation Guide
+
+A step-by-step visual guide for setting up DevLens in your development environment.
+
+---
+
+## Prerequisites
+
+Before starting, ensure you have:
+- **Node.js 18+** installed (`node -v` to check)
+- **npm** (comes with Node.js)
+- Access to the **JioOmni Azure DevOps** organization
+- **Cursor IDE** (or Claude Desktop / Claude Code)
+
+---
+
+## Step 1: Create an Azure DevOps Personal Access Token (PAT)
+
+The PAT authenticates you with the private DevLens package registry.
+
+1. Open your browser and go to:
+   ```
+   https://dev.azure.com/JioOmni/_usersSettings/tokens
+   ```
+
+   > **Screenshot 1** — Azure DevOps "Personal Access Tokens" page showing the token list
+
+2. Click the **"+ New Token"** button in the top-right corner.
+
+   > **Screenshot 2** — The "New Token" button highlighted on the tokens page
+
+3. Fill in the token creation form:
+   - **Name**: `devlens-mcp` (or any name you prefer)
+   - **Organization**: `JioOmni`
+   - **Expiration**: Choose a suitable duration (e.g., 90 days or custom)
+   - **Scopes**: Click **"Custom defined"**, then check **Packaging > Read**
+
+   > **Screenshot 3** — The "Create a new personal access token" form with fields filled in. Name set to "devlens-mcp", scope showing Packaging > Read checked.
+
+4. Click **"Create"**. Your PAT will be displayed **once** — copy it immediately.
+
+   > **Screenshot 4** — The "Success!" dialog showing the generated PAT with the copy button highlighted. Add a callout: "Copy this now! You won't be able to see it again."
+
+---
+
+## Step 2: Configure npm Authentication
+
+Open your terminal and run these commands. Replace `YOUR_PAT` with the token you copied in Step 1.
+
+```bash
+# Encode your PAT
+TOKEN=$(echo -n "YOUR_PAT" | base64)
+
+# Configure npm to authenticate with the DevLens registry
+npm config set //pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/:username "JioOmni"
+npm config set //pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/:_password "$TOKEN"
+npm config set //pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/:email "you@ril.com"
+```
+
+> **Screenshot 5** — Terminal showing the three `npm config set` commands executed successfully (no output = success)
+
+**Verify**: Run `npm config list` — you should see the Azure registry entries.
+
+> **Screenshot 6** — Terminal showing `npm config list` output with the Azure Artifacts registry entries visible
+
+---
+
+## Step 3: Install DevLens Globally
+
+```bash
+npm install -g devlens-mcp@latest --registry=https://pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/
+```
+
+> **Screenshot 7** — Terminal showing successful `npm install -g` output with the `+ devlens-mcp@0.5.x` confirmation line
+
+**Verify**: Run `devlens-mcp --version` — you should see the version number.
+
+```bash
+devlens-mcp --version
+```
+
+> **Screenshot 8** — Terminal showing `devlens-mcp --version` output (e.g., "devlens-mcp v0.5.2")
+
+---
+
+## Step 4: Configure Your IDE
+
+### For Cursor
+
+1. Create or edit the file `~/.cursor/mcp.json`:
+
+   ```bash
+   mkdir -p ~/.cursor
+   ```
+
+2. Open `~/.cursor/mcp.json` in any editor and paste this configuration:
+
+   ```json
+   {
+     "mcpServers": {
+       "devlens": {
+         "command": "devlens-mcp",
+         "args": [],
+         "env": {
+           "METRO_PORT": "8081"
+         }
+       }
+     }
+   }
+   ```
+
+   > **Screenshot 9** — The `~/.cursor/mcp.json` file open in an editor showing the configuration above
+
+3. **Completely quit Cursor** (Cmd+Q on Mac, not just close the window) and reopen it.
+
+4. Open a project and verify DevLens is connected. You should see "devlens" in the MCP server list.
+
+   > **Screenshot 10** — Cursor IDE showing the MCP servers panel with "devlens" listed and connected (green indicator)
+
+5. Test it! Ask the AI: **"List running devices"** or **"Take a screenshot"**
+
+   > **Screenshot 11** — Cursor AI chat showing a successful DevLens tool call (e.g., `devlens_list_devices` returning a device list)
+
+### For Claude Desktop
+
+1. Open the Claude Desktop config file:
+   - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+   - **Windows**: `%APPDATA%/Claude/claude_desktop_config.json`
+
+2. Add the DevLens MCP server:
+
+   ```json
+   {
+     "mcpServers": {
+       "devlens": {
+         "command": "devlens-mcp",
+         "args": [],
+         "env": {
+           "METRO_PORT": "8081"
+         }
+       }
+     }
+   }
+   ```
+
+3. Restart Claude Desktop.
+
+### For Claude Code (CLI)
+
+Run this single command:
+
+```bash
+claude mcp add devlens -- devlens-mcp
+```
+
+---
+
+## Step 5: Add Figma Token (Optional)
+
+For Figma comparison features (`devlens_compare_with_figma`, `devlens_vqa_validate`):
+
+1. Go to https://www.figma.com/settings
+
+   > **Screenshot 12** — Figma Settings page showing the "Personal access tokens" section
+
+2. Click **"Generate new token"** under "Personal access tokens"
+   - **Description**: `devlens`
+   - **Expiration**: No expiration (or your preference)
+   - **Scopes**: Select **File content > Read-only**
+
+   > **Screenshot 13** — Figma token creation dialog with "File content: Read-only" scope selected
+
+3. Copy the token (starts with `figd_...`)
+
+4. Add it to your MCP config in the `env` section:
+
+   ```json
+   {
+     "mcpServers": {
+       "devlens": {
+         "command": "devlens-mcp",
+         "args": [],
+         "env": {
+           "METRO_PORT": "8081",
+           "FIGMA_TOKEN": "figd_xxxxx"
+         }
+       }
+     }
+   }
+   ```
+
+5. Restart your IDE.
+
+---
+
+## One-Command Installer (Alternative)
+
+If you prefer a fully automated setup, copy-paste this entire block into your terminal:
+
+```bash
+bash <(cat << 'DEVLENS_INSTALL'
+#!/usr/bin/env bash
+set -e
+echo "Create PAT at: https://dev.azure.com/JioOmni/_usersSettings/tokens (scope: Packaging -> Read)"
+read -rsp "Paste your Azure PAT: " PAT && echo
+TOKEN=$(echo -n "$PAT" | base64)
+REGISTRY_KEY="//pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/"
+npm config set "${REGISTRY_KEY}:username" "JioOmni"
+npm config set "${REGISTRY_KEY}:_password" "$TOKEN"
+npm config set "${REGISTRY_KEY}:email" "npm@jio.com"
+echo "Installing DevLens..."
+npm install -g devlens-mcp@latest --registry=https://pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/
+mkdir -p ~/.cursor
+node -e "
+const fs = require('fs');
+const p = require('path').join(require('os').homedir(), '.cursor', 'mcp.json');
+let cfg = {};
+try { cfg = JSON.parse(fs.readFileSync(p, 'utf-8')); } catch {}
+if (!cfg.mcpServers) cfg.mcpServers = {};
+cfg.mcpServers.devlens = { command: 'devlens-mcp', args: [], env: { METRO_PORT: '8081' } };
+fs.writeFileSync(p, JSON.stringify(cfg, null, 2) + '\n');
+"
+echo "Done! Run: devlens-mcp --version to verify, then restart Cursor."
+DEVLENS_INSTALL
+)
+```
+
+> **Screenshot 14** — Terminal showing the one-command installer running: PAT prompt, installation progress, and success message
+
+---
+
+## Updating DevLens
+
+To update to the latest version:
+
+```bash
+npm update -g devlens-mcp --registry=https://pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/
+devlens-mcp --version
+```
+
+Then restart your IDE.
+
+---
+
+## Troubleshooting
+
+### "npm ERR! 401 Unauthorized" or "403 Forbidden"
+
+Your PAT doesn't have the correct permissions or has expired.
+- Create a new PAT at https://dev.azure.com/JioOmni/_usersSettings/tokens
+- Ensure the scope includes **Packaging > Read**
+- Re-run the npm config commands from Step 2
+
+### "command not found: devlens-mcp"
+
+The global npm bin directory isn't in your PATH.
+
+```bash
+# Check where npm installs global packages
+npm bin -g
+
+# Add to your shell profile (~/.zshrc or ~/.bashrc)
+export PATH="$(npm bin -g):$PATH"
+```
+
+### DevLens not showing in Cursor
+
+1. Verify the config file exists: `cat ~/.cursor/mcp.json`
+2. Verify DevLens is installed: `devlens-mcp --version`
+3. Completely quit Cursor (Cmd+Q) and reopen — do not just reload the window
+4. Check Cursor's MCP logs for errors
+
+### npx cache errors
+
+If you previously used the npx setup, clear the cache:
+
+```bash
+rm -rf ~/.npm/_npx
+```
+
+Then use the global install method described above.
+
+---
+
+## Summary
+
+| Step | Action | Time |
+|------|--------|------|
+| 1 | Create Azure DevOps PAT | 1 min |
+| 2 | Configure npm auth | 30 sec |
+| 3 | Install globally | 30 sec |
+| 4 | Configure IDE | 30 sec |
+| 5 | (Optional) Add Figma token | 1 min |
+| **Total** | | **~3 min** |
+
+---
+
+## Need Help?
+
+- **Repository**: https://dev.azure.com/JioOmni/OmniAI/_git/mcp-devlens
+- **Azure Artifacts Feed**: https://dev.azure.com/JioOmni/OmniAI/_artifacts/feed/devlens
+- Contact the DevLens team on your internal Slack/Teams channel

package/docs/setup-guide.md

@@ -1,15 +1,23 @@
 # DevLens Setup Guide
 
+> **New here?** See the [Visual Installation Guide](./installation-guide.md) for a step-by-step walkthrough with screenshots.
+
 ## 1-Minute Install (Cursor IDE)
 
-Add this to `~/.cursor/mcp.json` and restart Cursor:
+**Step 1 — Install globally** (one-time, requires [Azure PAT setup](./installation-guide.md#step-1-create-an-azure-devops-personal-access-token-pat)):
+
+```bash
+npm install -g devlens-mcp@latest --registry=https://pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/
+```
+
+**Step 2 — Configure Cursor.** Add this to `~/.cursor/mcp.json` and restart Cursor:
 
 ```json
 {
   "mcpServers": {
     "devlens": {
-      "command": "/bin/zsh",
-      "args": ["-l", "-c", "npx devlens-mcp@latest"],
+      "command": "devlens-mcp",
+      "args": [],
       "env": {
         "METRO_PORT": "8081"
       }
@@ -20,9 +28,7 @@ Add this to `~/.cursor/mcp.json` and restart Cursor:
 
 That's it. DevLens tools will appear in Cursor's MCP panel after restart.
 
-> **v0.4.0 Auto-Detection**: DevLens now automatically detects your shell (bash/zsh/fish) and `node`/`npx` path on every startup. If it finds a misconfigured command or path in your MCP config JSON, it patches it automatically (with backup). Check startup logs for `[devlens] Patched` or `[devlens] Config OK` messages.
->
-> **Why `/bin/zsh -l`?** Cursor doesn't load your shell profile, so `node` from nvm/fnm isn't in PATH. Using `/bin/zsh -l` loads your login profile first. DevLens v0.4.0+ handles this automatically — if you put `/bin/bash` but use zsh, it will auto-correct.
+> **Why global install over npx?** The `npx` approach had frequent issues: cache corruption, permission errors, slow cold starts with the private Azure Artifacts registry. Global install (`npm install -g`) is faster, more reliable, and avoids the `/bin/zsh -l` shell wrapper that was previously needed.
 
 ---
 
@@ -30,33 +36,23 @@ That's it. DevLens tools will appear in Cursor's MCP panel after restart.
 
 ### Claude Code
 ```bash
-claude mcp add devlens -- npx devlens-mcp@latest
+claude mcp add devlens -- devlens-mcp
 ```
-> Claude Code loads shell profiles automatically, so no `/bin/zsh` wrapper needed.
 
 ### Claude Desktop
-Edit `~/Library/Application Support/Claude/claude_desktop_config.json`:
+Edit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%/Claude/claude_desktop_config.json` (Windows):
 ```json
 {
   "mcpServers": {
     "devlens": {
-      "command": "/bin/zsh",
-      "args": ["-l", "-c", "npx devlens-mcp@latest"],
+      "command": "devlens-mcp",
+      "args": [],
       "env": { "METRO_PORT": "8081" }
     }
   }
 }
 ```
 
-### Local Development (Build from Source)
-```bash
-git clone https://JioOmni@dev.azure.com/JioOmni/OmniAI/_git/mcp-devlens
-cd mcp-devlens && npm install && npm run build
-npm run register   # auto-registers with Claude Code
-```
-
-For Cursor with local build, use `"command": "node"` and `"args": ["/absolute/path/to/mcp-devlens/dist/bin/cli.js"]` instead of the zsh wrapper.
-
 ---
 
 ## Prerequisites
@@ -92,8 +88,8 @@ Full example with all optional vars:
 {
   "mcpServers": {
     "devlens": {
-      "command": "/bin/zsh",
-      "args": ["-l", "-c", "npx devlens-mcp@latest"],
+      "command": "devlens-mcp",
+      "args": [],
       "env": {
         "METRO_PORT": "8081",
         "FIGMA_TOKEN": "figd_xxxxx",
@@ -174,7 +170,7 @@ For the full VQA workflow guide with report format details, see [Figma Workflow]
 
 ## Figma Token Setup
 
-Required for `devlens_compare_with_figma`, `devlens_compare_properties`, and `devlens_vqa_validate`.
+Required only for `devlens_compare_with_figma`.
 
 1. Go to [figma.com/settings](https://www.figma.com/settings)
 2. Scroll to **Personal access tokens** → **Generate new token**
@@ -231,8 +227,8 @@ Optional. Enables `devlens_ds_context` for design-token-aware code generation.
 {
   "mcpServers": {
     "devlens": {
-      "command": "/bin/zsh",
-      "args": ["-l", "-c", "npx devlens-mcp@latest"],
+      "command": "devlens-mcp",
+      "args": [],
       "env": {
         "METRO_PORT": "8081",
         "FIGMA_TOKEN": "figd_xxxxx",
@@ -251,78 +247,63 @@ Ask your AI: *"Load the design system context"* — it should return token names
 
 ## Troubleshooting
 
-### Fix: Used `node` as command with shell flags (`-l`, `-c`)
+### Fix: "command not found: devlens-mcp"
 
-If your old config looked like this:
-```json
-{
-  "command": "/opt/homebrew/bin/node",
-  "args": ["-l", "-c", "npx devlens-mcp@latest"]
-}
-```
-This is incorrect — `-l` and `-c` are shell flags (zsh/bash), not node flags. Node ignores or errors on them.
+The global npm bin directory isn't in your PATH.
 
-**v0.4.0 auto-fix:** DevLens detects this misconfiguration on startup and patches `command` to your actual shell (`/bin/zsh`, `/bin/bash`, etc.) automatically. Check logs for `[devlens] Patched`.
+```bash
+# Check where npm installs global packages
+npm bin -g
 
-**Manual fix:** Replace `node` with `/bin/zsh`:
-```json
-{
-  "command": "/bin/zsh",
-  "args": ["-l", "-c", "npx devlens-mcp@latest"]
-}
+# Add to your shell profile (~/.zshrc or ~/.bashrc)
+export PATH="$(npm bin -g):$PATH"
 ```
 
----
-
-### Fix: `env: node: No such file or directory`
+Alternatively, check `devlens-mcp` is installed: `npm list -g devlens-mcp`
 
-This means Cursor can't find `node`. It happens when Node is installed via nvm/fnm and the MCP config uses `"command": "npx"` directly.
+---
 
-**Fix:** Use the `/bin/zsh -l` wrapper as shown in the install section above:
-```json
-{
-  "command": "/bin/zsh",
-  "args": ["-l", "-c", "npx devlens-mcp@latest"]
-}
-```
+### Fix: npm ERR! 401/403 Unauthorized
 
-The `-l` flag loads your login shell profile (where nvm/fnm initialize), making `node` available. This is the default recommended config and works for everyone on macOS. DevLens v0.4.0 auto-detects and patches this if misconfigured.
+Your Azure PAT doesn't have the correct permissions or has expired.
 
-**Alternative:** If you prefer not to use the zsh wrapper, you can use the full absolute path to `npx`:
-1. Run `which npx` in Terminal
-2. Use that full path as `"command"` (e.g. `"/Users/you/.nvm/versions/node/v20.12.2/bin/npx"`)
+1. Create a new PAT at https://dev.azure.com/JioOmni/_usersSettings/tokens
+2. Ensure the scope includes **Packaging > Read**
+3. Re-run the npm config commands from the [Installation Guide](./installation-guide.md#step-2-configure-npm-authentication)
 
 ---
 
 ### Fix: "No server info found" / DevLens tools not showing
 
-This means Cursor couldn't start the MCP server. Check these in order:
-
-1. **Is the JSON valid?** Paste your `~/.cursor/mcp.json` into [jsonlint.com](https://jsonlint.com) to check for syntax errors (trailing commas, missing quotes, etc.)
+This means Cursor couldn't start the MCP server. Check in order:
 
-2. **Is it `"command": "npx"`?** Not `"command": "node"`. Using `"node"` makes it look for a local file instead of downloading the package.
-
-3. **Does `npx devlens-mcp@latest` work in Terminal?**
-   ```bash
-   npx devlens-mcp@latest
-   ```
-   - If this hangs (no output) — that's correct, it's waiting for MCP input via stdin. Press `Ctrl+C`.
-   - If it errors with `env: node: No such file` — see the [nvm/PATH fix](#fix-nvmpath-issue-env-node-no-such-file-or-directory) above.
-   - If it errors with `Cannot find module` — clear the npx cache: `rm -rf ~/.npm/_npx/*devlens*` and try again.
-
-4. **Restart Cursor completely** (quit and reopen, not just reload window).
+1. **Is DevLens installed?** Run `devlens-mcp --version` in Terminal.
+2. **Is the JSON valid?** Paste your `~/.cursor/mcp.json` into [jsonlint.com](https://jsonlint.com) to check for syntax errors.
+3. **Is the config correct?** It should be `"command": "devlens-mcp"` with `"args": []`.
+4. **Restart Cursor completely** (Cmd+Q and reopen, not just reload window).
 
 ---
 
-### Fix: Stale npx cache after update
+### Fix: Migrating from the old npx setup
 
-If you were on an older version and get `Cannot find module` errors:
+If you previously used the `npx` / `/bin/zsh -l` wrapper approach:
 
-```bash
-rm -rf ~/.npm/_npx/*devlens*
-```
-
-Then restart Cursor. npx will re-download the latest version.
+1. Install globally:
+   ```bash
+   npm install -g devlens-mcp@latest --registry=https://pkgs.dev.azure.com/JioOmni/_packaging/devlens/npm/registry/
+   ```
+2. Update `~/.cursor/mcp.json` — replace:
+   ```json
+   "command": "/bin/zsh",
+   "args": ["-l", "-c", "npx devlens-mcp@latest"]
+   ```
+   with:
+   ```json
+   "command": "devlens-mcp",
+   "args": []
+   ```
+3. Clear the old npx cache: `rm -rf ~/.npm/_npx`
+4. Restart Cursor.
 
 ---
 
@@ -343,7 +324,7 @@ Then restart Cursor. npx will re-download the latest version.
 
 ## What's Available
 
-DevLens provides **37 tools** across 9 categories:
+DevLens provides **43 tools** across 11 categories:
 
 | Category | Tools | Count |
 |----------|-------|-------|
@@ -351,10 +332,27 @@ DevLens provides **37 tools** across 9 categories:
 | App Management | launch_app, terminate_app, install_app, list_apps | 4 |
 | Snapshot & Elements | snapshot, find_element, wait_for_element, wait_for_screen, element_info | 5 |
 | Interaction | tap, type, swipe, scroll, long_press, press_button, fill_form, capture_flow | 8 |
-| Screenshots & Visual | screenshot, compare_screenshot, element_screenshot, compare_images, compare_with_figma, compare_properties | 6 |
+| Screenshots & Visual | screenshot, compare_screenshot, element_screenshot, compare_images, compare_with_figma | 5 |
 | React Native / Metro | metro_status, metro_logs, component_tree, hot_reload, network_requests, dismiss_overlays | 6 |
 | Navigation | open_url, go_back | 2 |
 | Design System | ds_context | 1 |
 | Analysis & VQA | analyze, vqa_validate | 2 |
+| Prototype Explorer | check_prototype, explore_prototype, prototype_screen | 3 |
+
+### Prototype Explorer (v0.5.0)
+
+The prototype explorer tools let AI agents explore web-hosted or Figma prototypes:
+
+```
+Developer gives Figma link  ──►  DevLens asks: "Prototype link bhi do"
+Developer gives prototype   ──►  DevLens asks: "Figma design link bhi do"
+Both links together          =   Near-100% build accuracy
+```
+
+**Web prototypes** (Vercel, Netlify, etc.) are crawled in a headless browser; every route is visited, screenshots captured, and design tokens extracted.
+
+**Figma prototypes** are navigated using the Figma REST API flow graph combined with headless Chrome interaction.
+
+Requires the `puppeteer` package (bundled with DevLens).
 
 See the [Tool Reference](./tool-reference.md) for detailed parameter docs.