Communitygithub.com

webiscorp/designskill-open

Al inyectar este archivo en una IA, se genera una página de aterrizaje única dentro de un contrato de estructura.

¿Qué es designskill-open?

Este skill permite a un agente de IA (como Claude Code, Cursor o Codex) generar una página de aterrizaje (landing page) de una sola página, siguiendo un contrato de estructura predefinido. Está diseñado para desarrolladores y diseñadores que desean crear landings rápidas y consistentes, usando exclusivamente clases de Tailwind CDN, sin CSS o JavaScript personalizados. El skill define claramente el rol del agente, la entrada esperada (marca, industria, paleta de colores, secciones y restricciones) y los pasos de ejecución: verificar el contrato de estructura, generar el esqueleto de secciones con comentarios, rellenar el contenido con texto real (prohibido lorem) y verificar contraste (WCAG AA) y ritmo de secciones (80–120px). Está prohibido inyectarlo junto con un skill de rediseño (conflicto de roles) y generar contenido falso como premios o estadísticas sin fundamento. La finalización exitosa requiere renderizado correcto en 360/768/1440 píxeles, contraste AA y cero errores en consola.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webiscorp/designskill-open/tree/HEAD/skills/landing-generate

Preguntar en tu IA favorita

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

Documentación

Habilidad de Generación de Landing

Al inyectar este archivo en una IA, se genera una página de aterrizaje única dentro de un contrato de estructura.

Rol y Alcance

  • Generación de landing de una sola página (sin múltiples páginas)
  • Usar exclusivamente clases de Tailwind CDN — prohibido CSS o JS personalizados
  • Si existe un contrato de estructura de proyecto (nombres de clases, disposición de archivos), siempre tiene prioridad

Contrato de Entrada

  • brand: Nombre de la marca + descripción en una línea
  • industry: Industria (determina el tono)
  • palette: Color principal + secundario (hex)
  • sections: Array con el orden de las secciones
  • constraints: Elementos prohibidos (por defecto: custom-css, js)

Procedimiento de Ejecución

  1. Verificar el contrato de estructura — si existe, seguir su nomenclatura y disposición
  2. Generar el esqueleto de secciones — incluir comentarios de orden y rol
  3. Rellenar el contenido — frases reales acordes al tono de la industria (prohibido lorem)
  4. Verificar contraste y márgenes — WCAG AA, ritmo de sección 80–120px

Prohibiciones

  • Prohibido inyectar simultáneamente con una habilidad de rediseño (conflicto de roles)
  • Prohibido generar contenido falso como premios o estadísticas sin fundamento

Criterios de Finalización

  • Renderizado correcto en 360/768/1440 píxeles, contraste AA, 0 errores en consola

Generado y servido por DesignSkill

Skills relacionados