skills.rest
mr-creative-hmh
mr-creative-hmhCOMMUNITY
Explore all skills by this author →
GitHub

design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating 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: Generate logos in 55+ styles and corporate identity mockups (business cards, letterheads, signage, vehicles) using Gemini image 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. - HTML-Based Visuals: Build Chart.js presentations, banners, and social photos as HTML/CSS, then export exact-size PNGs via headless Chrome or Playwright screenshots. - Use Case: A startup founder needs a full brand package: generate a minimalist logo, create a CIP mockup set with that logo, render an HTML presentation, and export Instagram post images at 1080x1080. ## 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 to generate a logo on a white background. You can first create a design brief with scripts/logo/search.py using the --design-brief flag to pick styles, colors, and industry guidance.

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 to produce mockups like business cards or letterheads. Add --set for a full CIP set or --model pro for 4K text rendering.

What image sizes do social media platforms require?▼

Instagram posts use 1080x1080, stories 1080x1920, Facebook posts 1200x630, LinkedIn posts 1200x627, YouTube thumbnails 1280x720, and Pinterest pins 1000x1500. The references directory lists complete size tables for banners and social photos.

Does the icon generator need an image generation model?▼

No. The icon generator uses gemini-3.1-pro-preview with text-only output because SVG is XML text. It supports 15 styles, batch variations, and multi-size export such as 16, 24, 32, and 48 pixels.

Why are my exported social photo screenshots missing 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 the PNG.

What setup is required before running the design scripts?▼

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

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

brand-guidelines

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

Community
Advanced
nextlevelbuildernextlevelbuilder
123.5k

design

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

Official
Advanced
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