high-end-visual-designpor Leonxlnx

High End Visual Design Skill.

Un skill de Claude Code y Codex para diseño UI: enseña detalles de agencia de alta gama: tipografía, espaciado, sombras, tarjetas y movimiento.

Web y UI

Descargar OpenDesign Ver guía de uso

Leonxlnx/taste-skill · skills/soft-skill/SKILL.mdSKILL.md

--- name: high-end-visual-design description: Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic. --- ## 1. Meta Information & Core Directive ## 2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS) ## 3. THE CREATIVE VARIANCE ENGINE ## 4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY) ## 5. MOTION CHOREOGRAPHY (FLUID DYNAMICS) ## 6. PERFORMANCE GUARDRAILS

Encabezados de sección y metadatos leídos del archivo fuente el 14 de septiembre de 2026 · 10.545 caracteres en total

01 Qué hace

Qué hace el skill high-end-visual-design 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

Este skill enseña a los agentes de código a producir diseño visual de nivel agencia de $150k+ definiendo elecciones tipográficas exactas, ritmo espacial, técnicas de sombra, estructuras de tarjetas y patrones de movimiento fluido. Prohíbe los valores predeterminados genéricos (Inter, Roboto, iconos de trazo grueso, sombras duras, easing estándar) e impone alternativas premium como Geist o Clash Display, iconos ultraligeros y transiciones cubic-bezier personalizadas.

Cada salida debe combinar un Vibe Archetype único (Ethereal Glass, Editorial Luxury o Soft Structuralism) con un Layout Archetype (Asymmetrical Bento, Z-Axis Cascade o Editorial Split) para evitar la repetición. Los componentes usan encuadres Double-Bezel anidados, iconos finales Button-in-Button, espacio en blanco masivo (py-24 a py-40) y animaciones de entrada interpoladas con el scroll. Todo el movimiento simula física del mundo real usando solo transform y opacity, con estrictas barreras de rendimiento para móvil.

Qué produce

Código React/Tailwind/HTML impecable y pixel-perfect que implementa los Vibe y Layout Archetypes seleccionados con estructuras de componentes Double-Bezel, movimiento cubic-bezier personalizado y colapso responsive para móvil

Ver el ejemplo de prompt ↗

Cómo funciona

01
Ejecutar el Variance Engine
Antes de escribir código, el agente selecciona en silencio un Vibe Archetype y un Layout Archetype de combinaciones premium predefinidas según el contexto del prompt, para garantizar un resultado exclusivo y a medida.
02
Estructurar el fondo y la tipografía
Establecer la textura elegida (negro OLED con degradados radiales, cremas cálidas con superposición de ruido, o gris plateado con sombras suaves) y definir tamaños de tipografía enormes con macro-espacios en blanco exagerados.
03
Diseñar estructuras de componentes anidados
Construir todas las tarjetas, campos y grillas principales usando la técnica Double-Bezel: una capa exterior con borde de línea fina y padding envuelve un núcleo interior con su propio fondo y un radio menor calculado matemáticamente.
04
Coreografiar el movimiento fluido
Incorporar transiciones cubic-bezier personalizadas para todos los cambios de estado, revelados de navegación escalonados con desplazamientos en translate-y y opacidad, y una física de hover magnético en los botones con traslación diagonal y escalado.
05
Aplicar interpolación de scroll
Los elementos entran en el viewport con una animación suave de aparición hacia arriba (translate-y-16 blur-md opacity-0 que se resuelve en 800ms o más) usando IntersectionObserver o whileInView de Framer Motion, nunca listeners de window scroll.
06
Validar contra la lista de verificación previa a la entrega
Evaluar el código contra una matriz de 11 puntos que asegura la ausencia de patrones prohibidos, la correcta selección de archetype, la arquitectura Double-Bezel, el easing personalizado, el colapso móvil y animaciones seguras para la GPU antes de la entrega.

02 Encuentra tu caso de uso

Cuándo usar el skill high-end-visual-design

Usa el skill high-end-visual-design en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. El alcance y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Diseñar experiencias digitales de nivel agencia de $150k+ para proyectos de SaaS, IA, tecnología, estilo de vida, inmobiliario, consumo, salud o portafolio que requieren microinteracciones obsesivas y un ritmo espacial cinematográfico
Construir interfaces que deben transmitir profundidad háptica y un movimiento fluido impecable con transiciones cubic-bezier personalizadas y animaciones de entrada interpoladas con el scroll

Conozca los límites

Los proyectos que requieran Inter, Roboto, Arial, Open Sans o Helvetica como tipografía no pueden usar este skill
Los diseños que necesiten los íconos estándar de trazo grueso de Lucide, FontAwesome o Material Icons son incompatibles con el requisito de íconos ultraligeros de este skill
Las interfaces con barras de navegación sticky de borde a borde pegadas arriba, o grillas simétricas de 3 columnas estilo Bootstrap sin grandes espacios en blanco, violan las restricciones de diseño
Los patrones de movimiento con transiciones lineales o ease-in-out estándar, o cambios de estado instantáneos sin interpolación, están explícitamente prohibidos

Qué proporcionar

Contexto del prompt para la selección de archetypeLa solicitud del usuario debe indicar el tipo de proyecto (SaaS, estilo de vida, portafolio, etc.) para que el agente pueda seleccionar la combinación adecuada de Vibe y Layout Archetype del Variance Engine.

03 Dentro del skill

Reglas que el skill high-end-visual-design le 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.

Prohibir todos los valores genéricos por defecto
Nunca usar Inter, Roboto, Arial, Open Sans, Helvetica, íconos de trazo grueso de Lucide o Material Icons, bordes 1px solid gray, sombras duras (shadow-md, rgba(0,0,0,0.3)), barras de navegación sticky de borde a borde, grillas simétricas de Bootstrap, o transiciones linear/ease-in-out.
Nunca repetir el mismo layout dos veces
El agente debe combinar dinámicamente distintos arquetipos de layout premium y perfiles de textura, respetando estrictamente el lenguaje de diseño de élite, garantizando que no haya dos resultados idénticos.
Usar Solo Tipografía e Iconos Premium
Asuma que Geist, Clash Display, PP Editorial New o Plus Jakarta Sans están disponibles para las fuentes. Use solo líneas de iconos ultrafinas y precisas como Phosphor Light o Remix Line.
Aplicar el Doble Bisel a Todos los Componentes Principales
Nunca coloque tarjetas o contenedores premium de forma plana.
Duplicar el Padding Estándar para un Macro-Whitespace
Use py-24 a py-40 para el padding de sección y permitir que el diseño respire ampliamente. El padding estándar es insuficiente para lograr una sensación premium.
Animar Solo Transform y Opacity
Nunca anime top, left, width o height, ya que provocan recálculos de layout. Use exclusivamente transform y opacity para movimiento acelerado por GPU y seguro en rendimiento.
Restringir backdrop-blur Solo a Elementos Fijos
Aplique backdrop-blur exclusivamente a elementos fixed o sticky como barras de navegación y overlays.
Colapsar Todos los Layouts Asimétricos por Debajo de 768px
Cualquier layout asimétrico por encima del breakpoint md: debe volver de forma agresiva a w-full, px-4, py-8 en viewports por debajo de 768px.

04 Ponlo a trabajar

Instala high-end-visual-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.

Agrega high-end-visual-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/Leonxlnx/taste-skill --skill high-end-visual-design

Formulario genérico de la CLI skills para skills/soft-skill/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

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

Starter prompt

Design a hero section for [SaaS product name] that feels like a $150k agency build. The product is an AI-powered analytics platform targeting enterprise clients. Include a floating navigation pill, a massive headline with an eyebrow tag, and a primary CTA with nested trailing icon. Use the Ethereal Glass vibe with deepest OLED black background and radial mesh gradients. Apply the Asymmetrical Bento layout with varying card sizes showcasing three key features. Ensure all elements have scroll-interpolated entry animations and the layout collapses gracefully on mobile.

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 no haya fuentes prohibidas (Inter, Roboto, Arial, Open Sans, Helvetica), iconos (Lucide de trazo grueso, FontAwesome, Material), bordes (1px solid gray), sombras (shadow-md, sombras duras), layouts (barras de navegación sticky de borde a borde, grids simétricos) ni patrones de movimiento (linear, ease-in-out)
Confirme que se haya seleccionado y aplicado de forma consciente un Vibe Archetype (Ethereal Glass, Editorial Luxury o Soft Structuralism) y un Layout Archetype (Asymmetrical Bento, Z-Axis Cascade o Editorial Split)
Verifique que todas las tarjetas y contenedores principales usen la arquitectura anidada del Doble Bisel, con una carcasa exterior (borde fino, padding, radio grande) envolviendo un núcleo interior (fondo distinto, radio calculado más pequeño)
Asegúrese de que el padding de sección sea como mínimo py-24 y que el layout respire con un macro-whitespace exagerado
Valide que todas las transiciones usen curvas cubic-bezier personalizadas y que no haya easing linear o ease-in-out presente
Confirme que existan animaciones de entrada al hacer scroll para que ningún elemento aparezca de forma estática, y que todas las animaciones usen únicamente transform y opacity, sin animar propiedades que disparan recálculos de layout como top, left, width o height

En OpenDesign importe high-end-visual-design desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, 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: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Rama main
Archivo de skill: skills/soft-skill/SKILL.md Suma de verificación de contenido registrada en la verificación; commit ccbc156
License: MIT Desde LICENSE.
Estrellas del repositorio: 86.946 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio Leonxlnx/taste-skill, que contiene 11 skills en este catálogo. No es una calificación ni un recuento de uso para high-end-visual-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

Información Meta y Directiva CentralDefine la persona Vanguard_UI_Architect, el objetivo de agencia de $150k+ y el Mandato de Variancia que exige resultados únicos
LA DIRECTIVA "CERO ABSOLUTO" (ANTI-PATRONES ESTRICTOS)Enumera todas las fuentes, iconos, bordes, sombras, layouts y patrones de movimiento prohibidos que causan un fallo de diseño instantáneo
EL MOTOR DE VARIANCIA CREATIVAEspecifica tres Vibe Archetypes y tres Layout Archetypes para combinar y obtener resultados premium únicos, con reglas de colapso para móvil
MICROESTÉTICA HÁPTICA (DOMINIO DE COMPONENTES)Detalla la arquitectura anidada Double-Bezel, el patrón de icono final Button-in-Button y el ritmo espacial de macro-espacio en blanco con etiquetas eyebrow
COREOGRAFÍA DE MOVIMIENTO (DINÁMICA FLUIDA)Define transiciones cubic-bezier personalizadas, Fluid Island Nav con morfado de hamburguesa, física de hover magnético en botones y animaciones de interpolación de scroll
LÍMITES DE RENDIMIENTORestringe la animación únicamente a transform y opacity, limita backdrop-blur a elementos fijos e impone disciplina en el z-index
PROTOCOLO DE EJECUCIÓNProporciona una secuencia exacta de cinco pasos, desde la selección silenciosa del arquetipo hasta el scaffolding, la arquitectura, la coreografía y la entrega final con precisión de píxel
LISTA DE VERIFICACIÓN PREVIA A LA SALIDAEnumera once comprobaciones obligatorias frente a patrones prohibidos, aplicación del arquetipo, arquitectura Double-Bezel, calidad del movimiento, colapso en móvil y rendimiento

La descripción propia del Skill

"Enseña a la IA a diseñar como una agencia de alto nivel. Define las fuentes exactas, espaciados, sombras, estructuras de tarjetas y animaciones que hacen que un sitio web se sienta costoso. Bloquea todos los valores predeterminados comunes que hacen que los diseños de IA se vean baratos o genéricos."

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 10.545 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre la skill high-end-visual-design

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

¿Esta skill incluye alguna librería o framework de JavaScript?

La skill se centra en patrones de diseño visual y recomienda usar IntersectionObserver o whileInView de Framer Motion para las revelaciones al hacer scroll, pero no incluye ni instala estas librerías.

Indica explícitamente que nunca se debe usar window.addEventListener('scroll'), ya que provoca reflows continuos y arruina el rendimiento en móviles. Usted debe proporcionar las librerías de animación por su cuenta.

High End Visual Design

Ejecute high-end-visual-design en una tarea real de diseño de UI.

Descarga OpenDesign, importa high-end-visual-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/Leonxlnx/taste-skill --skill high-end-visual-design

Qué hace el skill high-end-visual-design en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill high-end-visual-design

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill high-end-visual-design le da a Claude Code y Codex

Prohibir todos los valores genéricos por defecto

Nunca repetir el mismo layout dos veces

Usar Solo Tipografía e Iconos Premium

Aplicar el Doble Bisel a Todos los Componentes Principales

Duplicar el Padding Estándar para un Macro-Whitespace

Animar Solo Transform y Opacity

Restringir backdrop-blur Solo a Elementos Fijos

Colapsar Todos los Layouts Asimétricos por Debajo de 768px