← WebMCP Directory

Tool tree

ramp-webmcp.vercel.app

Developer ToolsTools verified
Website
RAMP — collaborative design-token mixer. Human and agent share one live studio via WebMCP.
Explore capabilities
    get_paletteAnswer

    Read the current RAMP design-token palette. Returns hex and oklch for every token (bg, surface, text, muted, accent, accent-text, border, danger, accent-100..accent-900), which tokens the human has locked, WCAG contrast ratios for text/bg, accent-text/accent, muted/bg, and any AA failures. Call this before proposing color changes.

    View tool JSON
    {
      "name": "get_palette",
      "kind": "answer",
      "impl": "imperative",
      "description": "Read the current RAMP design-token palette. Returns hex and oklch for every token (bg, surface, text, muted, accent, accent-text, border, danger, accent-100..accent-900), which tokens the human has locked, WCAG contrast ratios for text/bg, accent-text/accent, muted/bg, and any AA failures. Call this before proposing color changes.",
      "inputSchema": {
        "type": "object",
        "properties": {},
        "additionalProperties": false
      }
    }
    set_tokenAction

    Set one unlocked design token to a hex (#rrggbb or #rgb) or oklch(L C H) color. Valid tokens: bg, surface, text, muted, accent, accent-text, border, danger, accent-100 through accent-900. Fails clearly if the token is locked by the human — do not retry a locked token; ask the human to unlock it. Arbitrary CSS is rejected. Returns the new value and any contrast failures.

    View tool JSON
    {
      "name": "set_token",
      "kind": "act",
      "impl": "imperative",
      "description": "Set one unlocked design token to a hex (#rrggbb or #rgb) or oklch(L C H) color. Valid tokens: bg, surface, text, muted, accent, accent-text, border, danger, accent-100 through accent-900. Fails clearly if the token is locked by the human — do not retry a locked token; ask the human to unlock it. Arbitrary CSS is rejected. Returns the new value and any contrast failures.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "token": {
            "type": "string",
            "description": "Token name, e.g. accent, text, accent-500"
          },
          "value": {
            "type": "string",
            "description": "Hex or oklch, e.g. \"#3ee0c2\" or \"oklch(0.78 0.12 175)\""
          }
        },
        "required": [
          "token",
          "value"
        ],
        "additionalProperties": false
      }
    }
    generate_rampAction

    Rebuild the 9-stop accent ramp (accent-100 light through accent-900 dark) in OKLCH. Pass a seed color as from; optionally pass to to interpolate between two colors. Locked ramp stops are skipped and listed in skipped_locked. Also updates the accent token to accent-400 if accent is unlocked. Use after get_palette.

    View tool JSON
    {
      "name": "generate_ramp",
      "kind": "act",
      "impl": "imperative",
      "description": "Rebuild the 9-stop accent ramp (accent-100 light through accent-900 dark) in OKLCH. Pass a seed color as from; optionally pass to to interpolate between two colors. Locked ramp stops are skipped and listed in skipped_locked. Also updates the accent token to accent-400 if accent is unlocked. Use after get_palette.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "from": {
            "type": "string",
            "description": "Hex or oklch seed (or light end if to is set)"
          },
          "to": {
            "type": "string",
            "description": "Optional hex or oklch dark end"
          },
          "stops": {
            "type": "integer",
            "description": "Optional; ramp is always 9 named stops (100-900)",
            "minimum": 3,
            "maximum": 12
          }
        },
        "required": [
          "from"
        ],
        "additionalProperties": false
      }
    }
    check_contrastAnswer

    Compute WCAG 2 contrast ratio for a pair of tokens or raw hex/oklch colors. Returns ratio plus AA/AAA pass/fail for normal text (4.5 / 7) and large text (3 / 4.5). Example: foreground=text, background=bg.

    View tool JSON
    {
      "name": "check_contrast",
      "kind": "answer",
      "impl": "imperative",
      "description": "Compute WCAG 2 contrast ratio for a pair of tokens or raw hex/oklch colors. Returns ratio plus AA/AAA pass/fail for normal text (4.5 / 7) and large text (3 / 4.5). Example: foreground=text, background=bg.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "foreground": {
            "type": "string",
            "description": "Token name or hex/oklch color"
          },
          "background": {
            "type": "string",
            "description": "Token name or hex/oklch color"
          }
        },
        "required": [
          "foreground",
          "background"
        ],
        "additionalProperties": false
      }
    }
    apply_moodAction

    Apply a named mood preset to unlocked tokens. Moods: paper (warm off-white, terracotta), midnight (deep navy, teal — default), terminal (phosphor green on black), solar (sunlit cream and amber). Locked tokens are skipped. Returns skipped_locked and any contrast failures.

    View tool JSON
    {
      "name": "apply_mood",
      "kind": "act",
      "impl": "imperative",
      "description": "Apply a named mood preset to unlocked tokens. Moods: paper (warm off-white, terracotta), midnight (deep navy, teal — default), terminal (phosphor green on black), solar (sunlit cream and amber). Locked tokens are skipped. Returns skipped_locked and any contrast failures.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "mood": {
            "type": "string",
            "enum": [
              "paper",
              "midnight",
              "terminal",
              "solar"
            ],
            "description": "Preset name"
          }
        },
        "required": [
          "mood"
        ],
        "additionalProperties": false
      }
    }
    lock_tokenAction

    Lock a token so set_token, generate_ramp, and apply_mood will refuse to change it. The human can also lock from the UI. Use when the human wants a color held.

    View tool JSON
    {
      "name": "lock_token",
      "kind": "act",
      "impl": "imperative",
      "description": "Lock a token so set_token, generate_ramp, and apply_mood will refuse to change it. The human can also lock from the UI. Use when the human wants a color held.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "token": {
            "type": "string",
            "description": "Token name to lock"
          }
        },
        "required": [
          "token"
        ],
        "additionalProperties": false
      }
    }
    unlock_tokenAction

    Unlock a token so it can be changed again by the human or by agent tools.

    View tool JSON
    {
      "name": "unlock_token",
      "kind": "act",
      "impl": "imperative",
      "description": "Unlock a token so it can be changed again by the human or by agent tools.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "token": {
            "type": "string",
            "description": "Token name to unlock"
          }
        },
        "required": [
          "token"
        ],
        "additionalProperties": false
      }
    }
    annotate_previewAction

    Drop a visible pin on a live UI-kit region so the human can see your note. Regions: nav, buttons, form, card, table, stat, alert. Replaces any existing pin on that region. Keep notes short and specific (max 280 chars).

    View tool JSON
    {
      "name": "annotate_preview",
      "kind": "act",
      "impl": "imperative",
      "description": "Drop a visible pin on a live UI-kit region so the human can see your note. Regions: nav, buttons, form, card, table, stat, alert. Replaces any existing pin on that region. Keep notes short and specific (max 280 chars).",
      "inputSchema": {
        "type": "object",
        "properties": {
          "region": {
            "type": "string",
            "enum": [
              "nav",
              "buttons",
              "form",
              "card",
              "table",
              "stat",
              "alert"
            ]
          },
          "note": {
            "type": "string",
            "description": "Note the human will see"
          }
        },
        "required": [
          "region",
          "note"
        ],
        "additionalProperties": false
      }
    }
    export_tokensAction

    Export the current token set as CSS custom properties or JSON. Returns the file contents AND populates the export panel in the studio so the human can copy them.

    View tool JSON
    {
      "name": "export_tokens",
      "kind": "act",
      "impl": "imperative",
      "description": "Export the current token set as CSS custom properties or JSON. Returns the file contents AND populates the export panel in the studio so the human can copy them.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "format": {
            "type": "string",
            "enum": [
              "css",
              "json"
            ]
          }
        },
        "required": [
          "format"
        ],
        "additionalProperties": false
      }
    }
    undo_lastAction

    Revert the last token change (set_token, generate_ramp, or apply_mood). Locks are preserved. Returns the restored palette and any contrast failures. No-op with an error if history is empty.

    View tool JSON
    {
      "name": "undo_last",
      "kind": "act",
      "impl": "imperative",
      "description": "Revert the last token change (set_token, generate_ramp, or apply_mood). Locks are preserved. Returns the restored palette and any contrast failures. No-op with an error if history is empty.",
      "inputSchema": {
        "type": "object",
        "properties": {},
        "additionalProperties": false
      }
    }