CommunityImagegithub.com

ElKrapulito/calucha-landing

Skill de conception complet : identité de marque, jetons de design, style UI, génération de logo (55 styles, Gemini AI), programme d'identité graphique (50 livrables, maquettes CIP), présentations HTML (Chart.js), conception de bannières (22 styles, social/ads/web/print), conception d'icônes (15 styles, SVG, Gemini 3.1 Pro), photos sociales (HTML→capture d'écran, multi-plateformes). Actions : créer un logo, créer un CIP, générer des maquettes, créer des diapositives, concevoir une bannière, générer une icône, créer des photos sociales, images pour réseaux sociaux, identité de marque, système de design. Plateformes : Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

Qu'est-ce que calucha-landing ?

Ce skill de conception complet pour agents IA, compatible avec des assistants comme Claude Code, Cursor ou Codex, centralise toutes les tâches de design graphique et d'identité visuelle. Il permet de générer des logos professionnels (55+ styles avec Gemini AI), des programmes d'identité graphique complets (50+ livrables), des présentations HTML interactives avec Chart.js, des bannières publicitaires (22 styles pour réseaux sociaux, web et print), des icônes SVG (15 styles via Gemini 3.1 Pro), et des photos sociales optimisées pour toutes les plateformes (Facebook, Instagram, LinkedIn, TikTok, etc.). Le skill fonctionne grâce à des scripts Python exécutant des modèles Gemini Nano Banana, Flash et Pro, et s'intègre avec des sous-skills externes (brand, design-system, ui-styling) ainsi qu'avec des outils complémentaires comme frontend-design et chrome-devtools. Une fois installé, il offre un pipeline complet de branding : de la recherche de styles à la génération d'images, en passant par l'export en haute résolution et l'organisation des fichiers dans des rapports.

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

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

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Design

Skill de conception unifié : marque, jetons, UI, logo, CIP, diapositives, bannières, photos sociales, icônes.

Quand l'utiliser

  • Identité de marque, ton, assets
  • Jetons de système de design et spécifications
  • Style UI avec shadcn/ui + Tailwind
  • Conception et génération IA de logos
  • Livrables du programme d'identité graphique (CIP)
  • Présentations et pitch decks
  • Conception de bannières pour réseaux sociaux, publicités, web, print
  • Photos sociales pour Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Routage des sous-skills

TâcheSous-skillDétails
Identité de marque, ton, assetsbrandSkill externe
Jetons, spécifications, variables CSSdesign-systemSkill externe
shadcn/ui, Tailwind, codeui-stylingSkill externe
Création de logo, génération IALogo (intégré)references/logo-design.md
Maquettes CIP, livrablesCIP (intégré)references/cip-design.md
Présentations, pitch decksDiapositives (intégré)references/slides.md
Bannières, couvertures, en-têtesBannière (intégré)references/banner-sizes-and-styles.md
Images/photos pour réseaux sociauxPhotos Sociales (intégré)references/social-photos-design.md
Icônes SVG, jeux d'icônesIcône (intégré)references/icon-design.md

Conception de Logo (Intégré)

55+ styles, 30 palettes de couleurs, 25 guides sectoriels. Modèles Gemini Nano Banana.

Logo : Générer un brief de design

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

Logo : Rechercher styles/couleurs/secteurs

python3 ~/.claude/skills/design/scripts/logo/search.py "minimaliste propre" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professionnel" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "santé médical" --domain industry

Logo : Générer avec IA

TOUJOURS générer les images logo de sortie avec un fond blanc.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimaliste --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "café vintage badge" --style vintage

IMPORTANT : Si les scripts échouent, essayez de les corriger directement.

Après génération, TOUJOURS demander à l'utilisateur un aperçu HTML via AskUserQuestion. Si oui, invoquer /ui-ux-pro-max pour la galerie.

Conception CIP (Intégré)

50+ livrables, 20 styles, 20 secteurs. Gemini Nano Banana (Flash/Pro).

CIP : Générer un brief

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

CIP : Rechercher des domaines

python3 ~/.claude/skills/design/scripts/cip/search.py "carte de visite en-tête" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxe premium élégant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hôtellerie hôtel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "bureau réception" --domain mockup

CIP : Générer des maquettes

# Avec logo (RECOMMANDÉ)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /chemin/vers/logo.png --deliverable "carte de visite" --industry "conseil"

# Jeu CIP complet
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /chemin/vers/logo.png --industry "conseil" --set

# Modèle Pro (texte 4K)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "carte de visite" --model pro

# Sans logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "carte de visite" --no-logo-prompt

Modèles : flash (par défaut, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP : Rendre une présentation HTML

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "conseil" --images /chemin/vers/sortie-cip

Astuce : S'il n'y a pas de logo, utilisez d'abord la section Conception de Logo ci-dessus.

Diapositives (Intégré)

Présentations HTML stratégiques avec Chart.js, jetons de design, formules de copywriting.

Charger references/slides-create.md pour le workflow de création.

Diapositives : Base de connaissances

SujetFichier
Guide de créationreferences/slides-create.md
Modèles de mise en pagereferences/slides-layout-patterns.md
Template HTMLreferences/slides-html-template.md
Copywritingreferences/slides-copywriting-formulas.md
Stratégiesreferences/slides-strategies.md

Conception de Bannière (Intégré)

22 styles de direction artistique pour réseaux sociaux, publicités, web, print. Utilise les skills frontend-design, ai-artist, ai-multimodal, chrome-devtools.

Charger references/banner-sizes-and-styles.md pour la référence complète des tailles et styles.

Bannière : Workflow

  1. Recueillir les besoins via AskUserQuestion — but, plateforme, contenu, marque, style, quantité
  2. Rechercher — Activer ui-ux-pro-max, parcourir Pinterest pour des références
  3. Concevoir — Créer une bannière HTML/CSS avec frontend-design, générer des visuels avec ai-artist/ai-multimodal
  4. Exporter — Capture d'écran en PNG aux dimensions exactes via chrome-devtools
  5. Présenter — Afficher toutes les options côte à côte, itérer sur les retours

Bannière : Référence rapide des tailles

PlateformeTypeTaille (px)
FacebookCouverture820 x 312
Twitter/XEn-tête1500 x 500
LinkedInPersonnelle1584 x 396
YouTubeBannière chaîne2560 x 1440
InstagramStory1080 x 1920
InstagramPublication1080 x 1080
Google AdsRectangle moyen300 x 250
Site WebHero1920 x 600-1080

Bannière : Meilleurs styles artistiques

StyleIdéal pour
MinimalisteSaaS, tech
Typographie audacieuseAnnonces
DégradéMarques modernes
Basé sur photoLifestyle, e-com
GéométriqueTech, fintech
GlassmorphismeSaaS, apps
Néon/CyberpunkGaming, événements

Bannière : Règles de conception

  • Zones de sécurité : contenu critique dans les 70-80 % centraux
  • Un seul CTA par bannière, en bas à droite, hauteur minimale de 44 px
  • Maximum 2 polices, corps de texte min. 16 px, titre ≥ 32 px
  • Texte sous 20 % pour les publicités (Meta pénalise)
  • Print : 300 DPI, CMJN, fond perdu de 3-5 mm

Conception d'icônes (Intégré)

15 styles, 12 catégories. Gemini 3.1 Pro Preview génère une sortie texte SVG.

Icône : Générer une icône unique

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "engrenage paramètres" --style contour
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "panier d'achat" --style rempli --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "tableau de bord" --category navigation --style double-ton

Icône : Générer des variantes en lot

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud téléchargement" --batch 4 --output-dir ./icones

Icône : Export multi-tailles

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "profil utilisateur" --sizes "16,24,32,48" --output-dir ./icones

Icône : Meilleurs styles

StyleIdéal pour
contourInterfaces UI, applications web
rempliApplications mobiles, barres de navigation
double-tonMarketing, pages de destination
arrondiApplications conviviales, santé
netTech, fintech, entreprise
platMaterial Design, style Google
dégradéMarques modernes, SaaS

Modèle : gemini-3.1-pro-preview — sortie texte uniquement (SVG est du texte XML). Aucune API de génération d'image nécessaire.

Photos Sociales (Intégré)

Conception d'images sociales multi-plateformes : HTML/CSS → export par capture d'écran. Utilise les skills ui-ux-pro-max, brand, design-system, chrome-devtools.

Charger references/social-photos-design.md pour les tailles, modèles et bonnes pratiques.

Photos Sociales : Workflow

  1. Orchestrer — skill project-management pour les tâches TODO ; sous-agents parallèles pour travail indépendant
  2. Analyser — Analyser la requête : sujet, plateformes, style, contexte de marque, éléments de contenu
  3. Idéer — 3-5 concepts, présenter via AskUserQuestion
  4. Concevoir — /ckm:brand → /ckm:design-system → invoquer aléatoirement /ck:ui-ux-pro-max OU /ck:frontend-design ; HTML par idée × taille
  5. Exporter — Capture d'écran chrome-devtools ou Playwright aux pixels exacts (2x deviceScaleFactor)
  6. Vérifier — Utiliser Chrome MCP ou le skill chrome-devtools pour inspecter visuellement les designs exportés ; corriger les problèmes de mise en page/style et ré-exporter
  7. Rapporter — Résumé dans plans/reports/ avec décisions de conception
  8. Organiser — Invoquer le skill assets-organizing pour trier les fichiers de sortie et les rapports

Photos Sociales : Tailles clés

PlateformeTaille (px)PlateformeTaille (px)
Publication IG1080×1080Publication FB1200×630
Story IG1080×1920Publication X1200×675
Carrousel IG1080×1350LinkedIn1200×627
Miniature YT1280×720Pinterest1000×1500

Workflows

Package de marque complet

  1. Logo → scripts/logo/generate.py → Générer des variantes de logo
  2. CIP → scripts/cip/generate.py --logo ... → Créer des maquettes de livrables
  3. Présentation → Charger references/slides-create.md → Construire le pitch deck

Nouveau système de design

  1. Marque (skill brand) → Définir couleurs, typographie, ton
  2. Jetons (skill design-system) → Créer des couches sémantiques de jetons
  3. Implémenter (skill ui-styling) → Configurer Tailwind, shadcn/ui

Références

SujetFichier
Routage de conceptionreferences/design-routing.md
Guide de conception de logoreferences/logo-design.md
Styles de logoreferences/logo-style-guide.md
Couleurs de logoreferences/logo-color-psychology.md
Prompts de logoreferences/logo-prompt-engineering.md
Guide de conception CIPreferences/cip-design.md
Livrables CIPreferences/cip-deliverable-guide.md
Styles CIPreferences/cip-style-guide.md
Prompts CIPreferences/cip-prompt-engineering.md
Création de diapositivesreferences/slides-create.md
Mises en page de diapositivesreferences/slides-layout-patterns.md
Template de diapositivesreferences/slides-html-template.md
Copywriting diapositivesreferences/slides-copywriting-formulas.md
Stratégie diapositivesreferences/slides-strategies.md
Tailles et styles de bannièresreferences/banner-sizes-and-styles.md
Guide photos socialesreferences/social-photos-design.md
Guide conception d'icônesreferences/icon-design.md

Scripts

ScriptObjectif
scripts/logo/search.pyRechercher styles, couleurs, secteurs de logo
scripts/logo/generate.pyGénérer des logos avec Gemini AI
scripts/logo/core.pyMoteur de recherche BM25 pour données de logo
scripts/cip/search.pyRechercher livrables, styles, secteurs CIP
scripts/cip/generate.pyGénérer des maquettes CIP avec Gemini
scripts/cip/render-html.pyRendre une présentation HTML à partir des maquettes CIP
scripts/cip/core.pyMoteur de recherche BM25 pour données CIP
scripts/icon/generate.pyGénérer des icônes SVG avec Gemini 3.1 Pro

Prérequis

Python : Ce skill utilise des scripts Python. Sous Windows, utilisez python au lieu de python3 (ex. : python scripts/logo/search.py au lieu de python3 scripts/logo/search.py).

Vérifiez si Python est installé :

python3 --version || python --version

Configuration

export GEMINI_API_KEY="votre-clé"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Remarque pour Windows : Utilisez python au lieu de pip si nécessaire (ex. : python -m pip install ...).

Intégration

Sous-skills externes : brand, design-system, ui-styling Skills associés : 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 associés

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