Set up extract-design-system in Windsurf

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 ~/.codeium/windsurf/mcp_config.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 Windsurf is installed and up to date.
Open ~/.codeium/windsurf/mcp_config.json and add the block above (merge into any existing mcpServers).
Provide any required API keys/credentials as environment variables.
Restart Windsurf and confirm extract-design-system’s tools appear.

03Other runtimes

Claude Desktop Cursor Cline 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