# Design

> Skill de diseño integral: identidad de marca, tokens de diseño, estilos UI, generación de logos (55 estilos, Gemini, Atlas Cloud o MuAPI), CIP, presentaciones HTML, banners, iconos y fotos sociales.

Fuente: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design
Markdown: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design.md

Repositorio: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Autor: nextlevelbuilder
Licencia: MIT
Actualizado: hace 23 días
Coste de contexto: 160 tok instalada, 3.4k tok al activarse, 66.7k tok con todos los archivos del bundle
Bundle: 36 archivos, 261 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design --agent claude-code
# Cursor
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design --agent cursor
# Codex
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design --agent codex
# Gemini CLI
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design --agent gemini
# Windsurf
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design --agent windsurf
# Cline
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design --agent cline
```

## Qué hace

- Genera logos con IA (55 estilos) usando Gemini, Atlas Cloud o MuAPI
- Crea mockups de CIP (programa de identidad corporativa) con 50 deliverables y 20 estilos
- Construye presentaciones HTML con Chart.js, plantillas y fórmulas de copywriting
- Diseña banners (22 estilos) para redes sociales, ads, web e impresión con tamaños exactos
- Genera iconos SVG (15 estilos) con Gemini 3.1 Pro y fotos sociales multi-plataforma vía screenshot

## Cuándo usarla

- Necesitas identidad de marca, voz o activos visuales
- Vas a crear un sistema de diseño con tokens y specs
- Necesitas diseñar un logo, CIP, presentación, banner, icono o foto social para redes

## Qué la activa

- "Genera un logo minimalista para mi startup tech llamada TechFlow"
- "Crea un set completo de CIP con tarjeta de presentación para mi marca"
- "Diseña un banner para el header de Twitter/X y otro para Instagram Story"
- "Genera un set de iconos outlined para mi app de dashboard"

## Antes de instalar

- Requiere Python 3, la variable GEMINI_API_KEY (y opcionalmente MUAPI_API_KEY), y las librerías google-genai y pillow instaladas.
- Necesita en el PATH: pip, python, python3
- Variables de entorno: ATLASCLOUD_API_KEY, GEMINI_API_KEY, GOOGLE_API_KEY, MUAPI_API_KEY
- makes network requests
- needs API credentials

## Archivos

- SKILL.md — 13 KB
- data/cip/deliverables.csv — 13 KB
- data/cip/industries.csv — 5 KB
- data/cip/mockup-contexts.csv — 5 KB
- data/cip/styles.csv — 6 KB
- data/icon/styles.csv — 2 KB
- data/logo/colors.csv — 10 KB
- data/logo/industries.csv — 13 KB
- data/logo/styles.csv — 13 KB
- references/banner-sizes-and-styles.md — 5 KB
- references/cip-deliverable-guide.md — 2 KB
- references/cip-design.md — 4 KB
- references/cip-prompt-engineering.md — 2 KB
- references/cip-style-guide.md — 2 KB
- references/design-routing.md — 6 KB
- references/icon-design.md — 4 KB
- references/logo-color-psychology.md — 3 KB
- references/logo-design.md — 4 KB
- references/logo-prompt-engineering.md — 4 KB
- references/logo-style-guide.md — 3 KB
- references/slides-copywriting-formulas.md — 3 KB
- references/slides-create.md — 153 B
- references/slides-html-template.md — 9 KB
- references/slides-layout-patterns.md — 4 KB
- references/slides-strategies.md — 3 KB
- references/slides.md — 2 KB
- references/social-photos-design.md — 11 KB
- scripts/cip/core.py — 8 KB
- scripts/cip/generate.py — 19 KB
- scripts/cip/render-html.py — 14 KB
- scripts/cip/search.py — 4 KB
- scripts/icon/generate.py — 17 KB
- scripts/logo/core.py — 6 KB
- scripts/logo/generate.py — 27 KB
- scripts/logo/search.py — 5 KB
- scripts/logo/tests/test_generate.py — 10 KB

## SKILL.md

Reproducido tal cual desde nextlevelbuilder/ui-ux-pro-max-skill bajo MIT. Esta sección es el documento original y está en inglés.

# 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` | Bundled sibling skill |
| Tokens, specs, CSS vars | `design-system` | Bundled sibling skill |
| shadcn/ui, Tailwind, code | `ui-styling` | Bundled sibling 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

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

### Logo: Search Styles/Colors/Industries

```bash
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.

```bash
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, use the bundled `ui-ux-pro-max` skill for the gallery.

## CIP Design (Built-in)

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

### CIP: Generate Brief

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

### CIP: Search Domains

```bash
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

```bash
# 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

```bash
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. This workflow needs nothing outside the bundle: `references/banner-sizes-and-styles.md` and the bundled `ui-ux-pro-max` skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.

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** — Read `references/banner-sizes-and-styles.md` and use the bundled `ui-ux-pro-max` skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references
3. **Design** — Create the HTML/CSS banner at exact platform dimensions; use supplied assets or CSS-built visuals, or an authorized image-generation capability if the runtime provides one
4. **Export** — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML/CSS source and mark PNG export as pending
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

```bash
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

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

### Icon: Multi-size Export

```bash
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 the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference).

Load `references/social-photos-design.md` for sizes, templates, best practices.

### Social Photos: Workflow

1. **Orchestrate** — Track the steps below with the runtime's native task list; 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** — bundled `brand` → `design-system` → `ui-ux-pro-max` skills; HTML per idea × size
5. **Export** — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)
6. **Verify** — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout/styling issues and re-export
7. **Report** — Summary to `plans/reports/` with design decisions
8. **Organize** — Sort output files and reports into the project's asset directories

### 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 | 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:
```bash
python3 --version || python --version
```

## Setup

```bash
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](https://muapi.ai/docs/api-reference) for authentication
and the [nano-banana model contract](https://api.muapi.ai/api/v1/models/nano-banana)
or [nano-banana-pro model contract](https://api.muapi.ai/api/v1/models/nano-banana-pro)
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

**Bundled sub-skills:** brand, design-system, ui-styling
**Related Skills:** ui-ux-pro-max

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [nextlevelbuilder](https://skillsagentes.com/creators/nextlevelbuilder.md) — 7 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Ui Ux Pro Max](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max.md): Inteligencia de diseño UI/UX para web, móvil y escritorio: úsala al diseñar, construir, revisar o corregir interfaces, componentes, accesibilidad, interacción, layout y tipografía.
- [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Design System](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system.md): Arquitectura de tokens en tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, specs de componentes y generación estratégica de slides con marca.
- [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)