shape
Planificar Diseño UX/UI Antes de Codificar
La mayoría de las interfaces generadas por IA fracasan porque omiten el pensamiento de diseño. Esta habilidad ejecuta una entrevista de descubrimiento estructurada para comprender las necesidades, restricciones y objetivos del usuario antes de producir un brief de diseño completo que guíe la implementación.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "shape". Shape the UX for a user onboarding flow that helps new users set up their workspace.
Resultado esperado:
Feature Summary: First-time workspace setup for users who just signed up. Primary goal is getting users to 'aha moment' within 5 minutes while reducing anxiety about configuration complexity. Primary User Action: Complete workspace configuration with confidence. Design Direction: Calm, reassuring, progressive disclosure. Layout Strategy: Single-column vertical flow with clear progress indicators. Key States: First visit (welcome), In-progress (step indicators), Completed (success celebration), Error (validation with guidance). Interaction Model: Guided wizard with skip optional steps, auto-save after each section. Content Requirements: Welcome message, step headers, inline help text, validation messages. Recommended References: interaction-design.md, form-design.md. Open Questions: Should we allow skipping profile setup?
Usando "shape". I need to design a dashboard for monitoring API health.
Resultado esperado:
Feature Summary: Real-time API monitoring dashboard for DevOps engineers. Primary goal is rapid issue identification and root cause analysis. Primary User Action: Spot and diagnose API anomalies quickly. Design Direction: Information-dense, high contrast, fast-scanning. Layout Strategy: Grid-based with status overview top, detailed metrics bottom, left-to-right severity gradient. Key States: All systems healthy, partial degradation (warning), critical failure, loading (initial data fetch), no data. Interaction Model: Hover for details, click to drill down, auto-refresh every 30s, manual refresh available. Content Requirements: Service names, status indicators, latency numbers, error counts, timestamps, error messages. Recommended References: data-visualization.md, dashboard-design.md. Open Questions: Alert threshold preferences?
Auditoría de seguridad
SeguroStatic analysis detected 22 potential issues (21 'weak cryptographic algorithm' patterns, 1 'external commands' pattern). All findings are false positives caused by pattern matching on markdown formatting (backticks around `.impeccable.md`) and common English words ('block', 'key', 'cipher'). This is a pure documentation/planning skill with no executable code, no network operations, no file system access, and no security risks. The skill runs a structured interview process and generates design documentation.
Problemas de riesgo bajo (1)
Puntuación de calidad
Lo que puedes crear
Product Manager Planificando Nueva Funcionalidad
Antes de entregar requisitos a ingeniería, usa esta habilidad para establecer dirección UX clara, métricas de éxito y restricciones de diseño.
Desarrollador Comenzando Implementación
Úsala antes de programar para clarificar qué necesita construirse, evitando reelaboración por requisitos mal entendidos o casos extremos omitidos.
Diseñador Definiendo Patrones de Interacción
Estructura el pensamiento en torno a flujos de usuario, estados y requisitos de contenido antes de crear maquetas visuales o prototipos.
Prueba estos prompts
Necesito diseñar una [descripción de funcionalidad]. Ejecuta la entrevista de descubrimiento y crea un brief de diseño.
Da forma al UX para [funcionalidad]. Ya tengo contexto de diseño de /impeccable, así que úsalo al discutir restricciones y patrones.
Planifica el UX para [funcionalidad] con estas restricciones: [lista de restricciones como mobile-first, requisitos de accesibilidad, presupuestos de rendimiento]. Enfoca la entrevista en cómo estas dan forma al diseño.
Quiero diseñar [funcionalidad] pero estoy preocupado por [preocupación específica como complejidad abrumadora]. Asegúrate de que la entrevista de descubrimiento explore anti-objetivos y lo que esto NO debería ser.
Mejores prácticas
- Invoca /impeccable antes de usar esta habilidad para asegurar que los principios de diseño y el contexto del proyecto estén cargados
- Responde las preguntas de la entrevista cuidadosamente incluso si crees que un detalle es obvio
- Revisa el brief de diseño generado cuidadosamente antes de confirmar
- Entrega el brief confirmado a /impeccable craft o /impeccable para una implementación fluida
Evitar
- Omitir la entrevista de descubrimiento y saltar directamente a sugerencias de diseño
- Proporcionar respuestas de una palabra a las preguntas de la entrevista sin contexto
- Usar esta habilidad esperando salida de código en lugar de documentación de diseño
- Ignorar el paso de confirmación del brief y proceder con comprensión incompleta