Repolode
Enviar
JimLiu

JimLiu/baoyu-design

Un skill de agente que ejecuta Claude Design localmente en Cursor, Claude Code u otros agentes para crear maquetas, prototipos y presentaciones HTML autocontenidos.

Alternativa open source a:Claude DesignFigma

Ver en GitHub
Estrellas
6,130
Forks
476
Issues abiertos
0
Último commit
hace 16 horas

¿Qué es?

baoyu-design empaqueta el flujo de trabajo de Claude Design de claude.ai/design como un skill de agente portátil que se ejecuta en un agente de programación local, como Cursor, Claude Code o Codex. El agente hace preguntas para aclarar los requisitos y crea maquetas de UI, prototipos interactivos, wireframes, páginas de inicio, dashboards, pantallas móviles y presentaciones como HTML autocontenido dentro de una carpeta `designs/`; además, permite previsualizarlos en localhost.

El repositorio también incluye cuatro skills complementarios para crear artefactos editables: claude-slides para presentaciones, claude-design para lienzos de mesas de trabajo, claude-design-system para sistemas de diseño y claude-dashboard para dashboards basados en datos. Cada uno se abre en un editor local. Las presentaciones se pueden exportar a PowerPoint, PDF o HTML, y los sistemas de diseño se pueden importar desde archivos Figma .fig o bibliotecas de componentes.

El skill está hecho con Markdown y scaffolds de JSX/JS, sin pasos de compilación, y se instala con el CLI de npx skills. El autor indica que los mejores resultados se obtienen con Claude Opus 5.5 y que el proyecto no está afiliado a Anthropic.

Funciones clave

  • 01Genera maquetas de UI, prototipos, wireframes y páginas de inicio como HTML autocontenido.
  • 02Previsualiza los diseños en localhost y permite señalar un elemento para pedir cambios.
  • 03Exporta presentaciones a PowerPoint editable con animaciones nativas o como capturas de pantalla.
  • 04Ofrece editores para presentaciones, lienzos de diseño, sistemas de diseño y dashboards.
  • 05Importa fuentes de diseño desde archivos Figma .fig, repositorios de GitHub y HTML/CSS existentes.
  • 06Se instala mediante el CLI de npx skills en Claude Code, Cursor y Codex.

Casos de uso

  • Crear una maqueta de una pantalla de configuración o un flujo de incorporación desde el editor.
  • Convertir un PRD o un CSV de analíticas en una presentación o un dashboard.
  • Importar un kit de Figma .fig y convertirlo en un sistema de diseño reutilizable.
  • Crear páginas de inicio y luego exportarlas como HTML independiente.

Inicio rápido

  1. 1

    Instala las skills en tu proyecto con la CLI de skills

    npx skills add JimLiu/baoyu-design
  2. 2

    Describe una tarea de diseño a tu agente; por ejemplo, una pantalla de ajustes para una app de meditación

  3. 3

    Inicia un servidor de vista previa local para los diseños generados

    python3 -m http.server 4311 --directory designs

Antes de usarlo

  • Para obtener los mejores resultados, se necesita Claude Opus 5.5 como modelo, lo que puede requerir una suscripción de pago.
  • Los editores de artefactos requieren Node.js 20 o posterior (Node.js 22 o posterior para la skill de dashboard).

En colecciones

Skills de diseño de interfaces para agentes de programaciónHerramientas, skills y plugins para Claude CodeAsistentes y agentes de programación con IABibliotecas de skills para agentes de IA

Temas

#agent-skills#claude-code#cursor#ui-design#prototyping#html#design-system#slides#claude#claude-design

Preguntas frecuentes

¿Qué es baoyu-design?
Un skill de agente que ejecuta Claude Design localmente en Cursor, Claude Code u otros agentes para crear maquetas, prototipos y presentaciones HTML autocontenidos. baoyu-design empaqueta el flujo de trabajo de Claude Design de claude.ai/design como un skill de agente portátil que se ejecuta en un agente de programación local, como Cursor, Claude Code o Codex. El agente hace preguntas para aclarar los requisitos y crea maquetas de UI, prototipos interactivos, wireframes, páginas de inicio, dashboards, pantallas móviles y presentaciones como HTML autocontenido dentro de una carpeta `designs/`; además, permite previsualizarlos en localhost.
¿baoyu-design es gratuito? ¿Qué licencia tiene?
baoyu-design es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿baoyu-design sigue mantenido?
Mantenimiento activo. El último commit de baoyu-design fue el 5 nov 2026.
¿Para qué puedo usar baoyu-design?
Crear una maqueta de una pantalla de configuración o un flujo de incorporación desde el editor. Convertir un PRD o un CSV de analíticas en una presentación o un dashboard. Importar un kit de Figma .fig y convertirlo en un sistema de diseño reutilizable. Crear páginas de inicio y luego exportarlas como HTML independiente.
¿Cómo se instala baoyu-design?
Instala las skills en tu proyecto con la CLI de skills: npx skills add JimLiu/baoyu-design Describe una tarea de diseño a tu agente; por ejemplo, una pantalla de ajustes para una app de meditación Inicia un servidor de vista previa local para los diseños generados: python3 -m http.server 4311 --directory designs
¿Dónde consigo baoyu-design?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/JimLiu/baoyu-design

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados