NEURIA Design Intelligence MCP

Inteligencia de diseño impulsada por emociones para herramientas de codificación de IA. Obtén tokens de diseño, ADN de marca y parámetros de animación a través de MCP.

GitHubPrueba este MCPPatrocinado

Documentación

NEURIA — Inteligencia de Diseño Impulsada por Emociones para Herramientas de Codificación con IA

NEURIA es un servidor MCP (Model Context Protocol) que brinda a asistentes de IA como Claude, Cursor y Windsurf un sentido del gusto en diseño. En lugar de depender de los valores predeterminados genéricos de Tailwind o paletas de colores codificadas, los agentes de IA consultan a NEURIA para obtener tokens de diseño alineados con las emociones — colores, tipografía, espaciado, animaciones — todo respaldado por datos reales de más de 300 sitios web galardonados.

"El diseño no es solo cómo se ve. El diseño es cómo se siente." — Steve Jobs

NEURIA cuantifica ese sentimiento en tokens de diseño accionables.

¿Qué es NEURIA?

NEURIA mapea 6 emociones principales a sistemas de diseño completos:

Emoción	Vibra	Marcas de ejemplo
Confianza	Estable, confiable, profesional	Linear, Stripe, Notion
Emoción	Audaz, enérgico, dinámico	Vercel, Arc, Framer
Calma	Sereno, minimalista, respirable	Headspace, Muji, Apple
Lujo	Premium, refinado, exclusivo	Porsche, Rolex, Aesop
Innovación	Futurista, vanguardista, inteligente	OpenAI, Tesla, Figma
Energía	Vibrante, juguetón, de alto ritmo	Spotify, Discord, Duolingo

Cada emoción incluye paletas de colores, configuraciones de tipografía, escalas de espaciado, radios de borde, estilos de sombra y parámetros de animación — todo derivado del análisis estadístico de CSS real extraído de más de 300 sitios web destacados.

Inicio Rápido

1. Añade a tu configuración de MCP

Añade a tu .mcp.json (Claude Code) o configuración MCP del IDE:

{
  "mcpServers": {
    "neuria": {
      "type": "sse",
      "url": "https://api.neuria.tech/mcp"
    }
  }
}

Eso es todo. No se necesita clave API para las herramientas principales.

2. Desarrollo Local (Opcional)

git clone https://github.com/kosukeuemura0220-del/neuria-agent.git
cd neuria-agent
pip install -r requirements.txt
cp .env.example .env
# Fill in API keys for advanced tools (see .env.example)
python3 mcp-servers/neuria/server.py

10 Herramientas MCP

Herramientas Principales (Sin Clave API Requerida)

#	Herramienta	Descripción	Entrada
1	`get_emotion_tokens`	Obtener propiedades personalizadas de CSS para una emoción	`emotion`, `category`
2	`search_similar_designs`	Encontrar diseños similares mediante similitud coseno de pgvector	`query`, `mood`, `component_type`
3	`get_color_palette`	Obtener una paleta de 5 colores + esquema de API de Color	`emotion`, `industry`
4	`get_typography`	Obtener configuraciones de fuente para emoción × caso de uso	`emotion`, `use_case`
5	`score_html`	Puntuar HTML según los estándares de diseño de NEURIA	`html_content`, `target_emotion`, `url`
8	`get_animation_tokens`	Obtener parámetros de animación GSAP / CSS / Spring	`emotion`, `context`

Herramientas Avanzadas (Se Requieren Claves API)

#	Herramienta	Descripción	Claves Requeridas
6	`generate_hero_image`	Imagen hero generada por IA y alineada con la emoción	3D AI Studio
7	`analyze_reference_url`	Extraer tokens de diseño de cualquier URL (formato W3C DTCG)	`FIRECRAWL_API_KEY`
9	`analyze_visual_design`	Análisis dual: colores de captura de pantalla + análisis CSS	`SCREENSHOTONE_API_KEY`, `IMAGGA_API_KEY`
10	`analyze_brand_voice`	Análisis de emociones en texto mediante Hume AI	`HUME_API_KEY`

Ejemplo de Uso

1. Generar una Página de Aterrizaje con Tokens de Emoción

User: "Analyze linear.app and create a SaaS landing page with the same design feel"

→ NEURIA calls: analyze_reference_url("https://linear.app")
  Returns: dominant_emotion="innovation", W3C DTCG design tokens, emotion_scores

→ NEURIA calls: get_emotion_tokens("innovation")
  Returns: CSS variables (--neuria-bg, --neuria-accent, --neuria-font-*, etc.)

→ NEURIA calls: get_animation_tokens("innovation", "page_load")
  Returns: GSAP ease, CSS cubic-bezier, Spring physics params

→ Claude generates HTML using NEURIA tokens (no hardcoded colors)
→ NEURIA calls: score_html(generated_html, "innovation")
  Returns: composite_score=87/100 ✅

2. Paleta de Colores Rápida para Fintech

User: "I need a trustworthy color palette for a fintech app"

→ get_color_palette("trust", industry="fintech")
  Returns:
  {
    "background": "#0B1120",
    "surface": "#131D36",
    "accent": "#2E7DFF",
    "text_primary": "#E8ECF4",
    "text_secondary": "#7A8BAB",
    "color_scheme": [...5 harmonious colors from The Color API]
  }

3. Análisis de Voz de Marca

User: "What emotion does Apple's copy convey?"

→ analyze_brand_voice(url="https://apple.com")
  Returns:
  {
    "dominant_emotion": "innovation",
    "neuria_emotions": {
      "innovation": 0.31,
      "luxury": 0.24,
      "calm": 0.19,
      ...
    }
  }

Arquitectura

┌──────────────────────────────────────────────┐
│              AI Coding Tool                   │
│     (Claude Code / Cursor / Windsurf)         │
└──────────────┬───────────────────────────────┘
               │ MCP Protocol (stdio / SSE)
               ▼
┌──────────────────────────────────────────────┐
│            NEURIA MCP Server                  │
│                                               │
│  ┌─────────┐ ┌──────────┐ ┌──────────────┐  │
│  │ Emotion  │ │ Supabase │ │  External    │  │
│  │ Token DB │ │ pgvector │ │  APIs        │  │
│  │ (6×CSS)  │ │ (300+    │ │              │  │
│  │          │ │  sites)  │ │ • Firecrawl  │  │
│  └─────────┘ └──────────┘ │ • Color API  │  │
│                            │ • ScreenShot │  │
│  ┌─────────────────────┐  │ • Imagga     │  │
│  │ Animation Tokens    │  │ • Hume AI    │  │
│  │ (6 emotions ×       │  │ • WAVE       │  │
│  │  4 contexts)        │  │ • 3D AI      │  │
│  └─────────────────────┘  └──────────────┘  │
└──────────────────────────────────────────────┘

Sistema de Puntuación

score_html evalúa el HTML generado en 4 dimensiones:

Dimensión	Peso	Qué mide
Estética	35%	Armonía visual, espacio en blanco, uso del color
Emoción	35%	Alineación con los tokens de emoción objetivo
Técnica	15%	Marcado limpio, rendimiento, responsive
Accesibilidad	15%	WCAG 2.1 AA (lang, alt, contraste, encabezados)

Objetivo: 85+ / 100 para una salida de calidad de producción.

Variables de Entorno

Crea un archivo .env en la raíz del proyecto (consulta .env.example):

# Required for core functionality
SUPABASE_URL=your_supabase_url
SUPABASE_KEY=your_supabase_anon_key
NEURIA_API_BASE=your_api_base_url

# Required for analyze_reference_url
FIRECRAWL_API_KEY=your_firecrawl_key

# Required for generate_hero_image
THREE_D_AI_STUDIO_KEY=your_3d_ai_key

# Required for analyze_visual_design
SCREENSHOTONE_API_KEY=your_key
IMAGGA_API_KEY=your_key
IMAGGA_API_SECRET=your_secret

# Required for analyze_brand_voice
HUME_API_KEY=your_hume_key

# Optional — WAVE accessibility API
WAVE_API_KEY=your_wave_key

Precios

Próximamente

Plan	Precio	Solicitudes
Free	$0/mes	5 solicitudes/día
Indie	$19/mes	500 solicitudes/mes
Pro	$49/mes	2,000 solicitudes/mes
Team	$149/mes	10,000 solicitudes/mes
Enterprise	Personalizado	Ilimitado

Enlaces

Sitio web: https://neuria.tech
Endpoint MCP: https://api.neuria.tech/mcp
Documentación de API: https://api.neuria.tech/docs
GitHub: https://github.com/kosukeuemura0220-del/neuria-agent

Licencia

Licencia MIT — consulta LICENSE para más detalles.

NEURIA — Porque la UI generada por IA no debería parecer UI generada por IA.