image-to-code

Habilidad de élite de conversión de imagen a código para Codex. Para tareas web visualmente importantes, primero debe generar las imágenes de diseño por sí mismo, analizarlas en profundidad y luego implementar el sitio web para que coincida lo más posible con ellas. En Codex, debe preferir imágenes grandes, legibles y específicas de cada sección en lugar de tableros comprimidos pequeños, generar imágenes independientes nuevas para secciones o vistas detalladas en lugar de recortar las antiguas, evitar la subgeneración perezosa, evitar la interfaz de usuario de tarjetas dentro de tarjetas dentro de tarjetas, y mantener el...

npx skills add https://github.com/leonxlnx/taste-skill --skill image-to-code

Descargar ZIP GitHub

Más skills de leonxlnx

design-taste-frontend

Ingeniero/a Senior de UI/UX. Arquitecto/a de interfaces digitales que anula los sesgos predeterminados de los LLM. Aplica reglas basadas en métricas, arquitectura estricta de componentes, aceleración por hardware de CSS e ingeniería de diseño equilibrada.

developmentdesigncreative

high-end-visual-design

Enseña a la IA a diseñar como una agencia de alto nivel. Define las fuentes, espaciados, sombras, estructuras de tarjetas y animaciones exactas 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.

designcreativedevelopment

redesign-existing-projects

Actualiza sitios web y aplicaciones existentes a calidad premium. Audita el diseño actual, identifica patrones genéricos de IA y aplica estándares de diseño de alto nivel sin romper la funcionalidad. Funciona con cualquier framework CSS o CSS vanilla.

designdevelopmentcode-review

Interfaces limpias de estilo editorial. Paleta monocromática cálida, contraste tipográfico, cuadrículas bento planas, pasteles apagados. Sin degradados, sin sombras pesadas.

designcreativedevelopment

Ingeniero experto en UX/UI y Motion Avanzado con GSAP. Aplica aleatorización verdadera impulsada por Python para variación de diseño, estructura estricta de página AIDA, tipografía editorial amplia (prohíbe saltos de 6 líneas), cuadrículas bento sin espacios, ScrollTriggers estrictos de GSAP (fijación, apilamiento, desplazamiento sincronizado), microimágenes en línea y espaciado masivo entre secciones.

developmentdesigncreative

Habilidad de generación de imágenes de brand-kit premium para crear paneles de guías de marca de alta gama, sistemas de logotipos, presentaciones de identidad y presentaciones de mundos visuales. Entrenada para sistemas de marca minimalistas, cinematográficos, editoriales, dark-tech, de lujo, culturales, de seguridad, de juegos, de herramientas para desarrolladores y de aplicaciones de consumo. Optimizada para la conceptualización intencional de logotipos, composición refinada, tipografía escasa, fuerte significado simbólico, maquetas premium, imágenes dirigidas artísticamente y diseños de cuadrícula flexibles.

creativedesignmarketing

imagegen-frontend-web

Habilidad de frontend de élite para dirección de imágenes, diseñada para generar referencias premium de diseño web orientadas a conversión. REGLA DE SALIDA CRÍTICA: genera UNA imagen horizontal independiente POR CADA sección. Una página de inicio con 8 secciones produce 8 imágenes. Nunca comprimas varias secciones en una sola imagen. Aplica variedad de composición (no siempre texto a la izquierda / imagen a la derecha), libertad de imagen de fondo, CTAs variados, escalas de héroe variadas (gigante / media / minimalista pequeña), columna vertebral narrativa conceptual, momentos de segunda lectura y un...

creativedesigndevelopment

full-output-enforcement

Anula el comportamiento de truncamiento predeterminado del LLM. Exige la generación de código completo, prohíbe patrones de marcadores de posición y maneja limpiamente las divisiones por límite de tokens. Aplica a cualquier tarea que requiera una salida exhaustiva y sin abreviar.

developmentcode-reviewtesting