ckm:design

Descripción general

¿Qué es ckm:design?

ckm:design es una habilidad unificada, pensada primero para diseño, que ayuda a tu agente a planificar y producir recursos visuales a lo largo de toda la experiencia de marca. Está pensada para flujos de trabajo de UI/UX y branding, no solo para volcar código, y combina referencias estructuradas con scripts locales opcionales para cubrir:

• Identidad de marca y dirección visual
• Design tokens y especificaciones de design system
• Guía de estilos de UI para shadcn/ui y Tailwind
• Diseño de logotipos y generación de logos con IA (55 estilos)
• Entregables y maquetas de programas de identidad corporativa (CIP)
• Presentaciones y pitch decks en HTML (con Chart.js)
• Diseño de banners para redes sociales, anuncios, web e impresión (22 estilos, matriz completa de tamaños)
• Diseño de iconos con SVG generados por IA (15 estilos)
• Fotos sociales e imágenes de marketing para las principales plataformas

La habilidad se entrega con material de referencia detallado y tablas de datos para que el agente pueda hacer recomendaciones concretas y listas para implementar sin que tengas que buscar manualmente tablas de tamaños o estándares de marca.

¿Para quién es ckm:design?

ckm:design encaja bien si eres:

• Un diseñador UI/UX que quiere un asistente que hable en términos de flujos, componentes, tokens y dirección de arte.
• Un desarrollador frontend que necesita tamaños exactos de banners, especificaciones de iconos o estructuras HTML de slides, manteniendo alineados código y diseño.
• Un responsable de marca o marketing que planifica logos, despliegues de CIP, campañas sociales y decks para presentaciones.
• Un founder o miembro de un equipo pequeño que necesita orientación integral de marca y UI pero no cuenta con un departamento de diseño completo.

Si solo necesitas generación de código sin justificación de diseño, puede que una habilidad más ligera y solo de ingeniería sea mejor opción. ckm:design está pensada para escenarios donde importan la calidad visual, la consistencia y el encaje con la marca.

¿Qué problemas resuelve ckm:design?

Usando las referencias y datos incluidos, ckm:design ayuda a tu agente a:

• Estandarizar la salida de marca: alinear logos, banners, fotos sociales y activos CIP bajo un sistema visual coherente.
• Acertar con tamaños y formatos a la primera: usando tablas específicas por plataforma para redes sociales, Google Display Network, héroes web e impresión.
• Escalar programas de identidad corporativa: mapeando industrias, estilos y entregables para grandes conjuntos CIP.
• Conectar diseño e implementación: enlazando decisiones de marca con design tokens, variables CSS, shadcn/ui y uso de Tailwind.
• Prototipar rápido: con plantillas de slides en HTML y maquetas CIP que se pueden revisar mucho antes de tener un design system completo.

---

Cómo usarla

1. Instalar la habilidad ckm:design

Instala ckm:design en tu configuración de habilidades compatible con Claude desde el repositorio upstream:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Esto descarga la habilidad design del repositorio nextlevelbuilder/ui-ux-pro-max-skill en tu directorio local ~/.claude/skills/design (o equivalente en tu entorno).

Tras la instalación deberías ver:

• SKILL.md – descripción general y guía de enrutamiento.
• data/ – datasets CSV para CIP, estilos de logos e iconos.
• references/ – la base de conocimiento principal para tareas de diseño.
• scripts/ – utilidades Python opcionales para CIP y generación de iconos.

2. Entender el modelo de enrutamiento de diseño

ckm:design actúa como punto de entrada de diseño y enruta el trabajo a sub-habilidades especializadas según se describe en references/design-routing.md y SKILL.md.

Dominios clave de diseño:

• Identidad de marca → normalmente gestionada por una habilidad brand separada.
• Design systems y tokens → a través de la habilidad design-system.
• Implementación de UI (shadcn/ui, Tailwind) → a través de la habilidad ui-styling.
• Creación de logos → referencias de diseño de logos integradas.
• Diseño CIP → entregables y maquetas de identidad corporativa.
• Slides → presentaciones HTML usando Chart.js.
• Diseño de banners → banners para redes sociales, anuncios, web e impresión.
• Diseño de iconos → generación de iconos SVG a través de scripts.

En los prompts puedes indicar el tipo de diseño usando el patrón argument-hint de la habilidad:

ckm:design [design-type] [context]

Ejemplo:

• ckm:design logo fintech SaaS brand for B2B dashboards
• ckm:design cip rebrand for hospitality hotel chain
• ckm:design banner LinkedIn company cover product launch

3. Usar las referencias para decisiones de UI/UX y marca

La fuerza de ckm:design está en sus archivos de referencia estructurados. Úsalos como fuente canónica cuando pidas especificaciones a tu agente.

Planificación de UI/UX y design system

Aunque la ejecución pueda enrutar a design-system o ui-styling, puedes usar ckm:design para:

• Hablar de tokens y especificaciones a nivel de diseño (colores, tipografía, espaciados, estados).
• Mapear colores y tipografía de marca a variables CSS y Tailwind config.
• Planificar el comportamiento y los estados de los componentes antes de implementarlos.

El agente puede combinar la intención de diseño de alto nivel de ckm:design con habilidades centradas en código para la implementación.

Creatividades para banners y campañas

Para campañas y banners de UI, apóyate en references/banner-sizes-and-styles.md:

• Elegir los tamaños correctos por plataforma (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, Google Display Network, sitio web, email y formatos de impresión).
• Elegir entre 22 estilos de dirección de arte (p. ej., Minimalist, Corporate Minimal, Luxury Premium, Modern Tech, Warm Organic, Bold Dynamic).
• Pedir al agente que vincule mensaje y layout con ubicaciones concretas como:
  • Facebook cover vs event cover
  • LinkedIn company cover vs personal banner
  • GDN billboard vs medium rectangle
  • Website hero vs blog header

Ejemplo de prompt para planificación de campaña:

Using ckm:design, plan a full banner set for a modern tech SaaS launch, including LinkedIn company cover, Twitter header, Instagram post, and a Google Display billboard. Use Modern Tech art direction and map each asset to the correct pixel size.

Despliegues de Corporate Identity Program (CIP)

El soporte CIP se cubre en:

• references/cip-deliverable-guide.md – qué incluir en un sistema de identidad completo.
• references/cip-design.md – cómo los datos y scripts soportan más de 50 entregables, 20 estilos y 20 industrias.
• references/cip-style-guide.md – arquetipos de estilo detallados (Corporate Minimal, Modern Tech, Luxury Premium, Classic Traditional, Warm Organic, Bold Dynamic, etc.).
• references/cip-prompt-engineering.md – estructuras de prompts para generación de maquetas.

Úsalos para:

• Definir el alcance de un rebranding (tarjetas de visita, señalética, vehículos, ropa, activos digitales, eventos y más).
• Alinear cada entregable con una guía de estilo adecuada a la industria.
• Generar prompts altamente estructurados para maquetas que un modelo Gemini u otro motor de imágenes pueda interpretar de forma consistente.

Ejemplo de prompt de alto nivel:

Use ckm:design to create a CIP plan for a premium hospitality brand. Choose a suitable style from the CIP style guide and list all recommended deliverables, from stationery to vehicle branding and trade show assets.

4. Generar briefs y maquetas CIP con scripts (opcional)

Si quieres ir más allá de la planificación conceptual y generar realmente maquetas CIP usando los scripts Python incluidos, sigue references/cip-design.md.

Asegúrate de tener Python 3 instalado y acceso a un modelo Gemini compatible según tu propia toolchain.

4.1. Buscar datos CIP y crear un brief

Usa el script de búsqueda con BM25 para explorar entregables, estilos e industrias y generar un brief inicial:

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

Puedes buscar dominios específicos:

# Deliverables
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable

# Design styles
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style

# Industry guidelines
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry

# Mockup contexts
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

Los archivos CSV en data/cip/ almacenan los entregables, industrias, estilos y contextos de mockup que usa esta utilidad de búsqueda.

4.2. Generar imágenes de maquetas CIP

references/cip-design.md incluye comandos para usar scripts/cip/generate.py y dirigir la generación de maquetas basada en Gemini:

# Mockup de un solo entregable con logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Conjunto CIP completo con logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

Usa tus propias claves de modelo y configuración de entorno según sea necesario; ckm:design aporta la estructura de datos, el andamiaje de prompts y los entry points de scripts, no el modelo en sí.

4.3. Renderizar presentaciones HTML de los resultados CIP

Cuando tengas datos de maquetas, puedes generar una presentación HTML usando:

python3 ~/.claude/skills/design/scripts/cip/render-html.py

Esto generará un resumen HTML que puedes enviar a stakeholders como visión general visual del sistema de identidad.

5. Diseñar logos e iconos con soporte de IA

ckm:design también incluye guías y scripts específicos para trabajo de logos e iconos.

5.1. Planificación de logos y prompt engineering

Apóyate en:

• references/logo-design.md – fundamentos de composición de logos.
• references/logo-color-psychology.md – elección de colores según personalidad de marca e industria.
• references/logo-style-guide.md – cómo elegir entre los 55 estilos de logo disponibles.
• references/logo-prompt-engineering.md – estructuras de prompt recomendadas para generación de logos con Gemini.

Usa estas referencias cuando pidas a tu agente:

• Definir un sistema de logos (versión principal, apilada, solo icono, versiones monocromas).
• Elegir colores y tipografía alineados con tu estrategia de marca.
• Redactar prompts de IA lo bastante detallados como para producir candidatos de logo aprovechables.

La capacidad de logos integrada está pensada para trabajar junto con las herramientas CIP y de banners, de modo que tu marca gráfica se mantenga coherente en todos los puntos de contacto.

5.2. Diseño de iconos con salida SVG

references/icon-design.md documenta cómo generar iconos SVG con IA usando scripts/icon/generate.py y Gemini 3.1 Pro Preview.

Ejemplos de comandos:

# Iconos simples
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"

# Icono nombrado en una categoría
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

# Generación por lotes
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

# Múltiples tamaños
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

# Ver estilos y categorías disponibles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-styles
python3 ~/.claude/skills/design/scripts/icon/generate.py --list-categories

Esto es especialmente útil para equipos de UI/UX que necesitan sets de iconos cohesivos alineados con el mismo lenguaje visual que sus logos y materiales CIP.

6. Crear decks de slides en HTML y visuales para marketing

ckm:design incluye un conjunto completo de referencias para diseño de slides, ideal para demos de producto, decks de ventas y presentaciones internas:

• references/slides.md – visión general del sistema de slides.
• references/slides-create.md – cómo pasar de un esquema a un deck.
• references/slides-layout-patterns.md – layouts habituales a nivel de página.
• references/slides-copywriting-formulas.md – marcos de mensajes para claridad y persuasión.
• references/slides-strategies.md – estrategias de estructura narrativa.
• references/slides-html-template.md – plantilla base HTML para slides (con integración de Chart.js).

Con esto puedes:

• Pedir a tu agente que cree un esquema de slides y asigne secciones a patrones de layout.
• Generar decks de slides en HTML que respeten tus tokens y colores de marca.
• Añadir visualizaciones con Chart.js para métricas y dashboards.

Ejemplo de prompt:

Using ckm:design, draft a 12-slide product launch deck for a B2B SaaS. Use the HTML slide template and suggest appropriate Chart.js charts for the metrics slides.

7. Fotos sociales y campañas multiplataforma

references/social-photos-design.md ofrece guía para diseñar fotos sociales y recursos multiplataforma.

La habilidad de diseño te ayuda a:

• Coordinar fotos de perfil, imágenes de portada y plantillas de publicaciones en plataformas como Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads y Google Ads.
• Usar flujos de trabajo de HTML-a-screenshot para iterar rápido visuales sociales con tipografía y layout consistentes.
• Conectar cada recurso social con tu sistema de marca y CIP principal.

---

FAQ

¿Cuándo es buena opción ckm:design?

ckm:design es especialmente adecuada cuando:

• Necesitas dirección visual de extremo a extremo que abarque UI/UX, branding, CIP y marketing.
• Quieres que tu agente hable en términos de design tokens, dirección de arte y sistemas de marca, no solo fragmentos de CSS.
• Estás planificando un rebranding, lanzamiento de producto o despliegue de un design system y necesitas un enfoque consistente y respaldado por referencias.
• Quieres combinar generación de imágenes con IA (logos, iconos, maquetas CIP, fotos sociales) con supervisión humana de diseño.

¿Cuándo no es la herramienta adecuada ckm:design?

Puede no ser ideal si:

• Solo necesitas ayuda puramente backend o algorítmica sin componente de diseño.
• Buscas un generador de logos de un solo paso sin considerar sistemas de marca más amplios.
• No tienes la capacidad o interés de ejecutar las herramientas Python opcionales (la habilidad sigue siendo útil como guía sin los scripts, pero dependerás de tu propia infraestructura de generación de imágenes).

¿ckm:design requiere Figma o una app de diseño concreta?

No. ckm:design es independiente de la herramienta. Proporciona estructura y guía que puedes aplicar en:

• Figma u otras herramientas similares para layout y prototipado de UI/UX.
• Codebases frontend que usen shadcn/ui y Tailwind.
• Herramientas de presentación o HTML puro para slides.
• Cualquier editor de imágenes o pipeline de generación con IA que pueda consumir los prompts y especificaciones generados.

Puedes mantener tu stack de diseño actual; la habilidad actúa como capa de decisión y especificación por encima.

¿Puedo usar ckm:design sin ejecutar los scripts de Python?

Sí. El valor principal de ckm:design está en sus referencias estructuradas y archivos de datos:

• Puedes apoyarte totalmente en references/*.md y data/*.csv a través del agente para planificación y especificación.
• Los scripts en scripts/cip/ y scripts/icon/ son aceleradores opcionales para equipos que quieren automatizar la generación de maquetas y SVG.

Si no ejecutas los scripts, seguirás obteniendo:

• Tamaños, estilos y listas de entregables correctos.
• Marcos de prompts para usar en tus propias herramientas de imágenes con IA.
• Guía consistente para alinear marca, UI y marketing.

¿Cómo funciona ckm:design junto con otras habilidades de diseño?

El repositorio está organizado como un conjunto de habilidades de diseño que colaboran entre sí. ckm:design:

• Actúa como capa de enrutamiento y orquestación para tareas visuales.
• Delega el trabajo profundo de identidad de marca a brand.
• Delega la arquitectura de tokens y especificaciones de componentes a design-system.
• Delega los detalles de implementación (clases de shadcn/ui, Tailwind) a ui-styling.

En la práctica:

1. Comienzas con ckm:design para enmarcar el problema visual y elegir la sub-habilidad adecuada.
2. Usas la habilidad especializada correspondiente para la ejecución detallada.
3. Vuelves a ckm:design para garantizar que todos los resultados se mantengan coherentes con el plan general de marca y CIP.

¿Dónde debería mirar primero después de instalar ckm:design?

Para una orientación rápida pero completa:

1. Abre SKILL.md para entender el alcance y los flujos de trabajo principales.
2. Revisa references/design-routing.md para ver cómo se reparten las tareas dentro de la familia de habilidades de diseño.
3. Echa un vistazo a las siguientes referencias clave según tu necesidad inmediata:
   • references/banner-sizes-and-styles.md – para campañas y banners.
   • references/cip-deliverable-guide.md y references/cip-style-guide.md – para sistemas de identidad corporativa.
   • references/logo-design.md y references/logo-color-psychology.md – para proyectos de logo.
   • references/slides.md y references/slides-html-template.md – para decks y presentaciones.
   • references/social-photos-design.md – para campañas sociales.

Con esto tendrás contexto suficiente para decidir cómo aplicar ckm:design en tu flujo de trabajo de UI/UX, branding o marketing antes de profundizar en cualquiera de los scripts opcionales.