CommunityImagengithub.com

ElKrapulito/calucha-landing

Habilidad integral de diseño: identidad de marca, tokens de diseño, estilo UI, generación de logotipos (55 estilos, IA Gemini), programa de identidad corporativa (50 entregables, maquetas CIP), presentaciones HTML (Chart.js), diseño de banners (22 estilos, redes/ads/web/impresión), diseño de iconos (15 estilos, SVG, Gemini 3.1 Pro), fotos sociales (HTML→captura, multiplataforma).

¿Qué es calucha-landing?

Esta habilidad unificada de diseño permite a un agente de IA manejar un espectro completo de tareas de diseño gráfico e identidad de marca, desde la conceptualización hasta la entrega de activos. Incluye la generación de logotipos con más de 55 estilos y 30 paletas de colores, impulsada por modelos Gemini Nano y Gemini 3.1 Pro. También abarca la creación de programas completos de identidad corporativa (CIP) con más de 50 entregables y maquetas, presentaciones HTML interactivas con Chart.js, diseño de banners para múltiples plataformas (redes sociales, anuncios, web e impresión) con 22 estilos de dirección de arte, y la generación de fotos para redes sociales exportables como capturas de pantalla. Para el diseñador o desarrollador, esta habilidad es útil porque centraliza flujos de trabajo de diseño complejos en un solo conjunto de comandos y scripts de Python, eliminando la necesidad de cambiar entre múltiples herramientas. Se integra con sub-habilidades externas como brand, design-system y ui-styling, y utiliza herramientas como chrome-devtools y ai-multimodal para una ejecución eficiente. El agente puede investigar referencias, generar variaciones de diseño y presentar resultados de manera interactiva, todo dentro del entorno de la línea de comandos.

Compatible con✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/ElKrapulito/calucha-landing/tree/HEAD/.claude/skills/design

Installed? Explore more Imagen skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Diseño

Habilidad de diseño unificada: marca, tokens, UI, logotipo, CIP, diapositivas, banners, fotos sociales, iconos.

Cuándo Usarlo

  • Identidad de marca, voz, activos
  • Tokens y especificaciones del sistema de diseño
  • Estilo UI con shadcn/ui + Tailwind
  • Diseño de logotipos y generación con IA
  • Entregables del programa de identidad corporativa (CIP)
  • Presentaciones y pitch decks
  • Diseño de banners para redes sociales, anuncios, web e impresión
  • Fotos sociales para Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Enrutamiento de Sub-habilidades

TareaSub-habilidadDetalles
Identidad de marca, voz, activosbrandHabilidad externa
Tokens, especificaciones, variables CSSdesign-systemHabilidad externa
shadcn/ui, Tailwind, códigoui-stylingHabilidad externa
Creación de logotipos, generación con IALogotipo (integrado)references/logo-design.md
Maquetas CIP, entregablesCIP (integrado)references/cip-design.md
Presentaciones, pitch decksDiapositivas (integrado)references/slides.md
Banners, portadas, encabezadosBanner (integrado)references/banner-sizes-and-styles.md
Imágenes/fotos para redes socialesFotos sociales (integrado)references/social-photos-design.md
Iconos SVG, conjuntos de iconosIcono (integrado)references/icon-design.md

Diseño de Logotipos (Integrado)

Más de 55 estilos, 30 paletas de colores, 25 guías por industria. Modelos Gemini Nano Banana.

Logotipo: Generar Brief de Diseño

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logotipo: Buscar Estilos/Colores/Industrias

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logotipo: Generar con IA

SIEMPRE genera las imágenes de logotipo de salida con fondo blanco.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

IMPORTANTE: Cuando los scripts fallen, intenta corregirlos directamente.

Después de la generación, SIEMPRE pregunta al usuario sobre la vista previa HTML mediante AskUserQuestion. Si es afirmativo, invoca /ui-ux-pro-max para la galería.

Diseño CIP (Integrado)

Más de 50 entregables, 20 estilos, 20 industrias. Gemini Nano Banana (Flash/Pro).

CIP: Generar Brief

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

CIP: Buscar Dominios

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Generar Maquetas

# Con logotipo (RECOMENDADO)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

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

# Modelo Pro (texto 4K)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Sin logotipo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Modelos: flash (predeterminado, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: Renderizar Presentación HTML

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Consejo: Si no existe logotipo, usa primero la sección de Diseño de Logotipos.

Diapositivas (Integrado)

Presentaciones HTML estratégicas con Chart.js, tokens de diseño, fórmulas de copywriting.

Carga references/slides-create.md para el flujo de trabajo de creación.

Diapositivas: Base de Conocimiento

TemaArchivo
Guía de Creaciónreferences/slides-create.md
Patrones de Diseñoreferences/slides-layout-patterns.md
Plantilla HTMLreferences/slides-html-template.md
Copywritingreferences/slides-copywriting-formulas.md
Estrategiasreferences/slides-strategies.md

Diseño de Banners (Integrado)

22 estilos de dirección artística en redes, anuncios, web e impresión. Utiliza las habilidades frontend-design, ai-artist, ai-multimodal, chrome-devtools.

Carga references/banner-sizes-and-styles.md para la referencia completa de tamaños y estilos.

Banner: Flujo de Trabajo

  1. Recopilar requisitos mediante AskUserQuestion — propósito, plataforma, contenido, marca, estilo, cantidad
  2. Investigar — Activar ui-ux-pro-max, navegar por Pinterest en busca de referencias
  3. Diseñar — Crear banner HTML/CSS con frontend-design, generar visuales con ai-artist/ai-multimodal
  4. Exportar — Captura de pantalla a PNG en dimensiones exactas mediante chrome-devtools
  5. Presentar — Mostrar todas las opciones una al lado de la otra, iterar según comentarios

Banner: Referencia Rápida de Tamaños

PlataformaTipoTamaño (px)
FacebookPortada820 x 312
Twitter/XCabecera1500 x 500
LinkedInPersonal1584 x 396
YouTubeArte de canal2560 x 1440
InstagramHistoria1080 x 1920
InstagramPublicación1080 x 1080
Google AdsRectángulo mediano300 x 250
Sitio WebHero1920 x 600-1080

Banner: Principales Estilos Artísticos

EstiloMejor Para
MinimalistaSaaS, tecnología
Tipografía audazAnuncios
DegradadoMarcas modernas
Basado en fotografíaEstilo de vida, e-com
GeométricoTecnología, fintech
GlassmorfismoSaaS, apps
Neón/CiberpunkGaming, eventos

Banner: Reglas de Diseño

  • Zonas seguras: contenido crítico en el 70-80% central
  • Una CTA por banner, esquina inferior derecha, altura mínima de 44px
  • Máximo 2 fuentes, cuerpo mínimo 16px, titular ≥32px
  • Texto inferior al 20% para anuncios (Meta penaliza)
  • Impresión: 300 DPI, CMYK, sangrado de 3-5mm

Diseño de Iconos (Integrado)

15 estilos, 12 categorías. Gemini 3.1 Pro Preview genera salida de texto SVG.

Icono: Generar un Solo Icono

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"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icono: Generar Variaciones por Lote

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icono: Exportación a Múltiples Tamaños

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icono: Principales Estilos

EstiloMejor Para
contorneadoInterfaces UI, apps web
rellenoApps móviles, barras de navegación
duotonoMarketing, páginas de aterrizaje
redondeadoApps amigables, salud
afiladoTecnología, fintech, empresarial
planoMaterial design, estilo Google
degradadoMarcas modernas, SaaS

Modelo: gemini-3.1-pro-preview — salida solo texto (SVG es texto XML). No se necesita API de generación de imágenes.

Fotos Sociales (Integrado)

Diseño de imágenes sociales multiplataforma: HTML/CSS → exportación a captura de pantalla. Utiliza las habilidades ui-ux-pro-max, brand, design-system, chrome-devtools.

Carga references/social-photos-design.md para tamaños, plantillas y mejores prácticas.

Fotos Sociales: Flujo de Trabajo

  1. Orquestar — habilidad project-management para tareas TODO; subagentes paralelos para trabajo independiente
  2. Analizar — Analizar la instrucción: tema, plataformas, estilo, contexto de marca, elementos de contenido
  3. Idear — 3-5 conceptos, presentar mediante AskUserQuestion
  4. Diseñar — /ckm:brand → /ckm:design-system → invocar aleatoriamente /ck:ui-ux-pro-max O /ck:frontend-design; HTML por idea × tamaño
  5. Exportar — Captura de pantalla con chrome-devtools o Playwright en píxeles exactos (deviceScaleFactor 2x)
  6. Verificar — Usar Chrome MCP o la habilidad chrome-devtools para inspeccionar visualmente los diseños exportados; corregir problemas de diseño/estilo y reexportar
  7. Informar — Resumen en plans/reports/ con decisiones de diseño
  8. Organizar — Invocar la habilidad assets-organizing para clasificar los archivos de salida y los informes

Fotos Sociales: Tamaños Clave

PlataformaTamaño (px)PlataformaTamaño (px)
IG Pub.1080×1080FB Pub.1200×630
IG Historia1080×1920X Pub.1200×675
IG Carrusel1080×1350LinkedIn1200×627
YT Miniatura1280×720Pinterest1000×1500

Flujos de Trabajo

Paquete de Marca Completo

  1. Logotipo → scripts/logo/generate.py → Generar variantes de logotipo
  2. CIP → scripts/cip/generate.py --logo ... → Crear maquetas de entregables
  3. Presentación → Cargar references/slides-create.md → Construir pitch deck

Nuevo Sistema de Diseño

  1. Marca (habilidad brand) → Definir colores, tipografía, voz
  2. Tokens (habilidad design-system) → Crear capas de tokens semánticos
  3. Implementar (habilidad ui-styling) → Configurar Tailwind, shadcn/ui

Referencias

TemaArchivo
Enrutamiento de Diseñoreferences/design-routing.md
Guía de Diseño de Logotiposreferences/logo-design.md
Estilos de Logotiposreferences/logo-style-guide.md
Colores de Logotiposreferences/logo-color-psychology.md
Instrucciones para Logotiposreferences/logo-prompt-engineering.md
Guía de Diseño CIPreferences/cip-design.md
Entregables CIPreferences/cip-deliverable-guide.md
Estilos CIPreferences/cip-style-guide.md
Instrucciones CIPreferences/cip-prompt-engineering.md
Creación de Diapositivasreferences/slides-create.md
Diseños de Diapositivasreferences/slides-layout-patterns.md
Plantilla de Diapositivasreferences/slides-html-template.md
Copywriting de Diapositivasreferences/slides-copywriting-formulas.md
Estrategia de Diapositivasreferences/slides-strategies.md
Tamaños y Estilos de Bannersreferences/banner-sizes-and-styles.md
Guía de Fotos Socialesreferences/social-photos-design.md
Guía de Diseño de Iconosreferences/icon-design.md

Scripts

ScriptPropósito
scripts/logo/search.pyBuscar estilos, colores e industrias de logotipos
scripts/logo/generate.pyGenerar logotipos con Gemini AI
scripts/logo/core.pyMotor de búsqueda BM25 para datos de logotipos
scripts/cip/search.pyBuscar entregables, estilos e industrias CIP
scripts/cip/generate.pyGenerar maquetas CIP con Gemini
scripts/cip/render-html.pyRenderizar presentación HTML desde maquetas CIP
scripts/cip/core.pyMotor de búsqueda BM25 para datos CIP
scripts/icon/generate.pyGenerar iconos SVG con Gemini 3.1 Pro

Prerrequisitos

Python: Esta habilidad usa scripts de Python. En Windows, usa python en lugar de python3 (p. ej., python scripts/logo/search.py en lugar de python3 scripts/logo/search.py).

Verifica si Python está instalado:

python3 --version || python --version

Configuración

export GEMINI_API_KEY="tu-clave"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Nota para Windows: Usa python en lugar de pip cuando sea necesario (p. ej., python -m pip install ...).

Integración

Sub-habilidades externas: brand, design-system, ui-styling Habilidades relacionadas: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

ElKrapulito/calucha-landing

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

ElKrapulito/calucha-landing

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

ElKrapulito/calucha-landing

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

ElKrapulito/calucha-landing

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

ElKrapulito/calucha-landing

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

ElKrapulito/calucha-landing

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

Skills relacionados

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Imagen skills