skills.rest
Kentox493
Kentox493COMMUNITY
Explore all skills by this author →
GitHub

design

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

Updated Apr 6, 2026
Search Tags:#brand identity#logo design#presentation#gemini ai#social media images#banner design#svg icons
One-click install
npx skills add https://github.com/Kentox493/Portfolio --skill design-kentox493
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Kentox493/Portfolio/tree/main/.agents/skills/design
Command: npx skills add https://github.com/Kentox493/Portfolio --skill design-kentox493

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 assets—logos, corporate identity mockups, icons, banners, presentations, and social media images—normally requires multiple design tools and manual effort; this Skill unifies them into one AI-assisted workflow. ## 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, signage, apparel, vehicles) and render them into a single-file HTML presentation. - Banners, Slides & Social Photos: Design platform-sized banners and social images via HTML/CSS with screenshot export, and build Chart.js-powered HTML pitch decks. - Use Case: A startup founder needs a complete brand package—generate a logo, create CIP mockups 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 named TechFlow and then generate a matching business card mockup.

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, for example --brand "TechFlow" --style minimalist --industry tech. You can first generate a design brief with search.py to explore 55+ styles and 30 color palettes.

How to create corporate identity mockups with a 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, then render an HTML presentation with render-html.py.

What banner sizes does it support for social media?▼

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

Does icon generation require an image generation API?▼

No. Icon generation uses gemini-3.1-pro-preview with text-only output since SVG is XML text. The script outputs .svg files directly and supports batch variations and multi-size export at 16, 24, 32, and 48 pixels.

What setup is required before running the scripts?▼

Set the GEMINI_API_KEY environment variable from Google AI Studio and install the google-genai and pillow Python packages. On Windows, use python instead of python3 for all script commands.

Why do exported social media screenshots show wrong fonts?▼

Screenshots taken before web fonts finish loading fall back to system fonts. Add a 3-5 second delay after page load, or use Chrome headless with --virtual-time-budget=5000 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
edisonabeledisonabel

ckm:design

Generate brand assets, design tokens, and UI styles with Tailwind CSS.

Community
Advanced
dev-giosdev-gios
1

qa-visual

Capture screenshots and analyze rendered elements for design system compliance.

Community
Advanced
OniroHuaverOniroHuaver
30

figma-implement-design

Convert Figma designs into production-ready code via Figma MCP integration.

Community
Advanced