Communitygithub.com

AbdlrahmanSaberAbdo/mockup

Crea opciones visuales rápidas para un negocio (direcciones de logotipo, paletas, páginas de aterrizaje, pantallas de aplicaciones, páginas de tienda, menús, señalización, publicaciones) una al lado de la otra, para que el usuario pueda comparar y elegir.

¿Qué es mockup?

Esta habilidad permite a un agente de IA generar rápidamente múltiples opciones visuales para un negocio, como direcciones de logotipo, paletas de colores, páginas de aterrizaje, pantallas de aplicaciones, páginas de tienda, menús, señalización y plantillas de publicaciones, presentándolas lado a lado para facilitar la comparación visual. Es útil para emprendedores, dueños de negocios o equipos de marketing que necesitan explorar diferentes direcciones de diseño sin invertir tiempo en herramientas complejas. Funciona en plataformas como Claude Code o Cursor, donde el agente puede leer un documento central (hub doc) o recibir instrucciones directas del usuario, incluyendo imágenes de referencia o paletas de colores. El proceso implica planificar 3-4 direcciones verdaderamente distintas, diseñarlas en un solo lienzo con copia real y marcadores de posición, verificar el contraste de accesibilidad, y luego registrar la elección del usuario para generar tareas de seguimiento como archivos finales, versiones planas o favicons.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AbdlrahmanSaberAbdo/business-skills/tree/main/skills/mockup

Preguntar en tu IA favorita

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

Documentación

¿Qué hace mockup?

Úselo cuando el usuario deba elegir mirando: direcciones de logotipo, una paleta, una página de aterrizaje, pantallas de aplicaciones, una página de tienda, un menú o volante, plantillas de publicaciones. Funciona con o sin un documento central.

Pasos

  1. Lea el Resumen del documento central para obtener el nombre, la audiencia, la sensación, la paleta, el logotipo y lo que se debe evitar. Si el usuario proporcionó imágenes de referencia o una paleta, use los colores exactos (muestree valores hexadecimales de las imágenes cuando sea posible).
  2. Planifique 3–4 direcciones que realmente difieran, no pequeñas variaciones, y cada versión que cada una necesite (por ejemplo, móvil y escritorio; árabe e inglés; tamaños cuadrado e historia).
  3. Colóquelos uno al lado del otro en un solo lienzo o página, en filas, para que se comparen de un vistazo. Use texto real del resumen y marcadores de posición como [PRECIO] para los datos faltantes.
  4. Verifique el contraste: 4.5:1 para el texto del cuerpo, 3:1 para texto grande. Si un par de paleta falla, nómbrelo y diga cómo usarlo en su lugar (por ejemplo, solo para decoración).
  5. Una línea por dirección: la idea y su principal fortaleza o debilidad. Pida al usuario que elija.
  6. Registre la elección con to-brief y agregue seguimientos con to-tasks (archivos finales, una versión plana, un favicon).

Reglas

  • Nunca copie el logotipo, los personajes o el diseño propietario de otra marca.
  • Estas son direcciones; diga cuándo el trabajo final necesita un archivo vectorial o un diseñador.
  • Las imágenes generadas y los efectos 3D fallan en tamaños pequeños. Siempre planifique una versión plana para los iconos.

Individual skills in this repo

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

Skills relacionados