design

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

Updated Aug 25, 2026
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill design-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/ui-ux-pro-max-skill/.claude/skills/design
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill design-klyrhonmiko

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 effort; this Skill unifies those tasks into scriptable AI-driven workflows. ## Core Features & Use Cases - AI Logo & CIP Generation: Search 55+ logo styles and 50+ corporate identity deliverables with BM25 search scripts, then generate mockups using Gemini image models. - SVG Icon Generation: Create icons in 15 styles and 12 categories with Gemini 3.1 Pro, including batch variations and multi-size export. - HTML-Based Visuals: Build Chart.js presentations, banners, and social photos as HTML/CSS, then export exact-size PNGs via headless Chrome or Playwright. - Use Case: Ask for a complete brand package for a startup and get a generated logo, business card and signage mockups, plus a pitch deck presentation. ## Quick Start Use the design skill to generate a minimalist logo and business card mockup for my tech startup called TechFlow.

Frequently Asked Questions about 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 after setting the GEMINI_API_KEY environment variable. You can first generate a design brief with search.py to pick from 55+ styles and 30 color palettes.

How to create corporate identity mockups from a logo?▼

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

What Python packages does the design skill require?▼

The scripts require google-genai for Gemini API access and pillow for image handling, installed via pip. A GEMINI_API_KEY from Google AI Studio must be exported as an environment variable before running generation scripts.

Can I export social media images at exact platform sizes?▼

Yes, designs are built as HTML files at exact pixel dimensions and captured via headless Chrome, chrome-devtools, or Playwright with matching viewport sizes. Puppeteer supports deviceScaleFactor 2 for retina-quality PNG output.

Why do my exported screenshots show wrong fonts?▼

Screenshots taken before web fonts finish loading fall back to system fonts. Add a 3-5 second delay using --virtual-time-budget in headless Chrome or waitForTimeout in Playwright before capturing.

What are the limitations of AI-generated SVG icons?▼

Icon generation uses gemini-3.1-pro-preview with text-only SVG output, so no raster image generation is involved. Results may need manual path cleanup, and complex detailed illustrations are better suited to the logo or banner workflows.