lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill principiante claude-codecursorcodexdiseno

Elaya AI Design Skills: adapta una guía visual a tu marca

Construye una página de destino con criterios explícitos de tipografía, espaciado y contenido. Personaliza los valores de diseño de la skill para reutilizarlos.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: elige la skill

Desde la raíz del proyecto de destino, comprueba que tienes Git y acceso a .claude/skills/. Lee skills/landing-page-design/SKILL.md en el repositorio oficial. Para Claude Code el README publica:

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/

Sustituye <skill-name> por landing-page-design antes de ejecutar. Si la carpeta temporal ya existe, revisa su origen y reutilízala sin sobrescribir trabajo.

Paso 2: personaliza y utiliza

Adapta la sección de valores visuales en tu copia. Pide al agente una página concreta con tu contenido y responde a las preguntas de inicio.

Comprobación

Compara el HTML generado con tus fuentes, colores y espaciado acordados. Revisa una anchura móvil y una de escritorio antes de dar por válida la configuración.

Si algo falla

Si el resultado contradice la marca, revisa los valores predeterminados de la skill y las instrucciones del proyecto. Para otros arneses sigue la tabla de instalación del README.

Consulta el README oficial para el procedimiento completo y los cambios de versión.

ver en .md ¿Prefieres el recurso entero?

Qué es

AI Design Skills es la colección de Elaya Design para orientar tareas de diseño con agentes. Cada skill vive en una carpeta independiente; para una página de destino se utiliza landing-page-design.

Para qué te sirve

  • Cuando cada página de campaña acaba con una tipografía distinta.
  • Cuando quieres dar al agente una secuencia de preguntas y criterios visuales antes de pedir HTML.

Cómo funciona

La skill combina preguntas iniciales, estructura de página, redacción y reglas de composición. El autor concentra los valores visuales en una sección del archivo para que puedas adaptarlos. Puedes mantener una bifurcación con tu marca y conservar el resto del procedimiento.

Antes de empezar

Necesitas un agente que lea reglas Markdown. Claude Code tiene una ruta de copia a .claude/skills/; otros arneses requieren su adaptación documentada. Prepara fuentes, colores y referencias propias antes de personalizarla.

Límites y alternativas

La colección incluye valores de diseño que pueden entrar en conflicto con una identidad existente. Revisa la skill antes de instalarla y documenta tus prioridades. No es un sistema que garantice calidad o conversión: comprueba texto, adaptación a distintos tamaños de pantalla y accesibilidad. Para una interfaz existente puede encajar mejor una revisión acotada.

Recursos