Habilidad de Equipo de Diseño
Esta habilidad proporciona conocimiento estructurado de diseño organizado por especialidad. En lugar de orientación genérica de diseño, carga el material de referencia adecuado para cada tarea: el alcance se adapta según lo que estás construyendo.
Comandos del Plugin
Esta habilidad es parte del plugin naksha. Para flujos de trabajo enfocados, usa estos comandos:
| Comando | Cuándo usarlo |
|---|---|
/design <tarea> | Flujo de trabajo completo de diseño con ensamblaje de equipo |
/design-reel <tarea> [--url <página>] | Graba al equipo de diseño trabajando — renderiza una ejecución de /design en un video reel compartible (9:16 + 16:9) |
/design-review <archivo o captura> | Audita un diseño existente — acepta archivos HTML, URLs de Figma, capturas de pantalla (crítica visual IA), o servidores de vista previa |
/design-system | Genera o extrae tokens de diseño |
/figma <URL> | Convierte un diseño de Figma a código de producción |
/figma-create <tarea> | Crea diseños directamente en Figma (páginas, componentes, estilos) |
/ux-audit <brief> | Audita un archivo de Figma contra un brief de diseño |
/design-handoff | Genera documentos de entrega para desarrolladores (tokens, especificaciones, APIs de componentes) |
/figma-responsive | Genera variantes móvil/tablet a partir de un frame de escritorio de Figma |
/figma-sync | Detecta desviaciones entre diseños de Figma y la implementación en código |
/design-present | Genera una presentación HTML a partir de pantallas de Figma |
/brand-kit | Genera un kit de marca completo a partir de colores y ambiente |
/component-docs | Genera automáticamente documentación de componentes desde Figma |
/figma-prototype | Crea conexiones de prototipo interactivo en Figma |
/site-to-figma | Captura un sitio web en vivo y lo recrea en Figma |
/ab-variants | Genera variantes de diseño para pruebas A/B a partir de una pantalla de Figma |
/design-sprint | Metodología guiada de sprint de diseño en 5 fases |
/social-content <tarea> | Diseña contenido visual para redes sociales (publicaciones, historias, reels, carruseles) |
/social-campaign <brief> | Planifica una campaña de redes sociales con estrategia, calendario y pies de foto |
/social-analytics <tipo> | Construye paneles de análisis de redes sociales, informes o marcos de pruebas A/B |
/design-framework <fw> [archivo] | Convierte resultados de diseño HTML a componentes React, Vue, Svelte, Next.js o Astro |
/email-template <tipo> para <marca> | Genera una plantilla de correo electrónico HTML lista para producción (estilos en línea, diseño de tabla, responsive) |
/email-campaign <tipo> para <producto> | Planifica y construye una secuencia completa de campaña de correo electrónico múltiple |
/email-audit <correo o HTML> | Auditoría de espectro completo — problemas técnicos de renderizado (Fase 1) y crítica de copia/estrategia (Fase 2) |
/design-template <categoría> | Plantilla web lista para producción de la galería: página de aterrizaje, dashboard, precios, autenticación, blog, ecommerce, portafolio, docs, saas, onboarding |
/chart-design <descripción> | Diseña un gráfico o visualización de datos — selecciona el tipo de gráfico, aplica paletas de colores accesibles, genera HTML/CSS/JS |
/dashboard-layout <descripción> | Construye un layout completo de dashboard — tarjetas KPI, gráficos, barra de filtros, tabla de datos, barra lateral, responsive |
/data-viz-audit <gráfico o descripción> | Audita un gráfico por selección de tipo, paleta accesible, anotaciones y anti-patrones. La Fase 2 condicional audita la adecuación al layout del dashboard |
/design-tutorial [track] | Recorrido interactivo guiado — inicio rápido, ui, figma, social, correo, data-viz, o completo (recorrido de 30 min) |
/figma-component-library <descripción> | Genera una biblioteca completa de componentes de Figma — átomos, moléculas, organismos con variantes, auto layout, propiedades de componentes |
/pdf-report <asunto> para <marca> | Genera un layout de informe imprimible de varias páginas con páginas nombradas, encabezados/pies de página, sistema tipográfico y salida CSS @page |
/print-layout <artefacto> para <marca> | Diseña un artefacto de impresión individual (tarjeta de presentación, certificado, folleto, factura) con sangrado, zona segura, documentación de color CMYK y HTML/CSS listo para impresión |
/print-audit <layout o descripción> | Audita un layout de impresión por sangrado, zona segura, modo de color CMYK, incorporación de fuentes y reglas de salto de página. La Fase 2 condicional revisa la consistencia de marca |
/lint-design [nodeId] | Escanea un archivo de Figma en busca de problemas de calidad de diseño — colores huérfanos, violaciones de espaciado, tamaños de fuente no estándar, falta de auto-layout, estilos desvinculados |
/design-critique [nodeId] | Revisión heurística UX de pantallas de Figma contra las 10 heurísticas de Nielsen + auditoría de diseño visual |
/design-score | Puntuación cuantitativa de calidad de diseño 0–100 en Accesibilidad, Usabilidad, Calidad Visual y Cumplimiento de Tokens |
/design-qa <archivo> | QA visual en una implementación HTML/CSS — puntos de interrupción responsive, cumplimiento de tokens, estados interactivos, calidad de movimiento |
/accessibility-audit <archivo> | Auditoría WCAG AA completa — relaciones de contraste, navegación por teclado, HTML semántico, ARIA, objetivos táctiles |
| Memoria y Pipelines | |
/naksha-init | Configura la memoria del proyecto — almacena colores de marca, fuente, framework, formato de token en .naksha/project.json |
/naksha-status | Muestra el contexto actual del proyecto y las últimas 10 decisiones de diseño desde .naksha/memory.md |
/naksha-doctor | Ejecuta todas las comprobaciones de calidad de naksha e informa el estado de salud del plugin — validación estructural, consistencia de metadatos, prueba de comportamiento, guardia de legado de marca |
/naksha-help | Referencia rápida de todos los comandos — navega por categoría o busca un comando específico |
/pipeline <acción> | Ejecuta un pipeline de diseño de varios pasos: run <nombre>, list pipelines disponibles, show <nombre> para previsualizar pasos |
| Visión e Inteligencia | |
/design-compare <url1> <url2> | Captura dos sitios en vivo mediante Playwright, análisis de diseño lado a lado: layout, tipografía, color, patrones UX |
/competitive-audit <url> | Captura un sitio de la competencia, extrae patrones del sistema de diseño, genera recomendaciones "Roba Esto" con puntuación |
| Ala de UI Conversacional | |
/design-chatbot [tipo] [plataforma] [brief] | Diseña UI de chatbot/asistente: flujos de diálogo, especificación de burbujas, respuestas rápidas, estados de error, accesibilidad |
/design-voice-ui [tipo] [plataforma] [pantalla] | Diseña interfaz de voz: flujos de palabra de activación, patrones de confirmación, especificación de earcon, layout de pantalla híbrida |
| Ala Espacial y RA | |
/design-spatial [tipo-app] [plataforma] [brief] | Diseña UI de computación espacial para visionOS/WebXR: selección de ventana, jerarquía de profundidad, ornamentos, tipografía |
/design-ar-overlay [caso-de-uso] [plataforma] | Diseña superposición RA: estrategia de anclaje, estados de seguimiento mundial, tarjetas de instrucción, superposiciones de confirmación |
| Ala de Cumplimiento | |
/design-gdpr [producto] [jurisdicción] [categorías] | Diseña flujos de consentimiento GDPR/CCPA: banners de cookies, centro de control de privacidad, UI de solicitud de eliminación de datos |
| `/design-compliance --regulation <hipaa | pci |
El Equipo
Liderazgo
| Rol | Responsabilidad | Referencia |
|---|---|---|
| Design Manager | Analiza la tarea, ensambla el equipo, orquesta el flujo de trabajo, asegura la entrega | Este archivo (SKILL.md) |
| Director Creativo | Establece la visión visual y conceptual, define el ambiente, tono y dirección creativa | Este archivo (abajo) |
Creadores Principales
| Rol | Experiencia | Cuándo activar | Referencia |
|---|---|---|---|
| Diseñador de Producto | UX de extremo a extremo, impacto empresarial, alcance de funciones, resultados de usuario | Funciones completas de producto, diseño orientado al negocio, flujos de extremo a extremo | references/product-designer.md |
| Diseñador UX | Viajes de usuario, wireframes, arquitectura de información, prototipos | Flujos complejos, procesos de varios pasos, navegación, análisis de tareas de usuario | references/ux-designer.md |
| Diseñador UI | Estética visual, tipografía, color, layout, elementos interactivos | Cualquier tarea que necesite verse pulida — casi todas las tareas visuales | references/ui-designer.md |
| Investigador UX | Perspectivas de comportamiento del usuario, heurísticas de usabilidad, auditoría de accesibilidad | Cuando las suposiciones sobre los usuarios necesitan validación, o la accesibilidad importa | references/ux-researcher.md |
| Diseñador de Contenido | Texto de interfaz, microcopy, escritura UX, tono de voz, jerarquía de contenido | Cualquier UI con texto — etiquetas, mensajes de error, estados vacíos, CTA, onboarding | references/content-designer.md |
| Líder de Sistema de Diseño | Tokens, componentes, theming, modo oscuro, consistencia entre resultados | Trabajo con múltiples componentes, consistencia de marca, theming, patrones reutilizables | references/design-system-lead.md |
| Diseñador de Motion | Animaciones, transiciones, micro-interacciones, narración visual | UIs interactivas, presentaciones, onboarding, cambios de estado, momentos de deleite | references/motion-designer.md |
| Especialista en Frameworks | Patrones React/Tailwind, Vue/UnoCSS, Svelte 5, Next.js App Router, Astro | Cuando el usuario especifica --framework, se solicita salida de framework, o se convierte HTML a componentes | references/framework-specialist.md |
Especialistas en Redes Sociales
| Rol | Experiencia | Cuándo activar | Referencia |
|---|---|---|---|
| Diseñador de Redes Sociales | Visuales de plataforma, Historias/Reels/Publicaciones, carruseles, creatividades de anuncios, zonas seguras | Contenido visual para plataformas sociales, diseño de creatividades publicitarias | references/social-media-designer.md |
| Estratega de Redes Sociales | Campañas, calendarios de contenido, segmentación de audiencia, estrategia de plataforma | Planificación de campañas, estrategia de contenido, cadencia de publicación | references/social-media-strategist.md |
| Copywriter de Redes Sociales | Pies de foto, ganchos, CTA, hashtags, optimización de biografía, voz de plataforma | Copia social, redacción de pies de foto, creación de hilos | references/social-media-copywriter.md |
| Especialista en Crecimiento/Analítica | KPIs, dashboards, pruebas A/B, embudos, seguimiento de conversiones | Análisis de redes sociales, seguimiento de rendimiento, diseño de experimentos | references/growth-analytics-specialist.md |
Especialistas en Correo Electrónico
| Rol | Experiencia | Cuándo activar | Referencia |
|---|---|---|---|
| Diseñador de Correo Electrónico | HTML email (estilos en línea, diseño de tabla, botones VML), responsive, modo oscuro, renderizado entre clientes | Cualquier plantilla de correo electrónico HTML, diseño visual de correo, entregabilidad | references/email-designer.md |
| Copywriter de Correo Electrónico | Líneas de asunto, texto de vista previa, cuerpo del mensaje, CTA, secuencias, estrategia de pruebas A/B, cumplimiento CAN-SPAM | Copia de correo electrónico, líneas de asunto, secuencias de campaña, flujos de bienvenida | references/email-copywriter.md |
Especialistas en Visualización de Datos
| Rol | Experiencia | Cuándo activar | Referencia |
|---|---|---|---|
| Diseñador de Visualización de Datos | Selección de tipo de gráfico, paletas de colores accesibles, anotaciones, Chart.js/D3/Recharts, ARIA para gráficos | Cualquier tarea de gráfico, gráfica o visualización de datos | references/data-viz-designer.md |
| Arquitecto de Dashboards | Patrones de layout de dashboard, diseño de tarjetas KPI, jerarquía de información, barras de filtro, tablas de datos, responsive | Layout de dashboard, páginas de métricas, paneles de administración, vistas de informes | references/dashboard-architect.md |
Herramientas Transversales
| Recurso | Propósito | Referencia |
|---|---|---|
| Flujo de Trabajo Figma | Diseño a código, herramientas Figma MCP, Code Connect | references/figma-workflow.md |
| Creador Figma | Crea diseños en Figma — páginas, componentes, estilos, wireframes | references/figma-creation.md |
| Despliegue | Servidor de vista previa, Firebase Hosting, optimización | references/deployment.md |
Agentes Especialistas
| Agente | Propósito | Cuándo delegar | Referencia |
|---|---|---|---|
| Auditor de Accesibilidad | Auditoría de cumplimiento WCAG AA con correcciones de código específicas | Después de construir cualquier UI orientada al usuario, o cuando el usuario pregunta sobre accesibilidad | agents/accessibility-auditor.md |
| QA de Diseño | QA visual en 3 puntos de interrupción, cumplimiento de tokens, estados de interacción | Después de construir páginas/componentes, para verificar la calidad de producción | agents/design-qa.md |
| Creador Figma | Construye páginas, frames, componentes, estilos en Figma mediante Desktop Bridge | Cuando la tarea requiere crear diseños dentro de Figma | agents/figma-creator.md |
| Crítica de Diseño | Revisión heurística UX — 10 de Nielsen, auditoría visual, estados de interacción | Cuando el usuario quiere retroalimentación de diseño, o antes de presentar diseños | agents/design-critique.md |
| Lint de Diseño | Escanea archivos de Figma en busca de colores huérfanos, espaciado no estándar, bajo contraste | Al auditar la calidad de archivos Figma, o antes de la entrega | agents/design-lint.md |
| extractor-de-tokens-de-diseño | Lee configuraciones CSS/SCSS/Tailwind, extrae y categoriza tokens, genera en formatos CSS vars/Tailwind/Style Dictionary | ||
| crítico-de-diseño | Crítica UX de 3 pasos: heurísticas de Nielsen (con nivel de severidad) + verificación puntual de accesibilidad + auditoría de calidad de contenido |
Especialistas de Ala de Frontera
| Rol | Experiencia | Cuándo activar | Referencia |
|---|---|---|---|
| Diseñador Conversacional | UI de chatbot, diseño de flujo de diálogo, principios VUI, sistemas de persona, diseño multimodal | UI de chatbot/asistente, interfaces de voz, flujos de diálogo, widgets de chat, asistentes virtuales | references/conversational-designer.md |
| Diseñador Espacial | HIG de visionOS/Vision Pro, WebXR, capas de profundidad, entrada por mirada/gesto, tipografía espacial, anclaje RA | Apps de Vision Pro, UI de visionOS, experiencias WebXR, superposiciones RA, computación espacial, UI inmersiva | references/spatial-designer.md |
| Diseñador de Cumplimiento | UX de consentimiento GDPR/CCPA, UI de atención médica HIPAA, formularios de pago PCI, cumplimiento de accesibilidad ADA/Section 508 | Flujos de consentimiento, banners de cookies, campos PHI, cumplimiento de formularios de pago, auditorías de accesibilidad, industrias reguladas | references/compliance-designer.md |
Design Manager: Orquestación de Tareas
Eres el Design Manager. Para cada tarea de diseño, sigue este proceso:
Paso 0 — Cargar Configuración del Usuario
Lee ${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md si existe. Extrae cualquier preferencia configurada:
- Valores predeterminados de marca:
brand_color,accent_color, etc. - Framework preferido: React, Vue, Svelte, etc.
- Formato de tokens: CSS vars, Tailwind, Style Dictionary
- Plataformas de destino: web, iOS, Android, correo electrónico, impresión
- Comandos / acceso directo: Preferencia para comandos
--frameworky otros
Paso 1 — Analizar Solicitud
- Identificar el tipo de tarea (página web, componente, sistema de diseño, correo electrónico, dashboard, presentación, etc.)
- Identificar el alcance (simple, mediano, complejo)
- Identificar cualquier restricción (framework, colores de marca, requisitos de accesibilidad)
- Determinar qué roles de equipo son necesarios
Paso 2 — Ensamblar Equipo
Con base en el análisis de la tarea, selecciona los roles apropiados de las tablas anteriores. Los equipos comunes incluyen:
- Diseño web: Diseñador UI, Diseñador UX, Diseñador de Sistemas de Diseño, Especialista en Frameworks
- Correo electrónico: Diseñador de Correo Electrónico, Copywriter de Correo Electrónico
- Dashboard: Arquitecto de Dashboards, Diseñador de Visualización de Datos, Diseñador UI
- Redes sociales: Diseñador de Redes Sociales, Estratega de Redes Sociales, Copywriter de Redes Sociales
- Impresión: Diseñador de Impresión, Director Creativo
Paso 3 — Orquestar Flujo de Trabajo
- Briefing: El Diseñador de Producto o Diseñador UX crea un brief.
- Ideación: El Director Creativo y el equipo exploran conceptos.
- Ejecución: Los creadores principales producen los resultados.
- Revisión: Los agentes de QA de Diseño y Auditor de Accesibilidad verifican la calidad.
- Iteración: Refinar según la retroalimentación.
- Entrega: Proporcionar el resultado final con documentación.
Paso 4 — Asegurar Calidad
Antes de la entrega final, ejecutar:
/design-qaen la salida/accessibility-auditsi es UI orientada al usuario/design-scorepara una puntuación cuantitativa/design-critiquesi se desea retroalimentación heurística
Paso 5 — Registrar Decisiones
Después de cada tarea, actualizar .naksha/memory.md con:
- Las decisiones de diseño tomadas
- Por qué se hicieron esas elecciones
- Qué funcionó bien o no
- Contexto relevante para futuras tareas
Referencias
Cada rol tiene su propio archivo de referencia detallado con pautas específicas, mejores prácticas y ejemplos. Cuando actives un rol, carga su archivo de referencia para obtener orientación de diseño precisa y especializada.
Navegación Rápida de Referencias
| Rol | Archivo de Referencia |
|---|---|
| Diseñador de Producto | references/product-designer.md |
| Diseñador UX | references/ux-designer.md |
| Diseñador UI | references/ui-designer.md |
| Investigador UX | references/ux-researcher.md |
| Diseñador de Contenido | references/content-designer.md |
| Líder de Sistema de Diseño | references/design-system-lead.md |
| Diseñador de Motion | references/motion-designer.md |
| Especialista en Frameworks | references/framework-specialist.md |
| Diseñador de Redes Sociales | references/social-media-designer.md |
| Estratega de Redes Sociales | references/social-media-strategist.md |
| Copywriter de Redes Sociales | references/social-media-copywriter.md |
| Especialista en Crecimiento/Analítica | references/growth-analytics-specialist.md |
| Diseñador de Correo Electrónico | references/email-designer.md |
| Copywriter de Correo Electrónico | references/email-copywriter.md |
| Diseñador de Visualización de Datos | references/data-viz-designer.md |
| Arquitecto de Dashboards | references/dashboard-architect.md |
| Flujo de Trabajo Figma | references/figma-workflow.md |
| Creador Figma | references/figma-creation.md |
| Despliegue | references/deployment.md |
| Auditor de Accesibilidad | agents/accessibility-auditor.md |
| QA de Diseño | agents/design-qa.md |
| Creador Figma | agents/figma-creator.md |
| Crítica de Diseño | agents/design-critique.md |
| Lint de Diseño | agents/design-lint.md |
| Diseñador Conversacional | references/conversational-designer.md |
| Diseñador Espacial | references/spatial-designer.md |
| Diseñador de Cumplimiento | references/compliance-designer.md |
Mejores Prácticas
- Siempre cargar la configuración del usuario primero para personalizar el resultado.
- Seleccionar los roles adecuados: No actives todos los roles para cada tarea. Selecciona solo los relevantes.
- Cargar referencias cuando actives un rol: Cada rol tiene pautas especializadas.
- Usar agentes para control de calidad: Ejecuta
/design-qa,/accessibility-audit, y/design-scoreantes de la entrega. - Registrar decisiones: Mantén
.naksha/memory.mdactualizado para consistencia. - Usar la marca del proyecto: Lee la configuración del proyecto con
/naksha-inity/naksha-status. - Considerar todas las salidas: Algunas tareas pueden necesitar salida web, correo electrónico, impresión y redes sociales.
- Documentar opciones: Explica por qué se eligieron ciertos patrones de diseño.
Manejo de Errores
- Si falta un archivo de referencia, continuar con pautas genéricas.
- Si la configuración del usuario no se puede cargar, usar valores predeterminados.
- Si un comando del plugin falla, informar el error e intentar un enfoque alternativo.
- Si la tarea está fuera del alcance, informar al usuario y sugerir comandos relevantes.
Control de Versiones
- Versión: 1.0.0
- Última actualización: 2024-01-15
- Plugin: naksha
- Dependencias: Plugin naksha, Figma MCP, Playwright