designpor nextlevelbuilder

Design Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: identidad de marca, tokens de diseño, estilo de UI, generación de logos y programas de identidad corporativa.

Marca y sistemas de diseño

Descargar OpenDesign Ver guía de uso

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design/SKILL.mdSKILL.md

--- name: design description: 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, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)

Encabezados y materia preliminar leídos del archivo original el 14 de septiembre de 2026 · 13 348 caracteres completos

01 Qué hace

Qué hace el Skill de diseño en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Skill de diseño unificado que cubre identidad de marca, tokens de diseño, estilo de UI con shadcn/ui y Tailwind, generación de logotipos (55 estilos vía Gemini, Atlas Cloud o MuAPI), programas de identidad corporativa con 50 entregables, presentaciones HTML usando Chart.js, diseño de banners (22 estilos de dirección de arte para redes sociales, anuncios, web e impresión), diseño de iconos (15 estilos, salida SVG vía Gemini 3.1 Pro), y diseño de fotos para redes sociales en Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok y Threads. Redirige a sub-skills externos para brand, design-system y ui-styling, mientras ofrece workflows integrados para logo, CIP, slides, banners, icons y social photos con scripts en Python, generación con IA y exportación de HTML a captura de pantalla.

Qué produce

Capturas de banner en PNG con las dimensiones exactas de la plataforma, exportadas vía chrome-devtools
Archivos de icono SVG en 15 estilos con exportaciones opcionales multitamaño y variaciones por lotes
Imágenes para redes sociales con dimensiones específicas de cada plataforma, almacenadas en directorios de assets organizados

Ver el ejemplo de prompt ↗

Cómo funciona

01
Enrutar por Tipo de Tarea
El skill despacha la identidad y voz de marca al sub-skill brand, tokens y especificaciones a design-system, código shadcn/ui y Tailwind a ui-styling, y maneja logo, CIP, slides, banners, icons y social photos con workflows integrados.
02
Generar Logotipos con Proveedores de IA
Ejecute scripts de Python para buscar entre 55 estilos, 30 paletas de color y 25 guías de industria, luego genere logotipos vía Gemini Nano Banana, Atlas Cloud o MuAPI con fondos blancos.
03
Crear Entregables de CIP con Mockups
Genere mockups del programa de identidad corporativa para 50 entregables usando modelos Gemini Flash o Pro, opcionalmente con superposición de logotipo, y luego renderice presentaciones HTML de la salida.
04
Crear presentaciones estratégicas en HTML
Cree presentaciones con integración de Chart.js, tokens de diseño y fórmulas de copywriting cargando la referencia del workflow de creación de diapositivas.
05
Diseñar banners con HTML/CSS
Recopile los requisitos, investigue en Pinterest mediante ui-ux-pro-max, diseñe banners en HTML/CSS con frontend-design y ai-artist/ai-multimodal para las imágenes, y luego exporte con chrome-devtools en las dimensiones exactas.
06
Exportar y verificar capturas de pantalla
Use chrome-devtools o Playwright para capturar los diseños con las dimensiones exactas en píxeles y un factor de escala de dispositivo 2x; después, inspeccione visualmente y corrija los problemas de maquetación antes de la exportación final.

02 Encuentra tu caso de uso

Cuándo usar el skill design

Usa el skill design en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El ajuste y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

Creación de paquetes de identidad de marca con logotipo, entregables de identidad corporativa y presentaciones de pitch deck
Diseño de imágenes multiplataforma para redes sociales en Instagram, Facebook, LinkedIn, Twitter, Pinterest y TikTok
Generación de banners para portadas de redes sociales, campañas publicitarias, cabeceras de sitios web y materiales impresos
Creación de sistemas de diseño con tokens semánticos, configuración de Tailwind y componentes de shadcn/ui

Conozca los límites

El generador de iconos produce únicamente salida de texto SVG, no archivos de imagen ráster

Qué proporcionar

Clave de API de GeminiVariable de entorno obligatoria para la generación de logotipos, CIP e iconos a través de Google AI Studio
Clave de API de MuAPI (opcional)Variable de entorno opcional para usar MuAPI como proveedor alternativo de generación de imágenes para logotipos
Ruta del archivo de logotipo para CIPRuta a un archivo PNG de logotipo existente para superponer en los entregables de identidad corporativa al generar maquetas de CIP
Requisitos del banner mediante AskUserQuestionPropósito, plataforma, contenido, guías de marca, estilo de dirección de arte y cantidad, recopilados de forma interactiva antes del diseño del banner
Contexto de marca para fotos socialesGuías de marca del sub-skill de marca y tokens de diseño de design-system para mantener la coherencia en las imágenes de redes sociales

03 Dentro del skill

Reglas que el skill de diseño da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Generar siempre los logotipos con fondos blancos
La generación de logotipos debe producir imágenes de salida con fondos blancos en todos los casos.
Las rutas de los scripts son relativas al directorio del skill
Las rutas de los scripts en este skill y en su carpeta de referencias son relativas al directorio que contiene SKILL.md, no a la raíz del proyecto.
Preguntar al usuario sobre la vista previa en HTML tras la generación del logotipo
Después de generar los logotipos, pregunte siempre al usuario mediante AskUserQuestion si desea una galería de vista previa en HTML y, en caso afirmativo, invoque el skill ui-ux-pro-max para crearla.
Corregir directamente los scripts fallidos
Cuando los scripts de Python fallen durante la ejecución, intente corregirlos directamente en lugar de reportar el error.
Usar superposición de logo recomendada para CIP
Al generar mockups de CIP, usar un archivo de logo existente con la marca --logo es el enfoque recomendado.
El texto del banner debe mantenerse por debajo del 20% para anuncios
En los banners publicitarios, mantenga la cobertura de texto por debajo del 20% del área total, ya que las plataformas de Meta penalizan los anuncios con mucho texto.
Usar Python en lugar de Python3 en Windows
En sistemas Windows, reemplace python3 por python en todos los ejemplos de comandos a lo largo del skill.
Contenido crítico del banner en zonas seguras centrales
Coloque todo el contenido crítico del banner dentro de la zona segura central del 70-80% para garantizar la visibilidad en todas las plataformas.

04 Ponlo a trabajar

Instalar design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar design a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Forma genérica de la CLI skills para .claude/skills/design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Verifique que los CTA del banner cumplan con el requisito mínimo de altura de 44px y estén posicionados en la parte inferior derecha
Asegúrese de que los banners impresos usen 300 DPI, modo de color CMYK, e incluyan de 3 a 5 mm de sangrado

En OpenDesign importe el diseño desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Rama main
Archivo de skill: .claude/skills/design/SKILL.md Checksum de contenido registrado en la verificación; commit 7f69fed
License: MIT De LICENSE; SKILL.md indica "MIT".
Estrellas del repositorio: 127.450 Snapshot de GitHub tomada el 14/09/2026 para todo el repositorio nextlevelbuilder/ui-ux-pro-max-skill, que contiene 7 skills en este catálogo. No es una calificación ni un conteo de uso para design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo usarloEnumera casos de uso: identidad de marca, tokens de diseño, estilos de UI, logos, CIP, presentaciones, banners, fotos para redes sociales, iconos
Enrutamiento de sub-skillsEnruta tareas a skills externas de marca/design-system/ui-styling o a workflows integrados de logotipos/CIP/diapositivas/banners/redes sociales/iconos
Rutas de scriptsExplica que las rutas de los scripts son relativas al directorio del skill, no a la raíz del proyecto
Diseño de logos (integrado)Comandos para buscar entre 55 estilos y generar logos mediante Gemini, Atlas Cloud o MuAPI con fondos blancos
Diseño de CIP (integrado)Comandos para buscar entre 50 entregables y generar mockups de identidad corporativa con modelos Flash o Pro
Diapositivas (integrado)Hace referencia a la creación estratégica de presentaciones HTML con Chart.js y fórmulas de copywriting
Diseño de banners (integrado)Flujo de trabajo para diseñar 22 estilos de dirección de arte usando frontend-design, ai-artist y chrome-devtools para exportación
Diseño de iconos (integrado)Comandos para generar iconos SVG en 15 estilos usando la salida solo de texto de Gemini 3.1 Pro
Fotos para redes sociales (integrado)Flujo de trabajo para diseño de imágenes sociales multiplataforma desde HTML hasta exportación de captura con verificación
Flujos de trabajoSecuencias para paquetes de marca completos y creación de nuevos design systems a través de sub-skills
Requisitos previosRequisito de Python con instrucciones específicas para Windows sobre los comandos python frente a python3
ConfiguraciónVariables de entorno para las claves de API de Gemini y MuAPI, además de la instalación de paquetes de Python

La descripción propia del Skill

"Skill de diseño integral: identidad de marca, design tokens, estilo de UI, generación de logos (55 estilos, Gemini, Atlas Cloud o MuAPI AI), programa de identidad corporativa (50 entregables, mockups CIP), presentaciones HTML (Chart.js), diseño de banners (22 estilos, social/ads/web/impresión), diseño de iconos (15 estilos, SVG, Gemini 3.1 Pro), fotos sociales (HTML→captura, multiplataforma). Acciones: diseñar logo, crear CIP, generar mockups, construir slides, diseñar banner, generar icono, crear fotos sociales, imágenes para redes sociales, identidad de marca, sistema de diseño. Plataformas: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 13.348 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill de design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Cómo ejecuto scripts de Python en Windows?

Sustituya python3 por python en todos los ejemplos de comandos. Por ejemplo, use python scripts/logo/search.py en lugar de python3 scripts/logo/search.py. Lo mismo se aplica a los comandos pip, donde puede necesitar python -m pip install.

Design

Ejecuta design en una tarea de trabajo real de marca y design-system.

Descarga OpenDesign, importa design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design

Qué hace el Skill de diseño en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill design

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill de diseño da a Claude Code y Codex

Generar siempre los logotipos con fondos blancos

Las rutas de los scripts son relativas al directorio del skill

Preguntar al usuario sobre la vista previa en HTML tras la generación del logotipo

Corregir directamente los scripts fallidos

Usar superposición de logo recomendada para CIP

El texto del banner debe mantenerse por debajo del 20% para anuncios

Usar Python en lugar de Python3 en Windows

Contenido crítico del banner en zonas seguras centrales