CommunityImagemgithub.com

ElKrapulito/calucha-landing

Skill de design abrangente: identidade visual, tokens de design, estilos de UI, geração de logotipos (55 estilos, IA Gemini), programa de identidade corporativa (50 entregáveis, mockups CIP), apresentações HTML (Chart.js), design de banners (22 estilos, social/ads/web/impressão), design de ícones (15 estilos, SVG, Gemini 3.1 Pro), fotos para redes sociais (HTML→captura de tela, multiplataforma). Ações: criar logotipo, criar CIP, gerar mockups, construir slides, criar banner, gerar ícone, criar fotos sociais, imagens para redes sociais, identidade visual, sistema de design. Plataformas: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

O que é calucha-landing?

Este skill unificado de design capacita agentes de IA a executar uma ampla gama de tarefas criativas, desde identidade visual e sistemas de design até a geração de logotipos, programas de identidade corporativa (CIP), apresentações em HTML com Chart.js, banners para mídias sociais e anúncios, ícones SVG e fotos para plataformas como Instagram, Facebook e LinkedIn. Ele utiliza modelos de IA Gemini (Nano Banana, Flash, Pro e 3.1 Pro Preview) e integra scripts Python para busca e geração de ativos visuais, garantindo resultados consistentes e profissionais. O skill é modular, roteando tarefas específicas para sub-skills internas ou externas (como brand, design-system e ui-styling), e inclui workflows completos para pacotes de marca e criação de sistemas de design. Ele é útil para desenvolvedores e designers que desejam automatizar a produção de conteúdo visual multiplataforma com alta qualidade, economizando tempo e mantendo a coerência da marca.

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

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

Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Design

Skill de design unificado: marca, tokens, UI, logotipo, CIP, slides, banners, fotos sociais, ícones.

Quando Usar

  • Identidade da marca, voz, ativos
  • Tokens e especificações do sistema de design
  • Estilização de UI com shadcn/ui + Tailwind
  • Design e geração de logotipos com IA
  • Entregáveis do programa de identidade corporativa (CIP)
  • Apresentações e pitches
  • Design de banners para mídias sociais, anúncios, web e impressão
  • Fotos sociais para Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Roteamento de Sub-skills

TarefaSub-skillDetalhes
Identidade da marca, voz, ativosbrandSkill externo
Tokens, especificações, variáveis CSSdesign-systemSkill externo
shadcn/ui, Tailwind, códigoui-stylingSkill externo
Criação de logotipo, geração com IALogo (integrado)references/logo-design.md
Mockups CIP, entregáveisCIP (integrado)references/cip-design.md
Apresentações, pitchesSlides (integrado)references/slides.md
Banners, capas, cabeçalhosBanner (integrado)references/banner-sizes-and-styles.md
Imagens/fotos para mídias sociaisFotos Sociais (integrado)references/social-photos-design.md
Ícones SVG, conjuntos de íconesÍcone (integrado)references/icon-design.md

Design de Logotipo (Integrado)

Mais de 55 estilos, 30 paletas de cores, 25 guias por setor. Modelos Gemini Nano Banana.

Logotipo: Gerar Brief de Design

python3 ~/.claude/skills/design/scripts/logo/search.py "startup de tecnologia moderno" --design-brief -p "NomeDaMarca"

Logotipo: Pesquisar Estilos/Cores/Setores

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalista limpo" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tecnologia profissional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "saúde médico" --domain industry

Logotipo: Gerar com IA

SEMPRE gere imagens de logotipo com fundo branco.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "emblema vintage de cafeteria" --style vintage

IMPORTANTE: Quando os scripts falharem, tente corrigi-los diretamente.

Após a geração, SEMPRE pergunte ao usuário sobre visualização em HTML via AskUserQuestion. Se sim, invoque /ui-ux-pro-max para galeria.

Design CIP (Integrado)

Mais de 50 entregáveis, 20 estilos, 20 setores. Gemini Nano Banana (Flash/Pro).

CIP: Gerar Brief

python3 ~/.claude/skills/design/scripts/cip/search.py "startup de tecnologia" --cip-brief -b "NomeDaMarca"

CIP: Pesquisar Domínios

python3 ~/.claude/skills/design/scripts/cip/search.py "cartão de visita papel timbrado" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxo premium elegante" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hotelaria hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "recepção de escritório" --domain mockup

CIP: Gerar Mockups

# Com logotipo (RECOMENDADO)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /caminho/para/logo.png --deliverable "cartão de visita" --industry "consultoria"

# Conjunto CIP completo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /caminho/para/logo.png --industry "consultoria" --set

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

# Sem logotipo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "cartão de visita" --no-logo-prompt

Modelos: flash (padrão, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: Renderizar Apresentação HTML

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consultoria" --images /caminho/para/saida-cip

Dica: Se não houver logotipo, use a seção de Design de Logotipo acima primeiro.

Slides (Integrado)

Apresentações HTML estratégicas com Chart.js, tokens de design, fórmulas de copywriting.

Carregue references/slides-create.md para o fluxo de criação.

Slides: Base de Conhecimento

TópicoArquivo
Guia de Criaçãoreferences/slides-create.md
Padrões de Layoutreferences/slides-layout-patterns.md
Template HTMLreferences/slides-html-template.md
Copywritingreferences/slides-copywriting-formulas.md
Estratégiasreferences/slides-strategies.md

Design de Banner (Integrado)

22 estilos de direção de arte para mídias sociais, anúncios, web e impressão. Usa skills frontend-design, ai-artist, ai-multimodal, chrome-devtools.

Carregue references/banner-sizes-and-styles.md para referência completa de tamanhos e estilos.

Banner: Fluxo de Trabalho

  1. Levantar requisitos via AskUserQuestion — propósito, plataforma, conteúdo, marca, estilo, quantidade
  2. Pesquisar — Ativar ui-ux-pro-max, navegar no Pinterest em busca de referências
  3. Projetar — Criar banner HTML/CSS com frontend-design, gerar visuais com ai-artist/ai-multimodal
  4. Exportar — Capturar tela para PNG nas dimensões exatas via chrome-devtools
  5. Apresentar — Mostrar todas as opções lado a lado, iterar com base no feedback

Banner: Referência Rápida de Tamanhos

PlataformaTipoTamanho (px)
FacebookCapa820 x 312
Twitter/XCabeçalho1500 x 500
LinkedInPessoal1584 x 396
YouTubeArte do canal2560 x 1440
InstagramStory1080 x 1920
InstagramPost1080 x 1080
Google AdsRetângulo Médio300 x 250
WebsiteHero1920 x 600-1080

Banner: Principais Estilos

EstiloMelhor Para
MinimalistaSaaS, tecnologia
Tipografia em DestaqueAnúncios
GradienteMarcas modernas
Baseado em FotoEstilo de vida, e-commerce
GeométricoTecnologia, fintech
GlassmorphismSaaS, aplicativos
Neon/CiberpunkJogos, eventos

Banner: Regras de Design

  • Zonas seguras: conteúdo crítico nos 70-80% centrais
  • Um CTA por banner, canto inferior direito, altura mínima de 44px
  • Máximo de 2 fontes, corpo mínimo de 16px, título ≥32px
  • Texto abaixo de 20% para anúncios (Meta penaliza)
  • Impressão: 300 DPI, CMYK, sangria de 3-5mm

Design de Ícones (Integrado)

15 estilos, 12 categorias. Gemini 3.1 Pro Preview gera saída de texto SVG.

Ícone: Gerar Ícone Único

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "engrenagem de configurações" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "carrinho de compras" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "painel" --category navigation --style duotone

Ícone: Gerar Variações em Lote

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

Ícone: Exportação em Múltiplos Tamanhos

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "perfil de usuário" --sizes "16,24,32,48" --output-dir ./icons

Ícone: Principais Estilos

EstiloMelhor Para
contornadoInterfaces de UI, aplicativos web
preenchidoAplicativos móveis, barras de navegação
duotoneMarketing, landing pages
arredondadoAplicativos amigáveis, saúde
nítidoTecnologia, fintech, enterprise
planoMaterial design, estilo Google
gradienteMarcas modernas, SaaS

Modelo: gemini-3.1-pro-preview — saída somente de texto (SVG é texto XML). Nenhuma API de geração de imagem necessária.

Fotos Sociais (Integrado)

Design de imagens sociais multiplataforma: HTML/CSS → exportação de captura de tela. Usa skills ui-ux-pro-max, brand, design-system, chrome-devtools.

Carregue references/social-photos-design.md para tamanhos, modelos e melhores práticas.

Fotos Sociais: Fluxo de Trabalho

  1. Orquestrar — Skill project-management para tarefas TODO; subagentes paralelos para trabalho independente
  2. Analisar — Analisar prompt: assunto, plataformas, estilo, contexto da marca, elementos de conteúdo
  3. Idealizar — 3-5 conceitos, apresentar via AskUserQuestion
  4. Projetar — /ckm:brand → /ckm:design-system → invocar aleatoriamente /ck:ui-ux-pro-max OU /ck:frontend-design; HTML por ideia × tamanho
  5. Exportar — chrome-devtools ou captura de tela Playwright em px exatos (deviceScaleFactor 2x)
  6. Verificar — Usar Chrome MCP ou skill chrome-devtools para inspecionar visualmente os designs exportados; corrigir problemas de layout/estilo e reexportar
  7. Relatar — Resumo para plans/reports/ com decisões de design
  8. Organizar — Invocar skill assets-organizing para classificar arquivos de saída e relatórios

Fotos Sociais: Tamanhos Principais

PlataformaTamanho (px)PlataformaTamanho (px)
IG Post1080×1080FB Post1200×630
IG Story1080×1920X Post1200×675
IG Carrossel1080×1350LinkedIn1200×627
YT Thumb1280×720Pinterest1000×1500

Fluxos de Trabalho

Pacote de Marca Completo

  1. Logotipo → scripts/logo/generate.py → Gerar variantes de logotipo
  2. CIP → scripts/cip/generate.py --logo ... → Criar mockups de entregáveis
  3. Apresentação → Carregar references/slides-create.md → Construir pitch deck

Novo Sistema de Design

  1. Marca (skill brand) → Definir cores, tipografia, voz
  2. Tokens (skill design-system) → Criar camadas de tokens semânticos
  3. Implementar (skill ui-styling) → Configurar Tailwind, shadcn/ui

Referências

TópicoArquivo
Roteamento de Designreferences/design-routing.md
Guia de Design de Logotiporeferences/logo-design.md
Estilos de Logotiporeferences/logo-style-guide.md
Cores de Logotiporeferences/logo-color-psychology.md
Prompts de Logotiporeferences/logo-prompt-engineering.md
Guia de Design CIPreferences/cip-design.md
Entregáveis CIPreferences/cip-deliverable-guide.md
Estilos CIPreferences/cip-style-guide.md
Prompts CIPreferences/cip-prompt-engineering.md
Criar Slidesreferences/slides-create.md
Layouts de Slidesreferences/slides-layout-patterns.md
Template de Slidesreferences/slides-html-template.md
Copy para Slidesreferences/slides-copywriting-formulas.md
Estratégia de Slidesreferences/slides-strategies.md
Tamanhos e Estilos de Bannerreferences/banner-sizes-and-styles.md
Guia de Fotos Sociaisreferences/social-photos-design.md
Guia de Design de Íconesreferences/icon-design.md

Scripts

ScriptPropósito
scripts/logo/search.pyPesquisar estilos, cores e setores de logotipo
scripts/logo/generate.pyGerar logotipos com Gemini AI
scripts/logo/core.pyMecanismo de busca BM25 para dados de logotipo
scripts/cip/search.pyPesquisar entregáveis, estilos e setores CIP
scripts/cip/generate.pyGerar mockups CIP com Gemini
scripts/cip/render-html.pyRenderizar apresentação HTML a partir de mockups CIP
scripts/cip/core.pyMecanismo de busca BM25 para dados CIP
scripts/icon/generate.pyGerar ícones SVG com Gemini 3.1 Pro

Pré-requisitos

Python: Este skill usa scripts Python. No Windows, use python em vez de python3 (ex.: python scripts/logo/search.py em vez de python3 scripts/logo/search.py).

Verifique se o Python está instalado:

python3 --version || python --version

Configuração

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

Nota para Windows: Use python em vez de pip quando necessário (ex.: python -m pip install ...).

Integração

Sub-skills externos: brand, design-system, ui-styling Skills relacionados: 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.

Habilidades Relacionadas

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 Imagem skills