design
Skill0 starsChanged 28 days agoMITView on GitHub
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. Use when producing a concrete visual deliverable such as logo, mockup, CIP, icon, banner or social image. For UI or interface design use ui-ux-pro-max; for CSS and styling code use ui-styling; for one single banner use banner-design.
- Reads credentials
- Installs packages
We split this skill into the rules it gives an agent
4 rules. 0 are common, 3 are distinctive, and 1 is very specific to this project.
0
Common
Most of the 174 edited versions we read keep these.
3
Distinctive
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 67
IMPORTANT: When scripts fail, try to fix them directly.
- Very specific: line 69
After generation, ALWAYS ask user about HTML preview via AskUserQuestion.
- Distinctive: line 114
Tip: If no logo exists, use Logo Design section above first.
- Distinctive: line 296
Check if Python is installed:
“Common” is measured: kept by at least 6 in 10 of the 174 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Design
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
When to Use
- Brand identity, voice, assets
- Design system tokens and specs
- UI styling with shadcn/ui + Tailwind
- Logo design and AI generation
- Corporate identity program (CIP) deliverables
- Presentations and pitch decks
- Banner design for social media, ads, web, print
- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
Sub-skill Routing
| Task | Sub-skill | Details |
| Brand identity, voice, assets | brand | External skill |
| Tokens, specs, CSS vars | design-system | External skill |
| shadcn/ui, Tailwind, code | ui-styling | External skill |
| Logo creation, AI generation | Logo (built-in) | references/logo-design.md |
| CIP mockups, deliverables | CIP (built-in) | references/cip-design.md |
| Presentations, pitch decks | Slides (built-in) | references/slides.md |
| Banners, covers, headers | Banner (built-in) | references/banner-sizes-and-styles.md |
| Social media images/photos | Social Photos (built-in) | references/social-photos-design.md |
| SVG icons, icon sets | Icon (built-in) | references/icon-design.md |
Logo Design (Built-in)
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
Logo: Generate Design Brief
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"Logo: Search Styles/Colors/Industries
python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industryLogo: Generate with AI
ALWAYS generate output logo images with white background.
python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintageIMPORTANT: When scripts fail, try to fix them directly.
After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.
CIP Design (Built-in)
50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
CIP: Generate Brief
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"CIP: Search Domains
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockupCIP: Generate Mockups
# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
# Without logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-promptModels: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)
CIP: Render HTML Presentation
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-outputTip: If no logo exists, use Logo Design section above first.
Slides (Built-in)
Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load references/slides-create.md for the creation workflow.
Slides: Knowledge Base
| Topic | File |
| Creation Guide | references/slides-create.md |
| Layout Patterns | references/slides-layout-patterns.md |
| HTML Template | references/slides-html-template.md |
| Copywriting | references/slides-copywriting-formulas.md |
| Strategies | references/slides-strategies.md |
Banner Design (Built-in)
22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.
Load references/banner-sizes-and-styles.md for complete sizes and styles reference.
Banner: Workflow
- Gather requirements via
AskUserQuestion— purpose, platform, content, brand, style, quantity - Research — Activate
ui-ux-pro-max, browse Pinterest for references - Design — Create HTML/CSS banner with
frontend-design, generate visuals withai-artist/ai-multimodal - Export — Screenshot to PNG at exact dimensions via
chrome-devtools - Present — Show all options side-by-side, iterate on feedback
Banner: Quick Size Reference
| Platform | Type | Size (px) |
| Cover | 820 x 312 | |
| Twitter/X | Header | 1500 x 500 |
| Personal | 1584 x 396 | |
| YouTube | Channel art | 2560 x 1440 |
| Story | 1080 x 1920 | |
| Post | 1080 x 1080 | |
| Google Ads | Med Rectangle | 300 x 250 |
| Website | Hero | 1920 x 600-1080 |
Banner: Top Art Styles
| Style | Best For |
| Minimalist | SaaS, tech |
| Bold Typography | Announcements |
| Gradient | Modern brands |
| Photo-Based | Lifestyle, e-com |
| Geometric | Tech, fintech |
| Glassmorphism | SaaS, apps |
| Neon/Cyberpunk | Gaming, events |
Banner: Design Rules
- Safe zones: critical content in central 70-80%
- One CTA per banner, bottom-right, min 44px height
- Max 2 fonts, min 16px body, ≥32px headline
- Text under 20% for ads (Meta penalizes)
- Print: 300 DPI, CMYK, 3-5mm bleed
Icon Design (Built-in)
15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
Icon: Generate Single Icon
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotoneIcon: Generate Batch Variations
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./iconsIcon: Multi-size Export
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./iconsIcon: Top Styles
| Style | Best For |
| outlined | UI interfaces, web apps |
| filled | Mobile apps, nav bars |
| duotone | Marketing, landing pages |
| rounded | Friendly apps, health |
| sharp | Tech, fintech, enterprise |
| flat | Material design, Google-style |
| gradient | Modern brands, SaaS |
Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.
Social Photos (Built-in)
Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.
Load references/social-photos-design.md for sizes, templates, best practices.
Social Photos: Workflow
- Orchestrate —
project-managementskill for TODO tasks; parallel subagents for independent work - Analyze — Parse prompt: subject, platforms, style, brand context, content elements
- Ideate — 3-5 concepts, present via
AskUserQuestion - Design —
/ckm:brand→/ckm:design-system→ randomly invoke/ck:ui-ux-pro-maxOR/ck:frontend-design; HTML per idea × size - Export —
chrome-devtoolsor Playwright screenshot at exact px (2x deviceScaleFactor) - Verify — Use Chrome MCP or
chrome-devtoolsskill to visually inspect exported designs; fix layout/styling issues and re-export - Report — Summary to
plans/reports/with design decisions - Organize — Invoke
assets-organizingskill to sort output files and reports
Social Photos: Key Sizes
| Platform | Size (px) | Platform | Size (px) |
| IG Post | 1080×1080 | FB Post | 1200×630 |
| IG Story | 1080×1920 | X Post | 1200×675 |
| IG Carousel | 1080×1350 | 1200×627 | |
| YT Thumb | 1280×720 | 1000×1500 |
Workflows
Complete Brand Package
- Logo →
scripts/logo/generate.py→ Generate logo variants - CIP →
scripts/cip/generate.py --logo ...→ Create deliverable mockups - Presentation → Load
references/slides-create.md→ Build pitch deck
New Design System
- Brand (brand skill) → Define colors, typography, voice
- Tokens (design-system skill) → Create semantic token layers
- Implement (ui-styling skill) → Configure Tailwind, shadcn/ui
References
| Topic | File |
| Design Routing | references/design-routing.md |
| Logo Design Guide | references/logo-design.md |
| Logo Styles | references/logo-style-guide.md |
| Logo Colors | references/logo-color-psychology.md |
| Logo Prompts | references/logo-prompt-engineering.md |
| CIP Design Guide | references/cip-design.md |
| CIP Deliverables | references/cip-deliverable-guide.md |
| CIP Styles | references/cip-style-guide.md |
| CIP Prompts | references/cip-prompt-engineering.md |
| Slides Create | references/slides-create.md |
| Slides Layouts | references/slides-layout-patterns.md |
| Slides Template | references/slides-html-template.md |
| Slides Copy | references/slides-copywriting-formulas.md |
| Slides Strategy | references/slides-strategies.md |
| Banner Sizes & Styles | references/banner-sizes-and-styles.md |
| Social Photos Guide | references/social-photos-design.md |
| Icon Design Guide | references/icon-design.md |
Scripts
| Script | Purpose |
scripts/logo/search.py | Search logo styles, colors, industries |
scripts/logo/generate.py | Generate logos with Gemini AI |
scripts/logo/core.py | BM25 search engine for logo data |
scripts/cip/search.py | Search CIP deliverables, styles, industries |
scripts/cip/generate.py | Generate CIP mockups with Gemini |
scripts/cip/render-html.py | Render HTML presentation from CIP mockups |
scripts/cip/core.py | BM25 search engine for CIP data |
scripts/icon/generate.py | Generate SVG icons with Gemini 3.1 Pro |
Prerequisites
Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py).
Check if Python is installed:
python3 --version || python --versionSetup
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillowNote for Windows: Use
pythoninstead ofpipwhere needed (e.g.,python -m pip install ...).
Integration
External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
Other versions196 projects use a version of this.
Word for word · 0
None found.
Edited · 37
- nextlevelbuilder/ui-ux-pro-max-skill★ 144k67% same
- joye61/pic-smaller★ 2.9k100% same
- Ohh-889/skyroc-admin★ 795100% same
- cdavid817/vanehub-ai★ 116100% same
- rylsherdamz-rgb/stellar-forge★ 17100% same
- ammdevl/vibe-match★ 8100% same
- jdanigo/hydraia★ 8100% same
- EkuboProtocol/wallet★ 6100% same
- mandarzope/fullstack-swarm★ 4100% same
- classical-coderrr/AI-Search-food★ 2100% same
27 more not listed
Wrote their own version · 159
- Yeachan-Heo/oh-my-codex★ 34ksame name
- tokio-rs/toasty★ 3.2ksame name
- PaulWoitaschek/Voice★ 3.2ksame name
- oxsecurity/megalinter★ 2.6ksame name
- Infisical/agent-vault★ 2.5ksame name
- static-web-server/static-web-server★ 2.4ksame name
- SethGammon/Citadel★ 927same name
- vladikk/modularity★ 538same name
- udecode/better-convex★ 452same name
- hardisgroupcom/sfdx-hardis★ 410same name
149 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use infra-audit, infra and 5 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
mayankjain1815-commitsSkillinfra-audit
Reads docker-compose, env files, ORM configs, and connection strings to map current infrastructure. Flags missing layers (cache, queue, analytics) based on observed access patterns. Outputs a structured infrastructure manifest.
Also in 3 projects that use this
henrikthome-archSkillinfra
Manage all infrastructure for the Volos school project — Render (API backend), Cloudflare (DNS + Pages frontend), PostgreSQL database, and GitHub Actions workflows.
Also in 3 projects that use this
MicrosoftSkillperf
Speed and memory performance rules for Rust crates, the Node addon, webui-framework, and webui-router.
Also in 5 projects that use this
mrgoonieSkillrepomix
Package entire code repositories into single AI-friendly files using Repomix. Capabilities include pack codebases with customizable include/exclude patterns, generate multiple output formats (XML, Markdown, plain text), preserve file structure and context, optimize for AI consumption with token counting, filter by file types and directories, add custom headers and summaries. Use when packaging codebases for AI analysis, creating repository snapshots for LLM context, analyzing third-party libraries, preparing for security audits, generating documentation context, or evaluating unfamiliar codebases.
Also in 4 projects that use this
thiago-shopperSkillcodebase-map
Use this skill when the user wants to generate or refresh per-folder MAP.md files that describe each folder's purpose, files, and subfolders, so Claude can navigate the codebase faster and avoid recreating things that already exist. Trigger phrases: "map this codebase", "generate codebase maps", "refresh the maps", "build folder maps", "update MAP.md", "/codebase-map".
Also in 3 projects that use this
ArvorCoSkillspecify
Create feature specification from natural language description. Use when starting a new feature or creating a spec. Triggers on: create spec, specify feature, new feature spec.
Also in 5 projects that use this
In this repository43 other files it gives its agents.
- 3d-performance-accessibilitySkill
- 3d-web-designSkill
- accessibilitySkill
- admin-shellSkill
- anti-hallucinationSkill
- api-designSkill
- architectureSkill
- backoffice-designSkill
- banner-designSkill
- bragSkill
- brag-slimSkill
- brandSkill
- ci-cd-automationSkill
- coding-standardsSkill
- context-engineeringSkill
- databaseSkill
- data-tablesSkill
- design-system-shadcnSkill
- design-systemSkill
- documentationSkill
- form-designSkill
- git-workflowSkill
- gsap-coreSkill
- gsap-frameworksSkill
- gsap-performanceSkill
- gsap-pluginsSkill
- gsap-reactSkill
- gsap-scrolltriggerSkill
- gsap-timelineSkill
- gsap-utilsSkill
- monitoring-observabilitySkill
- motion-design-webSkill
- performanceSkill
- saas-design-systemSkill
- saas-system-designSkill
- saas-ui-designSkill
- securitySkill
- slidesSkill
- state-managementSkill
- testingSkill
- threejs-webglSkill
- ui-stylingSkill
- ui-ux-pro-maxSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.