design

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

Updated Aug 26, 2026
One-click install
npx skills add https://github.com/MohamadJoumaa/Direct --skill design-mohamadjoumaa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/MohamadJoumaa/Direct/tree/main/.cursor/skills/design
Command: npx skills add https://github.com/MohamadJoumaa/Direct --skill design-mohamadjoumaa

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 resizing for each platform. This Skill unifies those tasks into one workflow with AI generation scripts and ready-made size/style references. ## Core Features & Use Cases - AI Logo & CIP Generation: Generate logos in 55+ styles and corporate identity mockups (business cards, signage, vehicles, apparel) 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 using Gemini 3.1 Pro text output. - Banners, Slides & Social Photos: Design HTML/CSS banners and social images at exact platform dimensions (Instagram, Facebook, LinkedIn, YouTube, Google Ads), build Chart.js presentations, and export via headless Chrome screenshots. - Use Case: A startup needs a full brand package: generate a minimalist logo, create a CIP mockup set with that logo, then render an HTML pitch deck 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 after setting GEMINI_API_KEY. You can first create a design brief with scripts/logo/search.py using the --design-brief option to pick from 55+ styles and 30 color palettes.

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 image sizes does it support for social media platforms?

References cover exact dimensions for Instagram (1080x1080 post, 1080x1920 story), Facebook (1200x630), Twitter/X (1200x675), LinkedIn (1200x627), Pinterest (1000x1500), YouTube (1280x720), and Google Ads formats like 300x250.

Can it generate SVG icons without an image generation API?

Yes. The icon script 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 at 16, 24, 32, and 48 pixels.

What dependencies and setup are required?

You need Python 3, the google-genai and pillow packages installed via pip, and a GEMINI_API_KEY environment variable from Google AI Studio. On Windows, use python instead of python3 for all script commands.

Why do exported screenshots show wrong fonts or broken layouts?

Screenshots taken before web fonts and images finish loading render incorrectly. Add a 3-5 second delay using --virtual-time-budget in headless Chrome or waitForTimeout in Playwright, then visually verify and re-export if issues remain.