Design
Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos
Llama a esta herramienta desde tu código en tres lenguajes.
# 1) Upload each file first → returns { filePath }
curl -X POST 'https://api.elysiatools.com/upload/image-to-design-tokens' \
-F 'file=@/path/to/image.ext'
# 2) Call the tool with the returned filePath values
curl -X POST 'https://api.elysiatools.com/es/api/tools/image-to-design-tokens' \
-F 'image=/path/to/file.ext' \
-F 'paletteSize=5' \
-F 'scale=tailwind' \
-F 'format=css' \
-F 'prefix=brand' \
-F 'naming=semantic'Envía una petición POST con tus entradas en JSON. Los parámetros de tipo archivo requieren una subida previa.
POST https://api.elysiatools.com/es/api/tools/image-to-design-tokens| Nombre | Tipo | Obligatorio | Descripción |
|---|---|---|---|
| image | filesubida requerida | Sí | — |
| paletteSize | select | No | — |
| scale | select | No | — |
| format | select | No | — |
| prefix | text | No | — |
Añade esta herramienta a tu servidor Model Context Protocol para que los agentes de IA puedan listarla y llamarla.
Añade este bloque a la configuración de tu cliente MCP:
{
"mcpServers": {
"elysiatools-image-to-design-tokens": {
"name": "image-to-design-tokens",
"description": "Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos",
"baseUrl": "https://api.elysiatools.com/mcp/sse?toolId=image-to-design-tokens",
"command": "",
"args": [],
"env": {},
"isActive": true,
"type": "sse"
}
}
}Tras conectar al endpoint SSE, lista las herramientas expuestas:
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/list"
}Invoca la herramienta por su id; los argumentos se construyen a partir de sus parámetros:
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "image-to-design-tokens",
"arguments": {
"image": "https://example.com/file.ext",
"paletteSize": "5",
"scale": "tailwind",
"format": "css",
"prefix": "brand",
"naming": "semantic"
}
}
}| naming | select | No | — |
Resultado HTML
{
"result": "<div>Processed HTML content</div>",
"error": "Error message (optional)",
"message": "Notification message (optional)",
"metadata": {
"key": "value"
}
}¿Dudas o problemas? Contacta con [email protected]