skills.rest
prasanna591
prasanna591COMMUNITY
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 30, 2026
Search Tags:#brand identity#logo design#gemini#mockups#social media images#html slides#svg icons
One-click install
npx skills add https://github.com/prasanna591/ProblemSolvingMind --skill design-prasanna591
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/prasanna591/ProblemSolvingMind/tree/main/.opencode/skills/design
Command: npx skills add https://github.com/prasanna591/ProblemSolvingMind --skill design-prasanna591

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 resizing for each platform. This Skill unifies those tasks into scriptable workflows with AI generation and exact-size HTML-to-screenshot export. ## Core Features & Use Cases - AI Logo & CIP Generation: Create logos across 55+ styles and corporate identity mockups across 50+ deliverables using Gemini image models, with BM25 search over style, color, and industry guides. - SVG Icon Generation: Generate 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, etc.) and export via headless Chrome screenshots; build Chart.js pitch decks from layout and copywriting references. - Use Case: A startup founder needs a complete brand package: generate a minimalist logo, produce business card and signage mockups with that logo, then render an HTML 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 after setting GEMINI_API_KEY. You can first create a design brief with search.py --design-brief to pick from 55+ styles and 30 color palettes.

How to create business card and stationery mockups from 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 image sizes does it support for social media platforms?▼

It covers Instagram post 1080x1080, story 1080x1920, Facebook post 1200x630, LinkedIn 1200x627, YouTube thumbnail 1280x720, Pinterest 1000x1500, and more. Designs are built in HTML and screenshotted at exact pixel dimensions.

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

Yes, icon generation uses gemini-3.1-pro-preview which outputs SVG as text, so no image API is needed. It supports 15 styles like outlined, filled, and duotone, plus batch variations and multi-size export.

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. Screenshot export uses headless Chrome, chrome-devtools, or Playwright.

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

This usually happens when screenshots are taken before web fonts and images finish loading. Add a 3-5 second delay or use --virtual-time-budget with headless Chrome, then visually verify exports and re-export after fixing the HTML.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

brand-guidelines

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

Community
Advanced
4asaanAI4asaanAI

ckm:design-system

Generate design tokens, CSS variables, component specs, and HTML slide decks.

Community
Advanced
miethemiethe

aesthetic

Guide repeatable design workflows for consistent UI aesthetics.

Community
Advanced
marvelousempiremarvelousempire

image

Generate and optimize marketing images from text prompts using AI models and design tools.

Community
Intermediate