Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI 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 for brand, logo, icon, banner, slide, or social-image design work.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Attribution: Sourced from nextlevelbuilder/ui-ux-pro-max-skill by Next Level Builder, licensed MIT. Modified for this collection.
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
| 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 |
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
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 industry
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 vintage
IMPORTANT: 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.
50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
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 mockup
# 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-prompt
Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
Tip: If no logo exists, use Logo Design section above first.
Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load references/slides-create.md for the creation workflow.
| 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 |
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.
AskUserQuestion — purpose, platform, content, brand, style, quantityui-ux-pro-max, browse Pinterest for referencesfrontend-design, generate visuals with ai-artist/ai-multimodalchrome-devtools| 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 |
| 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 |
15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
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 duotone
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
| 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.
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.
project-management skill for TODO tasks; parallel subagents for independent workAskUserQuestion/ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × sizechrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-exportplans/reports/ with design decisionsassets-organizing skill to sort output files and reports| 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 |
scripts/logo/generate.py → Generate logo variantsscripts/cip/generate.py --logo ... → Create deliverable mockupsreferences/slides-create.md → Build pitch deck| 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 |
| 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 |
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillow
External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Use when long-lived agents, project memories, system prompts, or playbooks are repeatedly summarized, rewritten, or optimized and risk losing domain detail, provenance, or execution learnings.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill when the user explicitly asks to map, document, or onboard into an existing codebase. Trigger for prompts like "map this codebase", "document this architecture", "onboard me to this repo", or "create codebase docs". Do not trigger for routine feature implementation, bug fixes, or narrow code edits unless the user asks for repository-level discovery.
日本語の概要は準備中です。原文の説明を表示しています。
Adds educational comments to a code file so it becomes a learning resource, asking for the file (with a list of close matches) if none is given. Use when preparing code for learners, onboarding, or teaching.
日本語の概要は準備中です。原文の説明を表示しています。
Write, debug, and optimize Adobe Illustrator automation scripts using ExtendScript (JavaScript/JSX). Use when creating or modifying scripts that manipulate documents, layers, paths, text frames, colors, symbols, artboards, or any Illustrator DOM objects. Covers the complete JavaScript object model, coordinate system, measurement units, export workflows, and scripting best practices.
日本語の概要は準備中です。原文の説明を表示しています。
Patterns and techniques for adding governance, safety, and trust controls to AI agent systems. Use this skill when: - Building AI agents that call external tools (APIs, databases, file systems) - Implementing policy-based access controls for agent tool usage - Adding semantic intent classification to detect dangerous prompts - Creating trust scoring systems for multi-agent workflows - Building audit trails for agent actions and decisions - Enforcing rate limits, content filters, or tool restrictions on agents - Working with any agent framework (PydanticAI, CrewAI, OpenAI Agents, LangChain, AutoGen)
日本語の概要は準備中です。原文の説明を表示しています。
Check any AI agent codebase against the OWASP Agentic Security Initiative (ASI) Top 10 risks. Use this skill when: - Evaluating an agent system's security posture before production deployment - Running a compliance check against OWASP ASI 2026 standards - Mapping existing security controls to the 10 agentic risks - Generating a compliance report for security review or audit - Comparing agent framework security features against the standard - Any request like "is my agent OWASP compliant?", "check ASI compliance", or "agentic security audit"
日本語の概要は準備中です。原文の説明を表示しています。