__GA4_BLOCK__ DesignSkill Agent | 5-Minute Claude MCP Quickstart __OG_BLOCK__ __CANONICAL_BLOCK__
DESIGNSKILL AGENT
LAUNCH AGENT
Quickstart Onboarding

5-Minute Claude MCP Quickstart

Configure your local Claude environment to autonomously extract, enrich, and package website design tokens using the Model Context Protocol.

🚧
MCP Integration — In Development

The DesignSkill Agent MCP server is currently under active development and not yet publicly available. The configuration steps below reflect the intended setup flow for when it launches. Follow us or check back soon for the stable release.

1 Step 1 // Access Credentials

Obtain an API Key

You need an active developer credential to authorize requests from your local MCP server to the DesignSkill API backend. Request a key and manage it from the developer portal.

Request a Key Manage Keys in Portal
2 Step 2 // Configuration

Connect to Claude

DesignSkill Agent supports the Model Context Protocol (MCP), a standard JSON-RPC 2.0-based protocol. Select your preferred integration method below:

Open your Claude Desktop config file via "Developer" → "Edit Config", or locate it manually:

  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Add the following block under "mcpServers". Use the absolute path to your cloned server file:

JSON CONFIG 
{
  "mcpServers": {
    "designskill-agent": {
      "command": "node",
      "args": ["/absolute/path/to/designskill-scraper/mcp-server/index.js"],
      "env": {
        "DESIGNSKILL_API_KEY": "YOUR_DESIGNSKILL_API_KEY",
        "DESIGNSKILL_API_URL": "https://scraper.chowkar.in"
      }
    }
  }
}
Windows Tip: Escape backslashes in JSON strings (e.g. C:\\path\\to\\mcp-server\\index.js). Restart Claude Desktop after saving to reload the config.

Register the MCP server directly using the CLI:

BASH 
# macOS / Linux
claude mcp add designskill-agent -- node "/absolute/path/to/designskill-scraper/mcp-server/index.js"

# Windows
claude mcp add designskill-agent -- node "C:\path\to\designskill-scraper\mcp-server\index.js"

Then expose your API key before launching Claude:

BASH 
export DESIGNSKILL_API_KEY="YOUR_DESIGNSKILL_API_KEY"
export DESIGNSKILL_API_URL="https://scraper.chowkar.in"
claude
3 Step 3 // Execution

Test Run & Prompt

Once connected, ask Claude to analyze any target public website. Note: loopback hostnames like localhost are blocked to prevent SSRF vulnerabilities.

"Claude, please extract the design system of https://example.com using designskill-agent."

Claude will call the generate_design_skill tool and return a structured JSON response including extracted token files and a ZIP download link:

JSON RESPONSE 
{
  "ok": true,
  "pluginName": "designskill-pack-example",
  "zipFileUrl": "https://scraper.chowkar.in/output/uuid-designskill.zip",
  "creditsUsed": 2,
  "pipeline": ["scrape", "enrich", "package"],
  "truncated": false,
  "files": [
    {
      "path": "tokens.json",
      "content": "{\n  \"colors\": {\n    \"primary\": \"#000000\",\n    \"accent\": \"#ff0055\"\n  }\n}",
      "truncated": false
    },
    {
      "path": "variables.css",
      "content": ":root {\n  --primary: #000000;\n  --accent: #ff0055;\n}",
      "truncated": false
    }
  ]
}
Distribution & Roadmap

MCP Distribution Modes

Currently the DesignSkill MCP adapter requires a local clone of the repository. The roadmap outlines lower-friction setup paths coming soon:

Distribution Mode Setup Requirements Status
Local File Path Clone repo and point args to index.js Available Now — Devs & Contributors
NPM Package (npx) Node.js installed locally; no cloning required Coming Soon — Public Onboarding
Desktop Extension One-click install from Claude Desktop App Future Roadmap — End-user simplicity
Windows NPX Caveat: Some shells require command wrapping when executing via npx on Windows (e.g. cmd /c npx ...). The local file path is the most stable fallback for Windows development environments.
Onboarding Help

Troubleshooting FAQ