ckm:design

Generates logos, CIP mockups, SVG icons, banners, slides, and social images using Gemini AI and HTML rendering.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill ckm-design-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/ckm-design
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill ckm-design-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating cohesive brand and marketing visuals—logos, corporate identity mockups, icons, banners, presentations, and social media images—normally requires multiple design tools and manual effort across many platforms and sizes. ## Core Features & Use Cases - AI Logo & Icon Generation: Generate logos across 55+ styles and SVG icons across 15 styles using Gemini models, with BM25 search over style, color, and industry guides. - Corporate Identity Program (CIP): Produce 50+ branded deliverable mockups (business cards, letterheads, signage, vehicles, apparel) and render them into a single-file HTML presentation. - Banners, Slides & Social Photos: Design platform-specific banners and social images via HTML/CSS with exact pixel dimensions, and build Chart.js-powered HTML pitch decks. - Use Case: A startup founder needs a complete brand package—generate a logo, create a full CIP mockup set with that logo, then build an investor pitch deck, all from one skill. ## Quick Start Ask the AI to design a minimalist logo for your brand and generate matching business card mockups using the design skill.

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. Output logos are always generated on a white background, and you can first create a design brief with search.py --design-brief.

How to create corporate identity mockups for a brand?▼

Use scripts/cip/generate.py with --brand, --logo, --deliverable, and --industry to generate mockups like business cards or letterheads. Add --set for a full CIP package, then render an HTML presentation with scripts/cip/render-html.py.

What is the difference between the flash and pro Gemini models for mockups?▼

The flash model (gemini-2.5-flash-image) is the default and is fast and cost-effective. The pro model (gemini-3-pro-image-preview) offers higher quality with 4K text rendering, selected via --model pro.

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

Yes. Icon generation uses gemini-3.1-pro-preview, which outputs SVG as XML text, so no image generation API is needed. Run scripts/icon/generate.py with --prompt and --style, with options for batch variations and multi-size export.

What image sizes does it support for social media platforms?▼

It covers exact pixel sizes per platform, such as Instagram Post 1080x1080, Story 1080x1920, Facebook Post 1200x630, YouTube thumbnail 1280x720, and Pinterest 1000x1500. Designs are built in HTML/CSS and exported via headless Chrome or Playwright screenshots.

Why do my exported social images show wrong fonts or broken layouts?▼

Screenshots taken before fonts and images finish loading cause fallback fonts and layout issues. Add a 3-5 second delay (or --virtual-time-budget=5000 with headless Chrome) before capture, then visually verify exports and re-export after fixing the HTML.