Setup guide

Set up extract-design-system in Cline

communitystdiounknown

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.

01Configuration

{
  "mcpServers": {
    "extract-design-system": {
      "command": "npx",
      "args": [
        "-y",
        "extract-design-system-mcp"
      ]
    }
  }
}

Add this to cline_mcp_settings.json. Generated from the captured install method (npx); the mcpServers shape is shared across Claude Desktop, Cursor, Windsurf, Cline, and VS Code.

02Steps

Make sure Cline is installed and up to date.
Open cline_mcp_settings.json and add the block above (merge into any existing mcpServers).
Provide any required API keys/credentials as environment variables.
Restart Cline and confirm extract-design-system’s tools appear.

03Other runtimes

Claude Desktop Cursor Windsurf Continue Goose VS Code OpenAI Agents SDK LangGraph CrewAI

04Provenance

config_sourcegenerated from captured install method

last_checked2026-07-06 08:23Z

sourcesGitHub repo search [p4]

Next step

Want agents that act within guardrails? Apex is the live governed-agent product — paced, capped, and fully-logged actions with approvals before anything runs.

Explore Apex →

See also: server page · is it safe? · alternatives