Inspiration Art Direction — sitios y decks con refs reales

Dirección de arte con Inspiration

Convierte un brief en una página con aspecto cuidado, trabajando a partir de referencias reales de la biblioteca Inspiration en lugar de usar valores predeterminados. La ejecución produce tres cosas en el proyecto del usuario:

• .inspiration/references.md: la ficha técnica (de 5 a 8 referencias visualizadas, qué aporta cada una).
• .inspiration/direction.md: la dirección de diseño, cada decisión vinculada a una referencia.
• La construcción, más capturas de pantalla y un informe de inspección en .inspiration-out/. Si el proyecto tiene un .gitignore, añade .inspiration-out/ antes de la primera escritura allí.

Cuándo usarlo

• Solicitudes como "diseña una página de aterrizaje para", "dale un estilo a este sitio", "cómo debería verse el héroe", "encuentra referencias y constrúyelo", "dirige el arte de esta presentación".
• El usuario quiere una dirección escrita antes de construir, o dice que el resultado se ve genérico, con plantilla o "como IA" y debería sentirse premium, editorial, audaz o distintivo.
• No para una simple búsqueda de referencias (usa inspiration-references), solo una paleta y kit tipográfico (usa inspiration-brand-kit), o cambios de código sin pregunta de diseño visual (un error de CSS, una refactorización).

Reglas estrictas

1. Fidelidad. Describe solo lo que viste en una imagen que realmente abriste (de get_image, o su fallback image_url). Los títulos, textos why y facetas son pistas, no evidencia. Nunca cites una referencia que no hayas visto.
2. Nunca copies. Toma principios, no píxeles. No tomes un diseño completo y nunca reutilices el texto, las imágenes, las ilustraciones, los logotipos o las tipografías con licencia de una referencia. Cada referencia debe nombrar lo que dejas atrás.
3. Presupuesto. Planea alrededor de 12 llamadas medidas (ver el presupuesto más abajo). Cuenta cada llamada medida que hagas, incluyendo las que den error. Agrupa: get_image acepta hasta 6 ids, get_inspiration acepta una lista.
4. Los tableros son opcionales. Nunca llames a save_to_board, create_board o add_to_board a menos que el usuario lo pida.
5. Nombres. Llama a la fuente "la biblioteca Inspiration" o "Inspiration de VASA.Works". Enlaza los elementos como https://inspiration.vasa.works/item/<id> y usando los valores image_url que devuelven las herramientas. Nunca enlaces un sitio de terceros como origen de un elemento. Las páginas de fundiciones tipográficas o licencias y las URL de tableros están bien.

Paso 0: Verificación de configuración

Verifica si una herramienta llamada search_inspiration está disponible bajo cualquier prefijo de servidor (mcp__plugin_inspiration_inspiration__ para una instalación del plugin de Claude Code, mcp__inspiration__, mcp__Inspiration__, un nombre de conector, o sin prefijo). Si el anfitrión lista las herramientas como diferidas, cargarlas a través de la búsqueda de herramientas del anfitrión cuenta como disponible. Las herramientas en este skill se nombran sin prefijo.

• Disponible: continúa.
• Faltante: lee references/setup.md y dale al usuario el único paso de configuración para su cliente, una vez. Luego continúa en el modo "Sin la biblioteca" más abajo, a menos que el usuario diga que quiere conectarse primero.
• Una llamada que devuelva {"error": "subscription_required"} significa que el servidor está conectado pero no ha iniciado sesión: da el paso de inicio de sesión de references/setup.md.

Paso 1: Brief e inventario del tema

Antes de buscar, escribe (pregunta solo lo que no puedas inferir del repositorio o la conversación):

• Qué es: producto o tema en una oración, y la única cosa que un visitante debe entender.
• Audiencia: quién, qué saben ya, qué haría que confiaran.
• Contenido que debe llevar: titular real, pruebas (números, logotipos, citas que el usuario realmente tenga), imágenes del producto disponibles, CTAs, contenido legal o de precios. Enuméralo; esto decide las secciones.
• Restricciones: stack, componentes existentes, activos de marca (logotipo, colores, fuentes con licencias), necesidades de accesibilidad, fecha límite, preferencia de modo claro u oscuro.
• ¿Marca existente? Si existe .inspiration/brand-kit.md o .inspiration/tokens.css, trátalos como la marca existente. Si hay una, la dirección debe extenderla, no reemplazarla. Anota cualquier slug de website-styles que coincida con la marca para la clasificación basada en marca (parámetro brand).
• Argumento de la página: las secciones ordenadas que la página necesita (por ejemplo, héroe, logotipos, características, cómo funciona, precios, FAQ, CTA, pie de página). Marca las 2 a 4 secciones que llevan el argumento; esas obtendrán sus propias búsquedas.

Si el prompt no da contenido (una línea sin pruebas, precios o imágenes), no te detengas a preguntar: lista los elementos faltantes en el brief como marcadores de posición claramente indicados y continúa.

Escribe esto como el primer bloque de .inspiration/direction.md para que el usuario pueda corregirlo temprano.

Paso 2: Plan de investigación

Lee references/research.md para recetas de consultas por tipo de página, ejemplos de filtros y la tabla de presupuesto. Plan predeterminado:

#	Llamada	Medida	Propósito
a	list_facets(category="website-sections")	no	Vocabulario real para subtype, style, mood, layout, typography
b	1 a 2 búsquedas de ambiente	sí	La sensación general, entre categorías (sin category ni website-sections)
c	2 a 3 búsquedas de sección	sí	Una por sección clave, category="website-sections", filters={"subtype": ["hero"]} etc.
d	1 búsqueda entre categorías	sí	Textura: fonts, website-styles, branding o editorial-print, el que más necesite el brief
e	opcional 1 similar_items(id), después del primer lote de get_image	sí	Ampliar y derivar del candidato más fuerte que realmente hayas visto; saltarlo si el primer lote ya tiene variedad
f	2 get_image([...6 ids])	sí	Ver la lista corta
g	1 get_inspiration([ids conservados])	sí	Hexes de paleta, notas tipográficas, descripciones completas del conjunto conservado
h	opcional analyze_palette o generate_palette	sí	Verificar o extender la paleta

Eso es de 7 a 11 llamadas medidas (b a h), por lo que el presupuesto de alrededor de 12 deja espacio para un reintento. Si el usuario dice que está en Pro, puedes añadir búsquedas de sección o un tercer lote de imágenes, pero el conjunto conservado sigue siendo de 5 a 8.

Higiene de búsqueda:

• Formula las consultas como lo que es visible: "héroe oscuro con titular serif sobredimensionado y captura de pantalla del producto", no "buen héroe".
• Pon los valores controlados en filters (AND entre claves, cualquier valor dentro de una clave). Deja la consulta para lo que los filtros no pueden expresar.
• Pasa exclude_ids con los ids ya vistos para que las búsquedas posteriores no los repitan. Deja diversify activado.
• Cero resultados devuelven suggestions: reintenta una vez con uno de ellos, luego continúa.
• Si list_facets da error, sigue usando los valores comunes listados en references/research.md (especialmente subtype) en filters; elimina un filtro solo si esa búsqueda devuelve cero resultados.

A partir de los resultados de búsqueda, construye una lista de candidatos de hasta 12 ids. Elige por variedad (diferentes estructuras y ambientes), no por 12 versiones de un mismo estilo.

Paso 3: Visualizar y preseleccionar

1. Llama a get_image con hasta 6 ids candidatos por llamada, como máximo 2 llamadas. La respuesta comienza con un manifiesto (order, errors); asigna cada imagen a su id según ese orden y descarta los ids listados en errors. Entre los dos lotes, opcionalmente ejecuta similar_items en la imagen más fuerte que hayas visto (Paso 2, fila e) y pon sus mejores selecciones en el segundo lote. Si get_image falla, visualiza los candidatos a través del fallback de imagen en references/library-rules.md (image_url pública, sin llamada medida).
2. Mira cada imagen correctamente: estructura, tipo (clasificación, contraste de escala, mayúsculas/minúsculas, tracking), campos de color y acentos, densidad, imágenes, el movimiento inusual.
3. Conserva de 5 a 8. Cada referencia conservada debe tener un rol: ambiente, héroe, una sección nombrada, tipo, paleta o textura. Elimina las casi duplicadas y cualquier cosa de la que no puedas decir algo específico.
4. Llama a get_inspiration una vez con los ids conservados (lista) para obtener los hexes de paleta y las notas tipográficas. Trata su texto como detalle de apoyo; tu propia visualización prevalece donde difieran. Si da error, no reintentes: muestra los hexes de las imágenes que abriste (por ejemplo magick <n>.png -resize 200x200 -colors 6 -format %c histogram:info:-, que necesita ImageMagick; sin él, estima a partir de lo que ves y dilo), indica en la ficha que los hexes fueron muestreados y juzga la tipografía a partir de los píxeles.

Paso 4: Ficha técnica

Escribe .inspiration/references.md usando el formato exacto de references/specimen-sheet.md. Para cada referencia conservada:

• id, título, rol, enlace https://inspiration.vasa.works/item/<id>, y el image_url.
• Visto: de 2 a 4 hechos visibles concretos.
• Toma: el principio que tomas prestado, expresado de modo que pueda aplicarse a un tema diferente.
• Deja: lo que deliberadamente no usas (su diseño, texto, imágenes, marcas, tipografías, cualquier cosa incorrecta para este brief).
• Se convierte en: en qué se convierte el principio en esta página, específicamente.

Termina la ficha con una línea sobre lo que el conjunto tiene en común y una tensión que resolverás.

Paso 5: Dirección

Deriva la dirección de las referencias. No recurras a un estilo preestablecido. Escribe .inspiration/direction.md (después del bloque del brief) con estos encabezados, citando los ids de las referencias entre corchetes después de cada decisión:

1. Línea conceptual. Una oración con la que un diseñador podría discutir, por ejemplo "una guía de campo, no un panel de control".
2. Anti-objetivos. De 3 a 5 cosas que esta página no debe parecer (incluye el predeterminado genérico que de otro modo producirías: héroe centrado, degradado púrpura, tres tarjetas con iconos, etc., si no sirven al brief).
3. Sistema tipográfico. Familias y roles (display, texto, UI, mono opcional), una escala de tamaños con px a 1440 y 390 de ancho, alturas de línea, tracking, mayúsculas/minúsculas. Usa fuentes que el proyecto pueda cargar legalmente (familias con licencia abierta o las fuentes con licencia del usuario). Un elemento de fuente de la biblioteca informa la clasificación y la combinación; no otorga una licencia. Si el presupuesto lo permite, suggest_pairing en un id de fuente ayuda.
4. Paleta. Hexes con roles (fondo, superficie, texto, texto atenuado, acento, colores de estado) y el contraste de cada par de texto. Opcionalmente ejecuta analyze_palette(hexes) o generate_palette(color) para una rampa.
5. Diseño y rejilla. Columnas, ancho máximo de contenido, medianiles, ritmo de espaciado de secciones, reglas de alineación, puntos de interrupción.
6. Secciones. La página ordenada, cada una con su función, el contenido que lleva del inventario y la referencia en la que se basa.
7. Imágenes y gráficos. Qué imágenes existen, qué crearás (diagramas, recortes, estilo de ilustración), qué evitar.
8. Movimiento. Dónde el movimiento ayuda a la comprensión, duraciones y curvas de easing, y el fallback para movimiento reducido. Por defecto, poco.
9. Detalle característico. Un movimiento memorable y realizable que provenga de una referencia y sea reinterpretado, no copiado.

Muestra al usuario la línea conceptual, los anti-objetivos y el detalle característico en un mensaje breve. Continúa a menos que se opongan o pidan aprobación primero.

Paso 6: Construcción

• Usa el stack y los componentes del proyecto. Si no hay proyecto, construye un index.html estático con CSS en línea (y JS mínimo).
• Comienza con tokens: propiedades personalizadas CSS para la escala tipográfica, el espaciado, los colores y los radios de la dirección. Luego las secciones, en orden de página.
• Contenido real del inventario. Cuando falte contenido, usa marcadores de posición claramente indicados; nunca inventes logotipos de clientes, testimonios, métricas o premios y los presentes como reales.
• HTML semántico: un h1, encabezados ordenados, alt en cada imagen significativa, estados de enfoque visibles, etiquetas en los campos de entrada.
• Construye móvil y escritorio juntos; verifica a 390 de ancho a medida que avanzas, no al final.

Paso 7: Bucle de observación y corrección

Lee references/critique.md para la rúbrica. Luego, hasta 3 rondas:

1. Renderiza. Ejecuta el inspector desde la carpeta de este skill (la carpeta que contiene este SKILL.md): node <carpeta-del-skill>/scripts/inspect.mjs <url-o-ruta-html> --out .inspiration-out/ronda-<n> Escribe page-1440.png, page-390.png y report.json (fuentes en uso, colores de texto y fondo, tamaños de encabezado, medida, desbordamiento, alt faltante, muestras de bajo contraste). Si falta Playwright, imprime la corrección de una línea (npx -y -p [email protected] node <carpeta-del-skill>/scripts/inspect.mjs ...). Si el anfitrión tiene su propio navegador o herramienta de captura de pantalla, también está bien.
2. Observa. Abre las capturas de pantalla y lee el informe. Compara cada sección con la referencia que cita y la página completa con la línea conceptual y los anti-objetivos.
3. Puntúa. Califica cada línea de la rúbrica de 0 a 2 y lista los 3 problemas más grandes, los más visibles primero. Escribe ambos en .inspiration/direction.md bajo "Ronda ".
4. Corrige esos 3, luego renderiza de nuevo.

Detente cuando cada línea de la rúbrica obtenga 2, después de la ronda 3, o cuando una ronda no cambie nada sustancial. Si ningún navegador puede ejecutarse, revisa el código contra la rúbrica, pide al usuario una captura de pantalla si puede dar una, y di claramente que no se realizó ninguna verificación visual.

Paso 8: Entrega

Informa al usuario, brevemente:

• Qué se construyó y dónde, y la línea conceptual.
• Las referencias usadas: id, título y enlace https://inspiration.vasa.works/item/<id>, cada una con la única cosa que aportó.
• Lo que la última ronda del inspector aún señala, si es que señala algo.
• Aproximadamente cuántas llamadas medidas usó la ejecución, y cualquier paso que se saltó o degradó (errores del servidor, el fallback image_url, la cuota).
• Ofrece: "¿Quieres guardar estas referencias en un tablero de Inspiration?" Solo si responde que sí, llama a save_to_board(title, ids=[...]) y comparte la URL del tablero que devuelve.

Cuota y errores

Lee references/library-rules.md la primera vez que una herramienta devuelva un error, quota_exhausted o capped. 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, subscription_required significa iniciar sesión (Paso 0), y el mismo error del servidor en dos herramientas diferentes significa modo degradado. Las llamadas con error cuentan para el presupuesto.

Sin la biblioteca

Cuando el MCP no está conectado (después de dar el paso de configuración una vez) y el usuario no ha pedido conectarse primero:

• Di una vez, claramente: "Continuando sin la biblioteca Inspiration, por lo que esta dirección no se basa en referencias."
• Salta los Pasos 2 a 4. No inventes ids de referencia, títulos, enlaces o descripciones, y no afirmes que un estilo provino de una referencia.
• Escribe .inspiration/direction.md solo a partir del brief, con "No se usaron referencias" al principio. Mantén los anti-objetivos y el detalle característico (inventados).

Referencias de este skill

• references/setup.md - instrucciones de instalación
• references/research.md - recetas de búsqueda y tabla de presupuesto
• references/specimen-sheet.md - formato de la ficha técnica
• references/critique.md - rúbrica de revisión visual
• references/library-rules.md - reglas de la biblioteca, manejo de cuotas y fallbacks
• scripts/inspect.mjs - script de inspección visual