Huepor dominikmartn

Hue Skill.

Crea las reglas que guiarán el trabajo futuro de interfaces, no solo una pantalla terminada.

Sistemas de diseño
Creación de Skills
Tokens de diseño

Revisión de la fuente · HueSKILL.md

Tarea Sistemas de diseño Produce • Una Skill de diseño reutilizable con design-model.yaml como fuente de verdad. • Archivos de referencia de tokens, componentes y equivalencias por plataforma. • Vistas previas HTML de un panel, una biblioteca de componentes, una página de aterrizaje y una pantalla de aplicación. Antes de empezar Requiere acceso a archivos, herramientas adecuadas para inspeccionar referencias, Node para validate.mjs y revisión en navegador para tener confianza visual. La disponibilidad de herramientas afecta a la fidelidad de la extracción.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Convierte un lenguaje de diseño en una Skill reutilizable

Genera una skill de diseño reutilizable a partir del análisis de referencias, un modelo YAML compartido, documentación y cuatro vistas previas validadas.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

Cómo funciona

Hue es una metaskill que produce otra Skill de lenguaje de diseño. Puede partir de una marca, una URL, un código base, capturas de pantalla, una descripción o una Skill existente para remezclar. Separa los hechos de diseño observados de las decisiones derivadas, registra las decisiones en design-model.yaml y genera a partir de ese modelo la documentación y las vistas previas posteriores.

Su resultado incluye más que colores y tipografías. La fuente abarca inventarios de componentes, razonamiento sobre iconos alternativos, composición del escenario principal (hero), tokens claros y oscuros, equivalencias por plataforma y cuatro demostraciones visuales. También exige validación y revisión visual. La fuente revisada contiene algunas indicaciones incoherentes sobre el origen de las fuentes tipográficas, por lo que conviene comprobar la licencia y la disponibilidad exactas en lugar de dar por compatibles todas las recomendaciones.

Entregables previstos

Una Skill de diseño reutilizable con design-model.yaml como fuente de verdad.
Archivos de referencia de tokens, componentes y equivalencias por plataforma.
Vistas previas HTML de un panel, una biblioteca de componentes, una página de aterrizaje y una pantalla de aplicación.

Ver el brief de ejemplo

Del brief a la revisión

01
Analizar la entrada
Reúne valores reales del código fuente o de los estilos calculados cuando sea posible, y marca como de menor confianza las observaciones obtenidas de capturas de pantalla o de la extracción de texto.
02
Confirmar la dirección
Revisa la interpretación estética y los tokens principales antes de generar un conjunto de archivos más grande.
03
Construir primero el modelo
Registra en YAML las primitivas, los roles semánticos, los componentes, los iconos alternativos y las decisiones del escenario principal (hero).
04
Generar y validar
Produce las referencias y las vistas previas a partir del modelo, ejecuta el validador incluido e inspecciona los resultados renderizados en ambos modos.

02 Cuándo usarlo

Cuándo usarla

Requiere acceso a archivos, herramientas adecuadas para inspeccionar referencias, Node para validate.mjs y revisión en navegador para tener confianza visual. La disponibilidad de herramientas afecta a la fidelidad de la extracción.

Buena opción

Pautas de marca reutilizablesÚtil cuando varias sesiones del asistente necesitan un lenguaje visual más explícito.
Remezclas de Skills de diseñoPermite cambiar dimensiones seleccionadas conservando la filosofía existente y las reglas no afectadas.

Límites que conviene revisar

No implica propiedad de los recursosLas fuentes tipográficas, los iconos, las fotografías y las imágenes de producto propietarios que se observen no tienen automáticamente licencia para su redistribución.
No es una clonación exacta de la marcaLos kits alternativos y los componentes derivados deben identificarse con honestidad.
Análisis que depende del entornoLa inspección de estilos calculados, las capturas del navegador y la validación local necesitan herramientas disponibles; las entradas más débiles reducen la confianza.

Aporta estos datos

Referencia de diseñoProporciona una URL de marca, un código base, capturas de pantalla, una dirección por escrito o una Skill existente.
Alcance y plataformaIndica el dominio del producto y si te resultan útiles las equivalencias para CSS, Tailwind o SwiftUI.
Restricciones de recursos y de marcaIdentifica el material propietario, las alternativas aprobadas y las decisiones que deben mantenerse sin cambios.

03 Decisiones importantes

Decisiones que importan

Observado frente a derivado
Un botón encontrado en la fuente y un interruptor recién inferido no deberían presentarse como igualmente verificados.
Un solo modelo limita las divergencias
Generar los documentos y las vistas previas desde el mismo YAML reduce las discrepancias entre los tokens declarados y los valores renderizados.
Prueba en pantallas de aplicación
Un lenguaje de diseño que solo funciona en un hero puede fallar en una pantalla de aplicación densa; la cuarta vista previa pone a prueba esa diferencia.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa el repositorio completo del generador con sus plantillas y su script de validación. Las carpetas de Skills generadas tienen sus propios nombres de detección y ubicaciones de instalación, que varían según el agente.

Archivo fuente original

https://github.com/dominikmartn/hue/blob/a910e31cd24b45b9455c0c3502150413aa5a3b32/SKILL.md

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa hue para crear una Skill de lenguaje de diseño reutilizable a partir del código de interfaz local y las capturas de pantalla proporcionados. Distingue los componentes observados de los derivados, conserva nuestro color de acento y el tratamiento de las esquinas reales, y propone alternativas con licencia para tipografías e iconos. Confirma la dirección y los tokens principales; después genera el modelo, las referencias y las cuatro vistas previas con evidencia de validación.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada token renderizado se remonta a design-model.yaml.
Los recursos propietarios observados y las alternativas elegidas se distinguen con claridad.
Todos los archivos HTML generados superan la validación estructural y una revisión visual real.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill incluya sus herramientas externas, credenciales ni dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada a continuación. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: dominikmartn
Repositorio: dominikmartn/hue
Archivo de la Skill: SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · a910e31cd24b

Resumen editorial de la fuente

Genera una skill de diseño reutilizable a partir del análisis de referencias, un modelo YAML compartido, documentación y cuatro vistas previas validadas.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son un indicador de popularidad fechado, no una medida de uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Hue solo crea una página de aterrizaje?

No. La vista previa de la página de aterrizaje es una demostración de una Skill de diseño generada, junto con un panel, una biblioteca de componentes y una pantalla de aplicación.

¿Puede revisar una Skill de diseño existente?

Sí. La vía de remezcla de la fuente modifica primero el modelo y regenera solo los archivos afectados, en lugar de reemplazar todo el sistema.

¿Afirma que la marca de origen usa el kit de iconos alternativo?

No debería. La fuente separa de forma explícita el estilo de iconos observado del kit de licencia libre elegido para las vistas previas.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar Skills de diseño