🏗️ Crear interfaces

frontend-design guía la creación de interfaces de calidad para producción, con una atención excepcional a los detalles estéticos y las decisiones creativas. Produce código funcional (React, HTML/CSS, Tailwind) que evita el estilo "genérico de la IA".

Sin este skill, Claude tiende a crear interfaces visualmente genéricas: cuadrícula de ícono+título+texto, tarjetas idénticas, botones azules. Con él, el resultado tiene identidad y una jerarquía visual real.

Calidad de producción profesional, sin contenido flojo generado por IA, código funcional y estética intencional.

Se activa cuando el usuario pide: componente frontend, sitio, landing page, dashboard, interfaz React, UI de aplicación, página HTML con estilo. La skill monitorea términos como "crea una interfaz", "haz un sitio", "componente React".

Saber cuáles son los desencadenantes te ayuda a formular solicitudes que activen la skill adecuada y a evitar formulaciones vagas que dejen a Claude en modo genérico.

Disparadores semánticos, solicitud explícita de UI/frontend/componente.

La skill aplica Design Thinking y Frontend Aesthetics Guidelines: tipografía con intención, espaciado proporcional, jerarquía visual clara, paleta coherente, microinteracciones y movimiento con propósito. El resultado supera la "prueba de contenido genérico de IA": no parece generado de forma genérica.

Las interfaces production-grade convierten más, comunican mejor y no dan vergüenza cuando se muestran a clientes o reclutadores.

Design Thinking, Frontend Aesthetics Guidelines, prueba de AI slop.

El SKILL.md de frontend-design contiene dos secciones principales: «Design Thinking» (proceso de análisis del pedido antes de programar) y «Frontend Aesthetics Guidelines» (reglas concretas de tipografía, color, espaciado y motion). Claude lee ambas antes de escribir una línea de HTML/React.

Entender que hay un proceso de análisis antes del código explica por qué la skill tarda un poco más y ofrece mucho más.

Design Thinking, Frontend Aesthetics Guidelines, React/Tailwind, HTML/CSS.

Usa solicitudes específicas: describe el producto, el público y el tono. La skill se encarga de la estética; tú solo tienes que dar suficiente contexto.

Los prompts específicos generan interfaces específicas. Los prompts vagos generan interfaces genéricas, incluso con el skill activo.

Contexto del producto, público objetivo, tono visual, nivel de detalle.

Combina con impeccable (para pulir lo que generó), web-artifacts-builder (para agregar estado/rutas React) y design-designer (para generar un prompt para Claude Design antes de programar). Límite: no reemplaza la creación de prototipos interactivos con Figma ni trabaja con APIs de backend.

Saber cuáles son los límites evita expectativas equivocadas y te ayuda a armar el flujo adecuado: frontend-design → impeccable → web-artifacts-builder cuando la UI necesite estado.

Composición de skills, flujo iterativo, límite de alcance.

impeccable es un sistema de auditoría y rediseño de interfaces. Evalúa lo existente, aplica principios de diseño compartidos (color, tema, tipografía, diseño, movimiento) y reescribe o critica con precisión quirúrgica, sin opiniones vagas.

Crear es fácil; pulir es donde la mayoría se atasca. impeccable resuelve la brecha entre «funciona» e «impresiona».

Auditoría de UX, rediseño, leyes de diseño, crítica práctica.

Se activa con: "mejora este diseño", "critica esta UI", "rediseña este componente", "auditoría de UX", "corrige la tipografía/el espaciado/el color", "haz que se vea bonito", "pule la interfaz". Cualquier pedido para mejorar algo existente.

La distinción clave: frontend-design crea desde cero; impeccable mejora lo que ya existe. Usar la skill equivocada duplica el trabajo.

Mejora, crítica, auditoría, rediseño de algo existente.

La skill aplica "prohibiciones absolutas" (prohíbe el borde izquierdo decorativo, el texto con degradado, el glassmorphism estándar, las plantillas de métricas hero y las tarjetas idénticas) y "leyes de diseño compartidas" (color, tema, tipografía, diseño, movimiento). El resultado supera la "prueba de contenido genérico de IA" y tiene una coherencia visual real.

Saber qué está prohibido te protege de antipatrones que destruyen la credibilidad visual, incluso cuando parecen bonitos por separado.

Prohibiciones absolutas, principios de diseño compartidos, prueba de AI slop, coherencia visual.

El SKILL.md incluye: Setup (recopilación de contexto + register del estado actual), Shared design laws (Color, Theme, Typography, Layout, Motion, Absolute bans, Copy), Commands con routing rules (que activan redesign, critique o polish) y Pin/Unpin para fijar estilos ya aprobados.

El enrutamiento interno determina si Claude rediseña, critica o solo pule. Entender esto ayuda a formular la solicitud adecuada.

Configuración, reglas de enrutamiento, comandos, Pin/Unpin y recopilación de contexto.

Pega el HTML existente y pide una auditoría completa. La skill lo analiza y entrega una crítica y una versión mejorada.

Una auditoría estructurada aporta más valor que pedir "mejora" sin criterios: recibes el diagnóstico y la solución juntos.

Auditoría estructurada, diagnóstico + solución, crítica práctica.

Flujo clásico: frontend-design genera → impeccable audita → web-artifacts-builder agrega estado. Límite: necesita HTML/código existente como entrada; no crea desde cero. Tampoco sustituye las pruebas con usuarios reales; evalúa la estructura y la estética, no el comportamiento de uso.

Posicionar impeccable como etapa 2 (no 1) del flujo maximiza el valor: refina, no inventa.

Etapa de refinamiento, input obligatorio, flujo iterativo.

web-artifacts-builder es una suite completa para inicializar, desarrollar y empaquetar artifacts de React en un único archivo HTML autocontenido. Es compatible con React, Tailwind, shadcn/ui, estado administrado, enrutamiento y múltiples componentes; y entrega un bundle.html compartible.

Cuando la interfaz necesita estado, pestañas, modales con lógica o enrutamiento, el HTML simple no basta. Esta skill resuelve la complejidad del bundling sin configuración manual.

React, Tailwind, shadcn/ui, bundle.html, artifact autocontenido.

Se activa con: "crea un artifact React", "quiero un dashboard interactivo", "componente shadcn/ui", "app con pestañas y estado", "artifact para pegar en Claude", "bundle HTML con React". Palabras clave: artifact, React, shadcn, estado, interactivo, multicomponente.

Distinguir cuándo usar web-artifacts-builder (React + estado) y cuándo frontend-design (HTML/CSS estático) ahorra retrabajo.

Artifact interactivo, React, estado, varios componentes.

Transforma una solicitud de UI compleja en un bundle.html que funciona en cualquier navegador sin servidor: todo está integrado en línea: JS, CSS y fuentes. Compartes un único archivo y el cliente lo abre directamente. Los componentes shadcn/ui garantizan una calidad visual coherente sin esfuerzo de diseño.

Entregar un archivo HTML que funciona sin conexión es más profesional que enviar un enlace que depende de un servidor. Además, shadcn/ui ahorra horas de estilización manual.

bundle.html, sin dependencias, shadcn/ui, entrega profesional.

Flujo en 5 pasos: (1) Initialize Project — crea la estructura con index.html en la raíz. (2) Develop — escribe componentes React/shadcn. (3) Bundle — ejecuta bash scripts/bundle-artifact.sh que usa Parcel + @parcel/config-default + parcel-resolver-tspaths + html-inline para crear bundle.html. (4) Compartir. (5) Probar (opcional con preview).

Saber cómo funciona el script de bundling te permite depurar cuando falla el build o personalizar el proceso.

bundle-artifact.sh, Parcel, html-inline, @parcel/config-default, index.html obligatorio.

Describe el artifact con su estado y sus componentes. La skill inicializa el proyecto, lo desarrolla y lo empaqueta automáticamente.

Detallar los componentes y las interacciones en el prompt evita idas y vueltas: el artifact queda bien en la primera iteración.

Especificación de componentes, interacciones, componentes de shadcn/ui.

Combina con frontend-design (para la base visual) e impeccable (para pulir los componentes generados). Límite crítico: no la uses para HTML simple sin estado; el overhead de Parcel no lo justifica. Tampoco se conecta a APIs reales ni a bases de datos.

Usar web-artifacts-builder para un HTML de 3 párrafos es como usar Webpack para servir un archivo estático: un desperdicio de complejidad.

Cuándo NO usar: sobrecarga de bundling, límite entre estático e interactivo.

design-designer es un generador de prompts optimizados para Claude Design. Te guía en una entrevista rápida (8 preguntas), sintetiza las respuestas y entrega un prompt preciso que indica a Claude Design cómo crear landing pages, presentaciones, prototipos o apps interactivas con gran calidad visual.

Claude Design tiene sesgos y limitaciones específicos. Los prompts genéricos generan resultados mediocres. Esta skill sabe exactamente qué quiere el modelo y se lo entrega.

Ingeniería de prompts para Claude Design, entrevista estructurada, generación optimizada.

Se activa con: "quiero usar Claude Design", "genera un prompt para claude.ai/design", "crea una landing page en Claude Design", "prompt para prototipo/deck/app interactivo", "optimizar prompt para Design". También se activa con "necesito un diseño visual" cuando el contexto indica claude.ai.

Este skill es el único de la ruta que no entrega código: entrega un prompt. Saber cuál es el disparador correcto evita confundirlo con frontend-design.

claude.ai/design, prompt como resultado, no como código.

Elimina los antipatrones de Claude Design (lorem ipsum, imágenes hero innecesarias, etiquetas estilo "Nuestro portafolio", clichés genéricos de startups de IA con blobs y orbes flotantes). El prompt generado incluye instrucciones negativas explícitas —qué NO incluir— que la mayoría de los usuarios nunca piensa en especificar.

En Claude Design, las instrucciones negativas son tan importantes como las positivas. Esta skill ya sabe cuáles incluir: no necesitas descubrirlo mediante prueba y error.

Instrucciones negativas, anti-tropes, prompt completo, sesgos de Claude Design.

4 fases: (1) Entrevista — 8 preguntas sobre el producto, el público, el tono, las secciones, el estilo visual, las referencias visuales, qué NO incluir y la complejidad. (2) Sintetizar — cruza las respuestas y detecta contradicciones. (3) Generar — crea un prompt optimizado con secciones positivas y negativas. (4) Entregar — presenta el prompt listo para pegar en Claude Design. Quick Path disponible si el usuario quiere omitir la entrevista.

Entender las 4 fases ayuda a responder las preguntas de la entrevista con más precisión, lo que genera un prompt más eficaz.

Interview (8 preguntas), Synthesize, Generate, Deliver, Quick Path.

Activa la skill y esta guía la entrevista. También puedes usar Quick Path para ir directamente al prompt sin entrevista.

La entrevista completa genera prompts más precisos. El Quick Path es útil cuando ya tienes total claridad sobre lo que quieres.

Entrevista frente a Quick Path, nivel de claridad, equilibrio entre velocidad y precisión.

Uso típico: design-designer genera el prompt → Claude Design produce el visual → impeccable audita el resultado. Límites: Claude Design no maneja bien listas largas, tablas complejas, mapas interactivos ni gráficos de datos. La skill te avisa sobre estas limitaciones antes de que inviertas tiempo en el prompt.

Saber qué no resuelve Claude Design evita frustraciones. La skill tiene una sección "What Claude Design Will NOT Do Well" — léela antes de empezar.

Limitaciones de Claude Design, flujo design-designer→Design→impeccable, expectativas correctas.