Baoyu Designpor JimLiu

Baoyu Design Skill.

Usa un flujo de diseño basado en archivos para prototipos, conceptos de presentación y sistemas visuales reutilizables.

Prototipado
Sistemas de diseño
Presentaciones

Revisión de la fuente · Baoyu DesignSKILL.md

Tarea Prototipado Produce • Artefactos de diseño HTML autónomos con recursos copiados • Un proyecto con vínculos de sistema de diseño registrados y metadatos de recursos • Exportaciones compatibles de presentaciones o animaciones cuando se aplican sus flujos específicos Antes de empezar Un agente capaz de trabajar con archivos y la metodología, las guías integradas, los documentos de referencia y los scripts del repositorio. Las rutas de exportación e importación tienen sus propios requisitos previos.

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

01 Qué hace

Baoyu Design: artefactos HTML autónomos

Un orquestador de diseño HTML con recetas específicas por artefacto, rutas de importación y creación de sistemas de diseño, vista previa local y flujos de exportación cuidadosamente acotados.

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

El enfoque de trabajo

Baoyu Design es una skill de orquestación amplia para producir artefactos de diseño HTML. Su punto de entrada dirige distintos entregables, como wireframes, pantallas de apps, diagramas, documentos y diapositivas, a guías integradas especializadas, mientras una metodología compartida aporta el proceso de diseño.

Lo que la distingue es el contexto de diseño explícito. Puede dirigir archivos locales de Figma, referencias de repositorio y HTML/CSS existentes hacia flujos de importación, o vincular un proyecto a un sistema de diseño copiado. Los entregables permanecen agrupados con sus recursos y metadatos de proyecto, en lugar de convertirse en archivos HTML sueltos. El alcance de la exportación es específico: la exportación a PowerPoint se aplica a presentaciones creadas con su estructura de diapositivas compatible, no a HTML arbitrarias.

Entregables esperados

Artefactos de diseño HTML autónomos con recursos copiados
Un proyecto con vínculos de sistema de diseño registrados y metadatos de recursos
Exportaciones compatibles de presentaciones o animaciones cuando se aplican sus flujos específicos

Ver el brief de ejemplo

Del brief a la revisión

01
Establece el contexto
Identifica el tipo de artefacto, la fidelidad, las referencias de marca y cualquier sistema de diseño existente antes de elegir una receta.
02
Carga la ruta adecuada
Sigue la guía integrada correspondiente y la referencia de herramientas del entorno del agente, en lugar de suponer que todos los entornos tienen las mismas herramientas de vista previa.
03
Vincula el sistema de diseño
Si usas un sistema existente, importa una copia local al proyecto y registra su vínculo. Si lo creas, usa el flujo de compilar, comprobar y previsualizar.
04
Construye y previsualiza
Mantén HTML y los recursos referenciados juntos, sirve el resultado en local y verifícalo en una vista previa real antes de darlo por entregado.

02 Cuándo usarlo

Cuándo usarla

Un agente capaz de trabajar con archivos y la metodología, las guías integradas, los documentos de referencia y los scripts del repositorio. Las rutas de exportación e importación tienen sus propios requisitos previos.

Buen encaje

Conceptos de diseño explorablesAdecuada para un prototipo basado en archivos o un artefacto visual que las partes interesadas puedan abrir e inspeccionar.
Trabajo de sistemas reutilizablesEl punto de entrada tiene rutas explícitas para crear, importar, validar y previsualizar material de sistemas de diseño.

Límites que conviene comprobar

La exportación está acotadaSu ruta a PowerPoint es para presentaciones compatibles creadas con esta skill; no promete convertir cualquier página web en una presentación editable.
El punto de entrada es un orquestadorEl proceso de oficio y las herramientas específicas de cada entorno están en archivos adicionales. Copiar solo SKILL.md omite instrucciones esenciales.

Aporta estos datos

Tipo de artefactoIndica si el resultado es un wireframe, una pantalla de alta fidelidad, una presentación, un documento, un diagrama u otra forma compatible.
Referencias de diseñoProporciona la marca, el kit de UI, el archivo local de Figma, el HTML/CSS o la referencia de repositorio de alcance limitado que corresponda.
Restricciones de salidaIndica dónde debe ubicarse el proyecto y si se requiere una vista previa en navegador o una exportación compatible concreta.

03 Decisiones importantes

Decisiones que importan

El contexto de diseño viaja con el proyecto
Las copias del sistema locales al proyecto y los metadatos hacen explícita la restricción visual al retomar el trabajo.
Reglas específicas por artefacto
El correo electrónico, los documentos de tipo impreso, las diapositivas y las pantallas interactivas siguen recetas distintas, no una fórmula genérica de página web.

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

Obtén el directorio completo de baoyu-design, no solo el archivo de entrada; conserva built-in-skills, agents, references y los componentes iniciales.

Archivo fuente original

https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/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 Baoyu Design para crear un prototipo HTML autónomo de una app de lectura editorial a partir de la referencia HTML/CSS proporcionada. Conserva su tipografía y sus tokens de color, registra el vínculo del sistema de diseño y crea dos estados de lectura realistas. Mantén los recursos en local, previsualiza por HTTP y no intentes exportar a PowerPoint.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El artefacto sigue el contexto de diseño proporcionado.
Los recursos referenciados están dentro del proyecto entregable.
La vista previa carga y el alcance de exportación seleccionado es fiel a la realidad.

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

Descargar OpenDesign Leer la guía rápida

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada más abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: JimLiu
Repositorio: JimLiu/baoyu-design
Archivo de la skill: skills/baoyu-design/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 6530033592bf

Resumen editorial de la fuente

Un orquestador de diseño HTML con recetas específicas por artefacto, rutas de importación y creación de sistemas de diseño, vista previa local y flujos de exportación cuidadosamente acotados.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Depende de un único agente de programación?

No está vinculada a un solo agente de programación. La fuente describe un flujo basado en archivos con referencias de herramientas independientes para los entornos compatibles.

¿Puede leer un archivo local de Figma?

El punto de entrada incluye una ruta de importación de .fig sin conexión. Para ese flujo se requieren su guía de importación detallada y sus scripts.

¿Puede exportar cualquier HTML a PowerPoint?

No. La fuente limita expresamente la exportación de presentaciones a sus HTML compatibles con estructura de diapositivas.

OpenDesign

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

Mantén tu brief, el material de origen y el trabajo de diseño juntos 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