En los propios términos del Skill
Un skill frontend anti-slop para landing pages, portfolios y rediseños. El agente lee el briefing, infiere una dirección de diseño y luego ajusta tres controles (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) que condicionan cada decisión de layout, movimiento y densidad. Asocia los briefings a sistemas de diseño reales cuando existe uno (Fluent, Carbon, GOV.UK, Polaris) y etiqueta con honestidad las direcciones puramente estéticas.
Las reglas estrictas cubren el ajuste del hero al viewport, la moderación del eyebrow, un solo acento y un solo tema por página, señales prohibidas de IA y bibliotecas específicas de iconos, tipografía y animación. Los rediseños comienzan con una auditoría. Concluye con una Verificación Previa mecánica cuyas casillas deben aprobarse todas antes de enviar el código.
Qué produce
- Una Lectura de Diseño de una línea, expuesta antes de escribir cualquier código: tipo de página, público, lenguaje de vibe y el sistema de diseño o familia estética hacia la que se inclina.
- Código frontend con Tailwind v4 por defecto, recurriendo a v3 solo cuando el proyecto existente lo exige.
- Comentarios de código que indican con claridad qué partes son inspiración prestada y cuáles son material oficial.
- Espacios de marcador de posición claramente etiquetados cuando no existe fuente de imagen, junto con una lista final de las imágenes reales que aún se necesitan.
Cómo funciona
- 01Leer el Briefing Antes de Todo
El agente infiere lo que el usuario realmente quiere a partir del tipo de página, las palabras de vibe, las referencias, el público, los activos de marca existentes y las restricciones tácitas, en lugar de saltar a una estética por defecto.
- 02Ajustar los Tres Controles
La base es 8 / 6 / 4, y se ajusta de forma conversacional según la lectura de diseño. Existen preajustes por caso de uso, desde un servicio del sector público (3 / 2 / 5) hasta una landing de agencia (9 / 8 / 3).
- 03Elegir una Base con Honestidad
Si el briefing suena a Microsoft, IBM, GitHub, Shopify, Atlassian o sector público, instalar y usar el paquete oficial en lugar de recrear su CSS a mano.
- 04Aplicar la Pila por Defecto
React o Next.js con Server Components, Tailwind v4 y Motion importado desde motion/react, con la animación aislada en componentes cliente hoja.
- 05Ejecutar la Verificación Previa
Antes de generar cualquier código, cada casilla de la matriz de la Sección 14 debe aprobarse; una sola casilla sin marcar significa que el trabajo no está terminado.