skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

ckm:design

Generate logos, CIP mockups, SVG icons, banners, slides, and social images with Gemini AI.

Updated Mar 26, 2026
Search Tags:#brand identity#logo design#gemini ai#social media images#mockup generation#banner design#svg icons
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-design-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/ui-ux-pro-max/.claude/skills/design
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-design-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, pillow, and includes scripts (resource) and references (resource) components.

What problem does it solve? Producing brand assets like logos, corporate identity mockups, icons, banners, and social media images normally requires multiple design tools and manual resizing for each platform. This Skill unifies those tasks into scriptable workflows backed by Gemini AI generation and HTML-to-screenshot export. ## Core Features & Use Cases - AI Logo & CIP Generation: Create logos across 55+ styles and corporate identity mockups across 50+ deliverables using Gemini Flash/Pro models, with BM25 search over style, color, and industry guides. - SVG Icon Generation: Produce SVG icons in 15 styles with batch variations and multi-size export via Gemini 3.1 Pro text output. - Banners, Slides & Social Photos: Design platform-sized banners and social images via HTML/CSS rendered to exact-pixel PNG screenshots, plus Chart.js-based HTML presentations. - Use Case: A startup needs a full brand package: generate a minimalist logo, produce business card and signage mockups with that logo, then build a pitch deck presentation, all from one skill. ## Quick Start Ask the AI to design a minimalist logo for your brand named TechFlow and then generate a matching business card mockup.

Frequently Asked Questions about ckm:design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a logo with Gemini AI?▼

Run scripts/logo/generate.py with --brand, --style, and --industry flags, for example --brand "TechFlow" --style minimalist --industry tech. You can first generate a design brief with search.py --design-brief to pick styles and colors.

How to create corporate identity mockups from an existing logo?▼

Use scripts/cip/generate.py with --brand, --logo pointing to your logo file, --deliverable, and --industry. Add --set to generate a full CIP set, or --model pro for 4K text rendering with gemini-3-pro-image-preview.

What banner sizes does it support for social media and ads?▼

It covers Facebook covers (820x312), Twitter/X headers (1500x500), LinkedIn banners (1584x396), YouTube channel art (2560x1440), Instagram posts and stories, plus Google Display sizes like 300x250 and 728x90, and print formats at 300 DPI.

Can I generate SVG icons without an image generation API?▼

Yes. The icon generator uses gemini-3.1-pro-preview, which outputs SVG as XML text, so no image generation endpoint is needed. It supports 15 styles, batch variations, and multi-size export like 16, 24, 32, and 48 pixels.

What setup is required before running the generation scripts?▼

Set the GEMINI_API_KEY environment variable with a key from Google AI Studio and install dependencies with pip install google-genai pillow. The scripts are standard Python 3 and run from the skill's scripts directory.

Why do exported social images sometimes show wrong fonts?▼

Screenshots taken before web fonts finish loading fall back to system fonts. Add a 3-5 second delay or use Chrome's --virtual-time-budget=5000 flag so Google Fonts and images fully render before capture.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

brand-guidelines

Enforce brand voice, visual identity, and messaging frameworks in content creation.

Community
Advanced
ThomashighbaughThomashighbaugh
1

icon-generator

Generate favicon, PWA, and Unreal Engine icon sets from a single PNG or SVG source.

Community
Intermediate
PostalocityPostalocity
1

ckm:ui-styling

Integrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.

Official
Advanced
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate