Communitygithub.com

inspiration-references

Encuentra, muestra, compara y critica referencias de diseño reales de la biblioteca Inspiration de VASA.Works (a través de su servidor MCP): secciones de sitios web, pantallas UI, presentaciones, branding, imágenes OG, editorial, ilustración, motion, tipografías y paletas. También gestiona los tableros de Inspiration del usuario y los marcadores importados de X. Úsalo cuando el usuario quiera inspiración, ejemplos de un patrón, referencias para una página, un moodboard o más como una referencia.

¿Qué es inspiration-references?

Esta habilidad te permite actuar como un asistente de referencias de diseño. Conecta con la biblioteca Inspiration de VASA.Works a través de su servidor MCP para buscar, mostrar, comparar y criticar referencias reales de diseño. La habilidad es útil para desarrolladores, diseñadores y creadores que necesitan ejemplos concretos de patrones de diseño, como páginas de precios, flujos de onboarding, paletas de colores o typografías. Funciona principalmente con herramientas como search_inspiration, get_image, list_facets y save_to_board, y está optimizada para clientes como Claude Code, Cursor y Codex. La habilidad sigue un flujo estructurado: primero traduce el brief del usuario en una consulta visual, luego busca referencias, las muestra visualmente (usando get_image para obtener las imágenes reales), y ofrece análisis detallados, comparaciones lado a lado y recomendaciones. También gestiona tableros de Inspiration y marcadores de X, y respeta límites de presupuesto de llamadas API (50 llamadas medidas por mes para cuentas gratuitas).

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huseyingayiran/inspiration-skills/tree/HEAD/skills/inspiration-references

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación


name: inspiration-references description: Encuentra, muestra, compara y critica referencias de diseño reales de la biblioteca Inspiration de VASA.Works (a través de su servidor MCP): secciones de sitios web, pantallas UI, presentaciones, branding, imágenes OG, editorial, ilustración, motion, tipografías y paletas. También gestiona los tableros de Inspiration del usuario y los marcadores importados de X. Úsalo cuando el usuario quiera inspiración, ejemplos de un patrón, referencias para una página, un moodboard o más como una referencia. metadata: version: "1.1.0"

Referencias de Inspiration

Convierte un brief en un conjunto breve y honesto de referencias reales: busca en la biblioteca, mira las imágenes reales, di qué hace cada una que encaje y ayuda al usuario a acotar. Una buena respuesta son de 4 a 6 referencias que el usuario pueda aprovechar, no un volcado de 12 enlaces.

Cuándo usarlo

  • Solicitudes como "encuentra inspiración para", "muéstrame buenas páginas de precios", "cómo son los buenos flujos de onboarding", "referencias para un héroe fintech", "construye un moodboard", "más como esta", "compara estas dos", "guárdalas en un tablero", "qué hay en mis tableros", "busca en mis marcadores de X".
  • También cuando el usuario nunca dice "Inspiration" pero quiere ejemplos reales de un patrón de diseño.
  • No para diseñar y construir una página (usa inspiration-art-direction), una paleta o kit tipográfico (usa inspiration-brand-kit), o cambios de código sin una pregunta de referencia.

Las herramientas se nombran aquí por su nombre simple (search_inspiration). En tu cliente pueden llevar un prefijo de servidor como mcp__plugin_inspiration_inspiration__ (instalación del plugin de Claude Code), mcp__inspiration__ o un nombre de conector.

1. Verifica la configuración

Busca una herramienta llamada search_inspiration bajo cualquier prefijo. Si el host lista las herramientas como diferidas, cargarla a través de la búsqueda de herramientas del host cuenta como disponible. Si falta, lee references/setup.md, dale al usuario el paso único para su cliente y detente. Si quiere continuar de todos modos, di claramente que no puedes mostrar referencias de la biblioteca y ofrece orientación general de tu propio conocimiento. Nunca inventes ids, títulos, URLs de imágenes o descripciones.

2. Traduce el brief

Extrae cuatro cosas: qué (categoría y subtipo), aspecto (estilo, color, tema, tipografía), sensación (estado de ánimo), contexto (industria). Pon las palabras visuales específicas en query y solo las restricciones claras en filters.

search_inspiration(
  query="SaaS oscuro precios con un nivel medio destacado",
  category="website-sections",
  filters={"subtype": ["pricing", "pricing-table"], "theme": ["dark"]},
  limit=6)
  • Los filters son AND entre claves y cualquier-valor-dentro de una clave. Una a tres claves suele ser correcto; más claves generalmente producen cero resultados.
  • subtype significa tipo de sección para website-sections (hero, pricing, cta, footer...), rol de diapositiva para slide-decks (cover, traction, the-ask...), y tipo de activo en otros casos (logo, poster, dashboard...). Valores y recetas por categoría: references/search-recipes.md.
  • Cuando el brief es vago o no estés seguro de un valor, llama a list_facets(category=..., top=25). No tiene límite de uso. Si da error, sigue usando los valores en references/search-recipes.md en filters; elimina un filtro solo si esa búsqueda devuelve cero resultados.
  • Si el usuario nombra una marca cuyo aspecto quiere, pasa brand="<website-styles slug>" para reordenar hacia ella, o un diccionario de perfil (palette, style, mood, typography, industry, tags, theme).
  • Con cero resultados devuelve suggestions. Reintenta una vez con una sugerencia o con un filtro eliminado; dile al usuario qué has relajado.

Usa limit=6 para que todo el conjunto quepa en una llamada de imagen. limit=1 es para "solo dame una" y añade alternates.

3. Mira antes de hablar

La búsqueda devuelve URLs y metadatos, no píxeles. Llama a get_image una vez con la lista de ids (hasta 6) y mira cada imagen antes de escribir algo sobre ella.

Para cada referencia da:

  • Id y título (el id es lo que usan los tableros y seguimientos).
  • Qué hace realmente que encaje con el brief, en una o dos líneas, desde la imagen: diseño, jerarquía, tratamiento tipográfico, proporción de color, un detalle notable.
  • Etiqueta de ajuste cuando no sea una coincidencia completa: "parcial: oscuro y editorial, pero sin nivel destacado". Las etiquetas honestas son mejores que inflar la lista.

Luego añade dos o tres líneas de síntesis: los patrones que comparten las fuertes, y aquella desde la que empezarías y por qué. Mantén títulos, etiquetas y coincidencias de filtros fuera de tus descripciones a menos que la imagen los confirme. Un resultado que pasó theme: dark puede seguir siendo una página clara; etiquétalo como parcial. Describe solo lo que es visible: motion, estados hover y efectos de scroll no son visibles en una imagen fija.

4. Más, más específico o similar

  • Más de la misma búsqueda: repítela con exclude_ids=[ids ya mostrados] (mejor) o offset=6. Primero comprueba has_more.
  • Más como esta: similar_items(id, limit=6), o get_inspiration(id, similar=6) cuando también quieras las facetas de la semilla en la misma llamada.
  • Como esta, pero modificada ("más clara", "más divertida", "para fintech"): lee las facetas de la semilla (get_inspiration(id)) y mira la imagen de la semilla, luego busca con su subtipo y la restricción modificada como filtro o palabras de consulta, excluyendo la semilla. Si get_inspiration da error, encuentra la fila de la semilla con un search_inspiration(query="<palabras del slug>", category="<categoría de la semilla>", limit=3) simple (sin verbose, sin brand), abre su image_url, y toma el aspecto de los píxeles. Nota qué cambió en comparación con la semilla.
  • Detalles de unas pocas: get_inspiration([ids], detail="standard") en una llamada. detail="full" es grande; úsalo solo cuando falte un campo que necesites.

5. Comparar referencias

Cuando el usuario pregunte cuál es mejor o cómo se diferencian, pon los candidatos lado a lado desde las imágenes que ya obtuviste (obtén las que falten en un solo lote):

Ref ARef B
Jerarquía
Tipografía
Color y contraste
Densidad y espaciado
Qué tomar

Termina con una recomendación vinculada al brief del usuario, más qué dejar de cada una. Toma principios, no píxeles: nunca sugieras copiar logotipos, texto, imágenes o tipografías con licencia.

6. Tableros

Los tableros viven en la cuenta de Inspiration del usuario en inspiration.vasa.works.

  • Escribe solo ante una solicitud explícita o un sí a tu oferta. Buscar, ver o gustar un resultado no es permiso. Después de mostrar resultados, ofrece una vez: "¿Quieres que guarde esto en un tablero?"
  • save_to_board(title, ids=[...]) crea el tablero, o añade si ya existe un tablero con ese título. Devuelve board_url, item_count, added y already_in_board. Comparte la URL.
  • save_to_board(title, query=..., filters=..., category=..., limit=...) busca y guarda en una llamada; úsalo solo cuando el usuario pidió guardar "lo que encuentres" sin revisar primero.
  • list_my_boards() para "mis tableros". get_board(board) (id o slug) para mostrar uno; luego get_image en hasta 6 de sus ids de elementos si el usuario quiere verlos.
  • add_to_board(board, item_ids) para añadir a un tablero existente específico; create_board(title, item_ids) para uno nuevo vacío o con semillas.
  • Errores: board_limit o item_limit (dile al usuario, sugiere un tablero existente), rate_limited (espera, reintenta una vez), nothing_to_save (pasa ids).

7. Los marcadores de X del usuario

Si el usuario menciona sus propios marcadores o publicaciones guardadas, llama a search_x_bookmarks(query, limit=10). Busca solo en sus marcadores importados. Un resultado con "status": "not_connected" incluye connect_url; pásalo. Los resultados llevan texto del tuit, URLs de imágenes y un enlace a la publicación. Describe una imagen solo si pudiste verla realmente; de lo contrario, cita el texto guardado y di que no has visto la imagen.

Presupuesto

Las cuentas gratuitas obtienen 50 llamadas medidas por mes UTC. Una solicitud típica consume de 3 a 5:

PasoLlamadas
list_facets (solo si es vago)0, sin límite
search_inspiration1 (2 con un reintento)
get_image, un lote de hasta 61
un seguimiento (más, similar, comparar, guardar)1 o 2

Agrupa todo: get_image acepta hasta 6 ids, get_inspiration acepta una lista. Nunca hagas un bucle de una llamada por elemento.

Cuota y errores

Lee references/library-rules.md la primera vez que una herramienta devuelva un error, quota_exhausted o capped, o cuando get_image falle (tiene el fallback de imagen a través de la image_url pública, sin llamada medida). La versión corta: quota_exhausted detiene todas las llamadas medidas (enlace https://inspiration.vasa.works/pricing, termina con lo que tengas), capped significa que no hay más páginas, not_found significa volver a buscar (nunca adivines un id), subscription_required significa iniciar sesión, y el mismo error de servidor en dos herramientas diferentes significa modo degradado. Las llamadas con error cuentan para el presupuesto. Los errores de tablero están en la sección 6.

Reglas

  • Fidelidad. Describe solo lo que viste en imágenes que realmente abriste (get_image, o el fallback image_url). Nunca afirmes detalles a partir solo de títulos.
  • Principios, no píxeles. Las referencias informan; no son plantillas para copiar.
  • Nombra solo la biblioteca. Llámala la biblioteca Inspiration o Inspiration de VASA.Works. No especules sobre el origen de los elementos. Nunca enlaces un sitio de terceros como origen de un elemento. Las páginas de fundiciones tipográficas o licencias, los enlaces a publicaciones de marcadores del usuario y las URLs de tableros están bien.
  • Sin escrituras silenciosas en tableros.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills relacionados