mcp

Provides UX capabilities to enhance the design output and understanding of AI systems.

¿Debería usar esto?

Calidad y seguridad

A
Calidad de la descripción
84%
Integridad del esquema
86%
Calidad de los nombres
92%
Riesgo de envenenamiento
100%
Coincidencia de permisos
100%
Cumplimiento del protocolo
100%

Hallazgos (2)

  • LOWTool 'icons_instructions' description lacks action verben icons_instructions
  • LOWTool 'describe_font' description lacks action verben describe_font

Basado en el análisis automatizado de las definiciones de herramientas y el cumplimiento del protocolo.

Costo de contexto

~2,375Tokens (definiciones de herramientas)
~5.5 KBTamaño de respuesta típico
Impacto moderado en la atención (1.86% del contexto de 128k)

Este es el número aproximado de tokens que se consumen cada vez que las herramientas del servidor se cargan en el contexto de un modelo. Los recuentos más altos reducen la atención disponible para otras tareas.

Instalar

Instalación con un clic

Agrega esto a tu archivo `claude_desktop_config.json`:

{
  "mcpServers": {
    "mcp": {
      "url": "https://design.googleapis.com/mcp"
    }
  }
}

Puntos de conexión remotos

https://design.googleapis.com/mcpstreamable-http

Qué puede hacer

Inventario de herramientas

Herramientas (5)

🟢 Solo lectura🟡 Escritura🔴 Eliminación⚪ Desconocido
🟢generate_color_scheme(backgroundKey, contrastLevel, optionalSchemeVariant, optionalTheme, primaryKey, ...)

Generates a Material Design color scheme from one or more key colors. Always use this when you need to create a color scheme for an application. The input is one or more named colors in hex format, and the output is a color scheme with a map of color role names to colors in hex format.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "backgroundKey": {
      "description": "Optional. The neutral key color used to generate the color scheme. If omitted, it will be automatically derived from the other keys. Can be a hex code or any CSS color name.",
      "type": "string"
    },
    "contrastLevel": {
      "description": "Optional. The contrast level of the color scheme. Values range from -1 (minimum contrast) to 1 (maximum contrast). 0 represents standard contrast (i.e. the design as specified).",
      "format": "double",
      "type": "number"
    },
    "optionalSchemeVariant": {
      "description": "Optional. If only the primary key color is supplied, this will select which variant of the color scheme to use. If only the primary key color is supplied and this is not set, it defaults to \"TONAL_SPOT\". If multiple key colors are supplied, this is ignored, and it will default to \"BRAND\".",
      "enum": [
        "UNSPECIFIED_VARIANT",
        "TONAL_SPOT",
        "MONOCHROME",
        "NEUTRAL",
        "VIBRANT",
        "EXPRESSIVE",
        "FIDELITY",
        "CONTENT",
        "BRAND"
      ],
      "type": "string",
      "x-google-enum-descriptions": [
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        ""
      ]
    },
    "optionalTheme": {
      "description": "Optional. Whether to generate a light or dark theme. If unspecified, and a background key is supplied, it will be inferred from that. If not, it will default to light theme.",
      "enum": [
        "UNSPECIFIED_THEME",
        "LIGHT",
        "DARK"
      ],
      "type": "string",
      "x-google-enum-descriptions": [
        "",
        "",
        ""
      ]
    },
    "primaryKey": {
      "description": "Required. The primary key color used as the main seed for the scheme. Can be a 6-character hex code (e.g., \"#4285F4\" or \"4285F4\"), or any standard CSS color name (e.g., \"blue\").",
      "type": "string"
    },
    "secondaryKey": {
      "description": "Optional. The secondary key color used to generate the color scheme. If omitted, it will be automatically derived from the other keys. Can be a hex code or any CSS color name.",
      "type": "string"
    },
    "tertiaryKey": {
      "description": "Optional. The tertiary key color used to generate the color scheme. If omitted, it will be automatically derived from the other keys. Can be a hex code or any CSS color name.",
      "type": "string"
    }
  },
  "required": [
    "primaryKey"
  ],
  "description": "Request message for `GenerateColorScheme`."
}

Esquema de salida

{
  "type": "object",
  "properties": {
    "colorScheme": {
      "$ref": "#/$defs/ColorScheme",
      "description": "The generated color scheme."
    }
  },
  "$defs": {
    "ColorScheme": {
      "description": "Represents a complete brand color scheme generated for a specific design context (e.g., light or dark theme).",
      "properties": {
        "backgroundIsDerived": {
          "description": "Whether the background key color was automatically derived from other keys.",
          "type": "boolean"
        },
        "backgroundKey": {
          "description": "The background key color used for generating the color scheme, if one was provided. Always returned in 6-character hex format.",
          "type": "string"
        },
        "colorSchemeVariant": {
          "description": "The color scheme variant used.",
          "enum": [
            "UNSPECIFIED_VARIANT",
            "TONAL_SPOT",
            "MONOCHROME",
            "NEUTRAL",
            "VIBRANT",
            "EXPRESSIVE",
            "FIDELITY",
            "CONTENT",
            "BRAND"
          ],
          "type": "string",
          "x-google-enum-descriptions": [
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            "",
            ""
          ]
        },
        "contrastLevel": {
          "description": "The contrast level of the color scheme, where 0 is normal contrast, -1 is least contrast, and 1 is most contrast.",
          "format": "double",
          "type": "number"
        },
        "namedColors": {
          "additionalProperties": {
            "type": "string"
          },
          "description": "A map of color role names to their calculated hex color values. Keys follow snake_case naming conventions for semantic Material Design roles (e.g., \"on_primary_container\", \"surface_bright\"). Values are colors in 6-character hex format (e.g., \"#00FF00\").",
          "type": "object"
        },
        "primaryKey": {
          "description": "The primary key color used for generating the color scheme. Always returned in 6-character hex format (e.g., \"#00FF00\").",
          "type": "string"
        },
        "secondaryIsDerived": {
          "description": "Whether the secondary key color was automatically derived from other keys.",
          "type": "boolean"
        },
        "secondaryKey": {
          "description": "The secondary key color used for generating the color scheme, if one was provided. Always returned in 6-character hex format.",
          "type": "string"
        },
        "tertiaryIsDerived": {
          "description": "Whether the tertiary key color was automatically derived from other keys.",
          "type": "boolean"
        },
        "tertiaryKey": {
          "description": "The tertiary key color used for generating the color scheme, if one was provided. Always returned in 6-character hex format.",
          "type": "string"
        },
        "theme": {
          "description": "Light or dark theme.",
          "enum": [
            "UNSPECIFIED_THEME",
            "LIGHT",
            "DARK"
          ],
          "type": "string",
          "x-google-enum-descriptions": [
            "",
            "",
            ""
          ]
        }
      },
      "type": "object"
    }
  },
  "description": "Response message for `GenerateColorScheme`."
}
🟢search_icons(iconSet, tags)

Finds appropriate Material Design icons matching keywords that describe their usage, style, or shape.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "iconSet": {
      "description": "Optional. The icon set to search within (e.g., \"Material Symbols\", \"Material Icons\"). If omitted, the default icon set of the environment is used.",
      "type": "string"
    },
    "tags": {
      "description": "Required. A list of semantic keywords or metadata tags that describe the desired icon's visual or functional properties. If possible, specify at least three tags to describe usage, style, and shape. Examples: - For a \"save\" icon: [\"save\", \"diskette\", \"document\", \"storage\"] - For a \"home\" icon: [\"home\", \"house\", \"building\"] If multiple tags are provided, the service returns icons that match any part of the tag list, ordered by relevance (number of matching tags). If no tags are provided, all icons are returned.",
      "items": {
        "type": "string"
      },
      "type": "array"
    }
  },
  "required": [
    "tags"
  ],
  "description": "Request message for the `FindIcons` method. Used to search for Material Design icons or symbols based on semantic tags."
}

Esquema de salida

{
  "type": "object",
  "properties": {
    "icons": {
      "description": "The names of icons that match the provided tags, ordered by relevance.",
      "items": {
        "type": "string"
      },
      "type": "array"
    }
  },
  "description": "Response message for the `FindIcons` method. Contains a list of matching icon names."
}
🟢icons_instructions

Provides essential and critical instructions on how to use Material Icons and Material Symbols efficiently on Web.

Esquema de entrada

{
  "type": "object",
  "properties": {}
}

Esquema de salida

{
  "type": "object",
  "properties": {
    "instructions": {
      "description": "Instructions on how to use Google Material Icons and Google Symbols efficiently.",
      "type": "string"
    }
  }
}
🟢search_fonts(categories, languages, platform, sort)

Finds appropriate fonts matching categories and/or languages.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "categories": {
      "description": "Optional. One or more categories to filter font families",
      "items": {
        "type": "string"
      },
      "type": "array"
    },
    "languages": {
      "description": "Optional. Language tags in BCP47 format to filter fonts that support specific scripts (e.g., \"en_Latn\", \"zh_Hans\").",
      "items": {
        "type": "string"
      },
      "type": "array"
    },
    "platform": {
      "description": "Required. The platform in which the font family is going to be used.",
      "enum": [
        "PLATFORM_UNSPECIFIED",
        "PLATFORM_ANDROID",
        "PLATFORM_WEB"
      ],
      "type": "string",
      "x-google-enum-descriptions": [
        "Default value (not specifying usually defaults to web)",
        "Android platform",
        "Web platform"
      ]
    },
    "sort": {
      "description": "Optional. The sort order for the returned font families. Defaults to POPULARITY_DESCENDING if unspecified.",
      "enum": [
        "SORT_UNSPECIFIED",
        "POPULARITY_DESCENDING",
        "POPULARITY_ASCENDING",
        "TRENDING_DESCENDING",
        "TRENDING_ASCENDING",
        "NAME_ASCENDING",
        "NAME_DESCENDING",
        "DATE_ADDED_ASCENDING",
        "DATE_ADDED_DESCENDING"
      ],
      "type": "string",
      "x-google-enum-descriptions": [
        "Unspecified sort order. Defaults to POPULARITY_DESCENDING.",
        "Sort by popularity, most popular first.",
        "Sort by popularity, least popular first.",
        "Sort by trending, most trending first.",
        "Sort by trending, least trending first.",
        "Sort by name, A-Z.",
        "Sort by name, Z-A.",
        "Sort by date added, oldest first.",
        "Sort by date added, newest first."
      ]
    }
  },
  "required": [
    "platform"
  ],
  "description": "Request message for the `FindFonts` method. Used to discover Google Fonts based on categories or supported languages."
}

Esquema de salida

{
  "type": "object",
  "properties": {
    "errorHelp": {
      "description": "Optional. Contextual help text or error descriptions if the query failed.",
      "type": "string"
    },
    "fontFamilies": {
      "description": "The names of font families that match the search criteria (e.g., \"Roboto\", \"Open Sans\").",
      "items": {
        "type": "string"
      },
      "type": "array"
    }
  },
  "description": "Response message for the `FindFonts` method. Contains a list of font family names."
}
🟢describe_font(fontFamily, platform)

Describes a font family in detail, including its look and feel, supported styles, weights and how to use it.

Esquema de entrada

{
  "type": "object",
  "properties": {
    "fontFamily": {
      "description": "Required. The full name of the font family to describe. Example: \"Roboto\", \"Noto Sans\".",
      "type": "string"
    },
    "platform": {
      "description": "Required. The platform in which the font family is going to be used.",
      "enum": [
        "PLATFORM_UNSPECIFIED",
        "PLATFORM_ANDROID",
        "PLATFORM_WEB"
      ],
      "type": "string",
      "x-google-enum-descriptions": [
        "Default value (not specifying usually defaults to web)",
        "Android platform",
        "Web platform"
      ]
    }
  },
  "required": [
    "fontFamily",
    "platform"
  ],
  "description": "Request message for the `DescribeFont` method. Used to retrieve detailed metadata and usage guidance for a specific font."
}

Esquema de salida

{
  "type": "object",
  "properties": {
    "description": {
      "description": "Description of the font family, in Markdown format.",
      "type": "string"
    },
    "errorHelp": {
      "description": "Optional. Contextual help text if the font family name was not found or is invalid.",
      "type": "string"
    },
    "features": {
      "description": "Supported features of the font family such as weight, style and variable axes, if available, in Markdown format.",
      "type": "string"
    },
    "guidance": {
      "description": "Guidance on how to effectively use the font family, if available.",
      "type": "string"
    },
    "languages": {
      "description": "List of supported language and script in BCP47 format.",
      "items": {
        "type": "string"
      },
      "type": "array"
    }
  },
  "description": "Response message for the `DescribeFont` method. Contains descriptive metadata and features for the requested font."
}

Comunidad

Califica este servidor

Evidencia

Observaciones recientes

verificadoversión no registrada5 herramientas
verificadoversión no registrada5 herramientas