Communitygithub.com

kumaran-is/claude-code-onboarding

Habilidad de diseño frontend creativo. Construye interfaces distintivas de grado de producción con estética intencional. Incluye puntuación DFII (puerta de aprobación antes de codificar), Fase de Pensamiento de Diseño obligatoria (Propósito→Tono→Anclaje de Diferenciación), Estructura de Salida Requerida (Resumen de Dirección de Diseño, Instantánea del Sistema de Diseño, Destacado de Diferenciación) y Lista de Verificación del Operador. Úsalo al construir o estilizar cualquier componente, página o panel de interfaz web/móvil.

¿Qué es claude-code-onboarding?

Esta habilidad para Claude Code proporciona una metodología completa de diseño frontend creativo, diseñada para evitar la estética genérica de IA y crear interfaces distintivas y de grado de producción. El proceso comienza con una **Fase de Pensamiento de Diseño** obligatoria, donde se debe definir el Propósito, el Tono (eligiendo una dirección dominante de una lista curada) y un Anclaje de Diferenciación que haga que la interfaz sea reconocible incluso sin el logotipo. Antes de escribir cualquier código, se debe calcular el **Índice de Viabilidad e Impacto del Diseño (DFII)** , que puntúa el impacto estético, el ajuste al contexto, la viabilidad de implementación, el rendimiento y el riesgo de consistencia; se requiere una puntuación mínima de 8 para proceder. La habilidad exige una estructura de salida estandarizada que incluye un Resumen de Dirección de Diseño, una Instantánea del Sistema de Diseño (con fuentes, colores, ritmo de espaciado y filosofía de movimiento), la implementación completa del código y un Destacado de Diferenciación que articula explícitamente cómo el diseño evita ser genérico. Soporta los stacks Angular (usando tokens semánticos de daisyUI), Flutter (usando `colorScheme` y `AppSpacing`) y HTML/CSS (usando variables CSS), e incluye una lista de verificación previa a la entrega para garantizar calidad, accesibilidad y variedad, con un mandato explícito de evitar converger en opciones comunes entre generaciones de diseño.

Compatible con✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/kumaran-is/claude-code-onboarding/tree/HEAD/.claude/skills/frontend-design
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Ley de Hierro

NO HAY SALIDA DE UI SIN COMPLETAR PRIMERO LA FASE DE PENSAMIENTO DE DISEÑO — define Propósito, Tono (una dirección) y Anclaje de Diferenciación antes de escribir una sola línea de código. La puntuación DFII debe ser ≥ 8 para proceder.

Habilidad de Diseño Frontend

Propósito

Proporciona metodología de diseño frontend creativo, principios visuales y listas de verificación de calidad para construir interfaces distintivas y de grado de producción que eviten la estética genérica de IA.

Proceso

  1. Fase de Pensamiento de Diseño (obligatoria — no saltar)
    • Definir Propósito: ¿qué acción permite esta interfaz? ¿Es persuasiva, funcional, exploratoria o expresiva?
    • Definir Tono: elige UNA dirección dominante (Brutalista / Editorial / Lujo / Retro-futurista / Industrial / Orgánica / Juguetona / Maximalista / Minimalista). No mezcles más de dos.
    • Definir Anclaje de Diferenciación: responde "Si esto se capturara de pantalla sin el logotipo, ¿cómo lo reconocería alguien?" Esto debe ser visible en la UI final.
  2. Puntuar DFII — calcular el Índice de Viabilidad e Impacto del Diseño (ver abajo). Puntuación < 8 → repensar la dirección antes de proceder.
  3. Cargar principios -- Lee reference/frontend-design-principles.md para obtener orientación sobre tipografía, color, movimiento y diseño.
  4. Implementar -- Construye código funcional (Angular, Flutter o HTML/CSS/JS) alineado con la estética elegida. Sigue los tokens de diseño del espacio de trabajo (daisyUI para Angular, AppSpacing/colorScheme para Flutter).
  5. Entregar con la estructura de salida requerida -- incluye Resumen de Dirección de Diseño, Instantánea del Sistema de Diseño, Implementación y Destacado de Diferenciación

Para los principios de diseño completos, antipatrones y lista de verificación de calidad:

Lee reference/frontend-design-principles.md

Manejo de Errores

Si el framework objetivo no está especificado, pregúntale al usuario antes de proceder. Si los recursos de fuentes/activos externos no están disponibles, documenta la elección alternativa y continúa.

Índice de Viabilidad e Impacto del Diseño (DFII)

Puntúa la dirección de diseño antes de escribir código. Se requiere una puntuación mínima de 8 para proceder.

Dimensiones (cada una se puntúa del 1 al 5)

DimensiónPregunta
Impacto Estético¿Qué tan visualmente distintiva y memorable es esta dirección?
Ajuste al Contexto¿Esta estética se adapta al producto, la audiencia y el propósito?
Viabilidad de Implementación¿Se puede construir limpiamente con la tecnología disponible?
Seguridad de Rendimiento¿Seguirá siendo rápida y accesible?
Riesgo de Consistencia¿Se puede mantener esto en diferentes pantallas/componentes? (resta esto)

Fórmula

DFII = (Impacto + Ajuste + Viabilidad + Rendimiento) − Riesgo de Consistencia
Rango: −5 → +15

Interpretación

DFIISignificadoAcción
12–15ExcelenteEjecutar completamente
8–11FuerteProceder con disciplina
4–7RiesgosoReducir alcance o efectos
≤ 3DébilRepensar la dirección estética

Estructura de Salida Requerida

Cada salida de diseño frontend DEBE incluir las cuatro secciones:

1. Resumen de Dirección de Diseño

  • Nombre estético (ej. "Brutalismo Editorial", "Minimalismo de Lujo")
  • Puntuación DFII
  • Inspiración clave (conceptual — no plagio visual)

2. Instantánea del Sistema de Diseño

  • Fuentes (con justificación — ¿por qué esta fuente para este producto?)
  • Variables de color (nómbralas: --color-primary, --color-accent, --color-neutral)
  • Ritmo de espaciado (unidad base y escala)
  • Filosofía de movimiento (¿escaso/con propósito? ¿o ninguno?)

3. Implementación

  • Código funcional completo
  • Comentarios solo donde la intención no sea obvia
  • Para Angular: usa tokens semánticos de daisyUI (bg-primary, text-base-content) — sin hex codificado
  • Para Flutter: usa Theme.of(context).colorScheme y tokens AppSpacing.* — nunca Color(0xFF...)

4. Destacado de Diferenciación

Indica explícitamente:

"Esto evita la UI genérica al hacer X en lugar de Y."

Si no puedes completar esta frase, el diseño no es lo suficientemente distintivo.

Lista de Verificación del Operador (Puerta de Pre-Entrega)

  • Fase de Pensamiento de Diseño completada (Propósito + Tono + Anclaje de Diferenciación definidos)
  • Puntuación DFII ≥ 8
  • Un ancla de diseño memorable visible en la UI final
  • Sin fuentes genéricas (sin Inter, Roboto, Arial, system-ui)
  • Sin colores genéricos (sin degradados púrpura sobre blanco, sin gris plano)
  • Sin diseños predeterminados (sin cuadrículas de tarjetas simétricas, sin estructura tipo plantilla)
  • El código coincide con la ambición del diseño (maximalista = código complejo; minimalista = espaciado preciso)
  • Accesible y con buen rendimiento (contraste ≥ 4.5:1, estados de enfoque, navegación por teclado)
  • Estructura de Salida Requerida: las 4 secciones presentes
  • Ningún diseño debe parecerse a uno anterior — varía claro/oscuro, elecciones de fuente, personalidad del diseño

Mandato de Ambición Creativa

Claude es capaz de un trabajo creativo extraordinario. No te contengas — muestra lo que realmente se puede crear cuando se piensa fuera de la caja y se compromete totalmente con una visión distintiva.

Interpreta los requisitos de forma creativa. Toma decisiones inesperadas que se sientan genuinamente diseñadas para el contexto. No hay dos diseños que deban compartir el mismo ADN estético.

NUNCA converjas en opciones comunes entre generaciones. El hecho de que Space Grotesk, los degradados púrpuras o los diseños simétricos de héroe "hayan funcionado antes" es exactamente la razón para no usarlos de nuevo. La variedad es obligatoria, no opcional.

Preguntas para Hacer Antes de Empezar (Si es Necesario)

  1. ¿Para quién es esto, emocionalmente?
  2. ¿Debería sentirse confiable, emocionante, tranquilo o provocador?
  3. ¿Es más importante la memorabilidad o la claridad?
  4. ¿Escalará esto a otras páginas/componentes?
  5. ¿Qué deberían sentir los usuarios en los primeros 3 segundos?

Integración con el Espacio de Trabajo

StackRegla de Token de DiseñoReferencia
AngularSolo tokens semánticos de daisyUI — bg-primary, text-base-content, border-base-300angular-spa/reference/daisyui-v5-components.md
FlutterTheme.of(context).colorScheme.* + AppSpacing.* — nunca Color(0xFF...) o EdgeInsets.all(16)ui-standards-tokens/reference/ui-design-tokens.md
HTML/CSSVariables CSS exclusivamente — var(--color-primary)Definir en el bloque :root
React NativeFuera del alcance de esta habilidad → usa la habilidad mobile-developer.claude/skills/mobile-developer/SKILL.md

Habilidades relacionadas:

  • web-design-guidelines — ejecutar después de implementar para auditar contra las Guías de Interfaz Web de Vercel
  • design-system — cumplimiento de tokens de diseño para Angular y Flutter
  • angular-spa — patrones de implementación Angular con daisyUI
  • ui-standards-tokens — definiciones de tokens de diseño Flutter

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

kumaran-is/claude-code-onboarding

Audit UI code against Vercel's Web Interface Guidelines — fetches live rules, reads specified files, outputs findings as file:line violations. Use when asked to review UI, check accessibility, audit design, review UX, or verify a component against web interface standards. Complements /lint-design-system (tokens) and accessibility-auditor (WCAG) with web interaction pattern compliance.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community