Skip to main content Accueil Créateurs lennney gate-all-skills ckm-design
ckm-design Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/lennney/gate-all-skills --skill ckm-designLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Métiers associés SOC
Basé sur la classification professionnelle SOC
Explorateur de fichiers
35 fichiers name ckm:design description Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. argument-hint [design-type] [context] license MIT metadata {"author":"claudekit","version":"2.1.0"} trigger 需要全面的设计服务 input 设计需求 output 设计作品 next 无 dependencies 无
Design
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
When to Use
Brand identity, voice, assets
Design system tokens and specs
UI styling with shadcn/ui + Tailwind
Logo design and AI generation
Corporate identity program (CIP) deliverables
Presentations and pitch decks
Banner design for social media, ads, web, print
Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
Sub-skill Routing
Task Sub-skill Details Brand identity, voice, assets brandExternal skill Tokens, specs, CSS vars design-systemExternal skill shadcn/ui, Tailwind, code ui-stylingExternal skill Logo creation, AI generation Logo (built-in) references/logo-design.mdCIP mockups, deliverables CIP (built-in) references/cip-design.mdPresentations, pitch decks Slides (built-in) references/slides.mdBanners, covers, headers Banner (built-in) references/banner-sizes-and-styles.mdSocial media images/photos Social Photos (built-in) references/social-photos-design.mdSVG icons, icon sets Icon (built-in) references/icon-design.md
Logo Design (Built-in)
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
Logo: Generate Design Brief
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
Logo: Search Styles/Colors/Industries
python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional"
"healthcare medical"
Logo: Generate with AI ALWAYS generate output logo images with white background.
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
IMPORTANT: When scripts fail, try to fix them directly.
After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.
CIP Design (Built-in) 50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
CIP: Generate Brief python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
CIP: Search Domains 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: Generate Mockups
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)
CIP: Render HTML Presentation python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
Tip: If no logo exists, use Logo Design section above first.
Slides (Built-in) Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load references/slides-create.md for the creation workflow.
Slides: Knowledge Base Topic File Creation Guide references/slides-create.mdLayout Patterns references/slides-layout-patterns.mdHTML Template references/slides-html-template.mdCopywriting references/slides-copywriting-formulas.mdStrategies references/slides-strategies.md
Banner Design (Built-in) 22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.
Load references/banner-sizes-and-styles.md for complete sizes and styles reference.
Banner: Workflow
Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantityResearch — Activate ui-ux-pro-max, browse Pinterest for referencesDesign — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodalExport — Screenshot to PNG at exact dimensions via chrome-devtoolsPresent — Show all options side-by-side, iterate on feedback
Banner: Quick Size Reference Platform Type Size (px) Facebook Cover 820 x 312 Twitter/X Header 1500 x 500 LinkedIn Personal 1584 x 396 YouTube Channel art 2560 x 1440 Instagram Story 1080 x 1920 Instagram Post 1080 x 1080 Google Ads Med Rectangle 300 x 250 Website Hero 1920 x 600-1080
Banner: Top Art Styles Style Best For Minimalist SaaS, tech Bold Typography Announcements Gradient Modern brands Photo-Based Lifestyle, e-com Geometric Tech, fintech Glassmorphism SaaS, apps Neon/Cyberpunk Gaming, events
Banner: Design Rules
Safe zones: critical content in central 70-80%
One CTA per banner, bottom-right, min 44px height
Max 2 fonts, min 16px body, ≥32px headline
Text under 20% for ads (Meta penalizes)
Print: 300 DPI, CMYK, 3-5mm bleed
Icon Design (Built-in) 15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
Icon: Generate Single Icon 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
Icon: Generate Batch Variations python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
Icon: Multi-size Export python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
Icon: Top Styles Style Best For outlined UI interfaces, web apps filled Mobile apps, nav bars duotone Marketing, landing pages rounded Friendly apps, health sharp Tech, fintech, enterprise flat Material design, Google-style gradient Modern brands, SaaS
Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.
Social Photos (Built-in) Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.
Load references/social-photos-design.md for sizes, templates, best practices.
Social Photos: Workflow
Orchestrate — project-management skill for TODO tasks; parallel subagents for independent workAnalyze — Parse prompt: subject, platforms, style, brand context, content elementsIdeate — 3-5 concepts, present via AskUserQuestionDesign — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × sizeExport — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-exportReport — Summary to plans/reports/ with design decisionsOrganize — Invoke assets-organizing skill to sort output files and reports
Social Photos: Key Sizes Platform Size (px) Platform Size (px) IG Post 1080×1080 FB Post 1200×630 IG Story 1080×1920 X Post 1200×675 IG Carousel 1080×1350 LinkedIn 1200×627 YT Thumb 1280×720 Pinterest 1000×1500
Workflows
Complete Brand Package
Logo → scripts/logo/generate.py → Generate logo variantsCIP → scripts/cip/generate.py --logo ... → Create deliverable mockupsPresentation → Load references/slides-create.md → Build pitch deck
New Design System
Brand (brand skill) → Define colors, typography, voiceTokens (design-system skill) → Create semantic token layersImplement (ui-styling skill) → Configure Tailwind, shadcn/ui
References Topic File Design Routing references/design-routing.mdLogo Design Guide references/logo-design.mdLogo Styles references/logo-style-guide.mdLogo Colors references/logo-color-psychology.mdLogo Prompts references/logo-prompt-engineering.mdCIP Design Guide references/cip-design.mdCIP Deliverables references/cip-deliverable-guide.mdCIP Styles references/cip-style-guide.mdCIP Prompts references/cip-prompt-engineering.mdSlides Create references/slides-create.mdSlides Layouts references/slides-layout-patterns.mdSlides Template references/slides-html-template.mdSlides Copy references/slides-copywriting-formulas.mdSlides Strategy references/slides-strategies.mdBanner Sizes & Styles references/banner-sizes-and-styles.mdSocial Photos Guide references/social-photos-design.mdIcon Design Guide references/icon-design.md
Scripts Script Purpose scripts/logo/search.pySearch logo styles, colors, industries scripts/logo/generate.pyGenerate logos with Gemini AI scripts/logo/core.pyBM25 search engine for logo data scripts/cip/search.pySearch CIP deliverables, styles, industries scripts/cip/generate.pyGenerate CIP mockups with Gemini scripts/cip/render-html.pyRender HTML presentation from CIP mockups scripts/cip/core.pyBM25 search engine for CIP data scripts/icon/generate.pyGenerate SVG icons with Gemini 3.1 Pro
Setup export GEMINI_API_KEY="your-key"
pip install google-genai pillow
Integration External sub-skills: brand, design-system, ui-styling
Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
