design

nextlevelbuilder/ui-ux-pro-max-skill · Agent Skill

Genera contenuti visivi: loghi, identità di marca, banner, icone, presentazioni e immagini per i social media.

Panoramica

Autore	nextlevelbuilderOrganizzazione
Repository	nextlevelbuilder/ui-ux-pro-max-skill ↗
Cartella dello skill	`design`
Stelle	125.906
File inclusi	1
Licenza	MIT
Aggiornato	2 settembre 2026
Link	Sorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza

rischio medio · 2 punti richiedono attenzione

Compatibilità

servono programmi aggiuntivi

Skill simili

139 skill simili trovati

Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

Install the “design” skill from mozgi.io (https://mozgi.io/skills/design/) for me.

1. Download the archive: https://mozgi.io/skills/design/download
   If it fails, take the skill folder from the source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “design” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/design/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .claude/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .claude/skills/design

Riavvia Claude Code: lo skill compare nell'elenco; per richiamarlo a mano usa /design. Per tutti i progetti: ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .agents/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .agents/skills/design

Codex cerca gli skill in .agents/skills dalla cartella corrente fino alla radice del repo; richiamalo con /skills o $design. Per tutti i progetti: ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .cursor/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .cursor/skills/design

Cursor carica lo skill all'avvio; richiamalo con “/” nella chat Agent. Cursor legge anche .claude/skills e .agents/skills. Per tutti i progetti: ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill
mkdir -p .gemini/skills
cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design .gemini/skills/design

Gemini CLI propone di attivare lo skill quando il compito corrisponde: tu confermi. Per tutti i progetti: ~/.gemini/skills.

File dello skill

1 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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 |

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana, Atlas

Cloud, and MuAPI image generation.

Logo: Generate Design Brief

python3 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 scripts/logo/search.py "minimalist clean" --domain style
python3 scripts/logo/search.py "tech professional" --domain color
python3 scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
python3 scripts/logo/generate.py --brand "TechFlow" --provider atlas
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi
python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-model nano-banana-pro

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.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).

CIP: Generate Brief

python3 scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 scripts/cip/search.py "business card letterhead" --domain deliverable
python3 scripts/cip/search.py "luxury premium elegant" --domain style
python3 scripts/cip/search.py "hospitality hotel" --domain industry
python3 scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 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)

CIP: Render HTML Presentation

python3 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.

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

1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity

2. Research — Activate ui-ux-pro-max, browse Pinterest for references

3. Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal

4. Export — Screenshot to PNG at exact dimensions via chrome-devtools

5. Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

| Platform | Type | Size (px) |

|----------|------|-----------|

| Facebook | Cover | 820 x 312 |

| Twitter/X | Header | 1500 x 500 |

| LinkedIn | Personal | 1584 x 396 |

| YouTube | Channel art | 2560 x 1440 |

| Instagram | Story | 1080 x 1920 |

| Instagram | 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 scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: 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

1. Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work

2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements

3. Ideate — 3-5 concepts, present via AskUserQuestion

4. Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size

5. Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)

6. Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export

7. Report — Summary to plans/reports/ with design decisions

8. Organize — Invoke assets-organizing skill to sort output files and reports

Social Photos: Key Sizes

|----------|-----------|----------|-----------|

| IG Post | 1080×1080 | FB Post | 1200×630 |

| IG Story | 1080×1920 | X Post | 1200×675 |

| IG Carousel | 1080×1350 | LinkedIn | 1200×627 |

| YT Thumb | 1280×720 | Pinterest | 1000×1500 |

Workflows

Complete Brand Package

1. Logo → scripts/logo/generate.py → Generate logo variants

2. CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups

3. Presentation → Load references/slides-create.md → Build pitch deck

New Design System

1. Brand (brand skill) → Define colors, typography, voice

2. Tokens (design-system skill) → Create semantic token layers

3. 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 --version

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

# Optional MuAPI provider (no extra Python package required)
export MUAPI_API_KEY="your-key"

MuAPI uses the asynchronous model endpoint and prediction result API. See the

MuAPI API reference ↗ for authentication

and the nano-banana model contract ↗

or nano-banana-pro model contract ↗

for the current model-specific schemas. The logo generator supports both documented

model slugs and sends their shared required prompt plus optional aspect_ratio

fields; the Pro model also accepts an optional resolution field that this focused

logo workflow leaves at the provider default.

> Note for Windows: Use python instead of pip where 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

Domande frequenti

Che cosa fa lo skill design?

Genera contenuti visivi: loghi, identità di marca, banner, icone, presentazioni e immagini per i social media.

Come si installa design?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona design?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi design funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

design è gratuito?

Lo skill è pubblicato apertamente da nextlevelbuilder con licenza MIT. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →

slides Crea presentazioni HTML strategiche con Chart.js, token di design, layout adattivi, formule di copia e strategie di slide contestuali. nextlevelbuilder141k

ui-styling Crea interfacce utente belle e accessibili con componenti shadcn/ui (basati su Radix UI + Tailwind), stile utility di Tailwind CSS e design visivi basati su canvas. Utilizza quando si costruiscono interfacce utente, si implementano sistemi di design, si creano layout responsivi, si aggiungono componenti accessibili (dialoghi, menu a discesa, form, tabelle), si personalizzano temi e colori, si implementa la modalità scura, si generano design visivi e poster, o si stabiliscono modelli di stile coerenti in tutte le applicazioni. nextlevelbuilder141k

ui-ux-pro-max Intelligenza del design UI/UX completa con 50+ stili, 97 palette e 9 stack tecnologici per la creazione di interfacce professionali. nextlevelbuilder141k

banner-design Sviluppa banner per social media, pubblicità, eroi del sito, asset creativi e stampa. Diverse opzioni di direzione artistica con effetti visivi generati da intelligenza artificiale. Azioni: sviluppo, creazione, generazione di banner. Piattaforme: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, eroe del sito, stampa. Stili: minimalista, gradiente, tipografia audace, basato su foto, illustrato, geometrico, retrò, morfismo vetro, 3D, neon, duotono, editoriale, collage. Utilizza le competenze ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal. nextlevelbuilder141k

design Complessa abilità di design: identità del marchio, design-token, stilizzazione dell'interfaccia utente, generazione di loghi (55 stili, Gemini AI), programma di identità aziendale (50 materiali forniti, layout CIP), presentazioni in HTML (Chart.js), design di banner (22 stili, social/ pubblicità/web/stampa), design di icone (15 stili, SVG, Gemini 3.1 Pro), foto social (HTML→screenshot, multipiattaforma). Azioni: sviluppo del logo, creazione del CIP, generazione di layout, creazione di slide, design del banner, generazione dell'icona, creazione di foto social, immagini per i social, identità del marchio, sistema di design. Piattaforme: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads. nextlevelbuilder141k

design-system Architettura dei token, specifiche dei componenti e generazione di slide. Token a tre strati (primitivo→semantica→componente), variabili CSS, scale di spaziatura/tipografia, specifiche dei componenti, creazione strategica di slide. Utilizzato per token di design, design sistemico, presentazioni in conformità con il brand. nextlevelbuilder141k