Ejecuta Claude Design Localmente como una Habilidad de Agente con baoyu-design
Ejecuta Claude Design localmente como una Habilidad de Agente para Cursor, Claude Code y más. Produce maquetas de UI pulidas, prototipos y wireframes como HTML autónomo.
¿Qué es baoyu-design?
baoyu-design empaqueta el motor de diseño detrás de claude.ai/design en una Habilidad de Agente portátil. En lugar de depender del sitio web alojado de Anthropic, colocas esta habilidad en tu agente de codificación local — Cursor, Claude Code, Codex, o cualquiera de los más de 70 agentes compatibles — y obtienes la misma salida de diseño de alta calidad directamente en tu editor.
El resultado: maquetas de UI pulidas, prototipos interactivos, wireframes, páginas de aterrizaje, paneles de control, aplicaciones móviles y presentaciones de diapositivas — todo producido como archivos HTML autónomos que viven en tu repositorio. Sin sitio web, sin suscripción separada, sin paso de carga.
Por qué ejecutarlo localmente
Libertad del sitio web
Obtienes la gran mayoría de las capacidades de claude.ai/design sin salir nunca de tu editor. Misma metodología, mismos estándares de artesanía, mismo formato de salida — pero completamente local.
Mejor con Opus 4.8
La habilidad es un resumen de diseño largo y exigente. Cuanto más fuerte sea el modelo, mejor será el resultado. Combínalo con Claude Opus 4.8 para obtener la mejor salida, aunque también funciona bien en otros modelos capaces.
Itera señalando, no describiendo
Debido a que el entregable es HTML plano servido en localhost, puedes apoyarte en la vista previa del navegador integrada de tu agente y las herramientas de anotación de elementos (Cursor Browser / DevTools, Claude Preview o Codex Browser). Señala un botón en la vista previa en vivo, di lo que quieres cambiar, y el agente edita la fuente subyacente — un bucle de edición de segunda pasada visual y ajustado que es difícil de conseguir en un sitio web.
Todo es tuyo
La salida cae en designs/<proyecto>/ como HTML autónomo que puedes versionar, bifurcar, exportar o enviar. Sin bloqueo de proveedor.
Lo que puede hacer
La habilidad impulsa un proceso de diseño completo — preguntas aclaratorias → recopilación de contexto de diseño → producción de uno o más entregables HTML → vista previa y verificación. Incluye 24 habilidades integradas y un conjunto de andamios de componentes listos para usar.
| Área | Habilidades Integradas |
|---|---|
| Diseño principal | Diseño de alta fidelidad · Prototipo interactivo · Wireframe · Dirección estética del frontend |
| Presentaciones | Hacer una presentación · Notas del orador |
| Móvil y movimiento | Prototipo móvil · Video animado · Efectos de sonido |
| Sistemas de diseño | Crear sistema de diseño · Componentes de diseño (.dc.html) · Hacer ajustable |
| Exportación y entrega | HTML autónomo · PDF · PPTX (editable) · PPTX (capturas de pantalla) · Enviar a Figma · Enviar a Canva · Entregar a Claude Code |
| Activos de IA e integración | Generación de imágenes Gemini · Llamar a Claude desde prototipos · Leer PDF |
Componentes iniciales (en starter-components/) ahorran al agente tener que crear desde cero lo básico: marcos de iOS / Android / macOS / navegador, un lienzo de diseño con zoom panorámico, un escenario de presentación de diapositivas, un motor de animación de línea de tiempo, un panel de ajustes y una ranura de imagen rellenable.
Cómo funciona
La habilidad es Markdown plano más algunos andamios JSX/JS — sin paso de compilación, sin tiempo de ejecución.
skills/baoyu-design/
├── SKILL.md # Punto de entrada — orquesta todo el flujo
├── system-prompt.md # La metodología de diseño y los estándares de artesanía (fuente de verdad)
├── references/
│ ├── claude.md # Mapa de herramientas para Claude Code
│ ├── cursor.md # Mapa de herramientas para Cursor
│ └── codex.md # Mapa de herramientas para Codex Agent
├── built-in-skills/ # 24 indicaciones especializadas (presentaciones, móvil, exportación, …)
└── starter-components/ # Marcos de dispositivos, escenario de presentación, lienzo, motor de animación, …
Cuando pides un diseño, el agente lee SKILL.md, carga la metodología principal de system-prompt.md, detecta si se está ejecutando en Cursor, Claude Code, Codex Agent o un arnés genérico capaz de manejar archivos, y lee el documento de referencia correspondiente cuando existe. Luego, solo incorpora las habilidades integradas que la tarea necesita. La división mantiene las reglas de artesanía independientes del entorno, mientras que cada entorno resuelve sus propias herramientas para hacer preguntas, previsualizar, capturar pantallas y verificar.
Inicio rápido
Requisitos previos
- Un agente local — Cursor, Claude Code, Codex, o cualquiera de los más de 70 agentes que admite el instalador (Cline, Roo Code, GitHub Copilot…). Cursor, Claude Code y Codex tienen referencias de herramientas de primera clase dentro de la habilidad.
- Claude Opus 4.8 seleccionado como modelo, para obtener los mejores resultados.
- Node.js (para ejecutar el instalador
npxa continuación). Python 3 también es útil para el servidor de vista previa local.
Instalación
Recomendado — la CLI de skills. npx skills (de Vercel Labs) lee este repositorio, encuentra skills/baoyu-design/ y lo coloca en la carpeta correcta para el agente que detecte:
# Instalar en el proyecto actual (detecta automáticamente tu agente)
npx skills add JimLiu/baoyu-design
# …o instalar globalmente, para cada proyecto
npx skills add JimLiu/baoyu-design -g
# Apuntar a un agente específico explícitamente
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex
# Solo listar lo que hay en el repositorio primero
npx skills add JimLiu/baoyu-design --list
Se instala en .claude/skills/ para Claude Code y .agents/skills/ para agentes estilo Cursor/Codex (añade -g para la instalación de usuario a nivel de ~/).
Alternativa — entrega la URL del repositorio a tu agente. ¿No quieres instalar nada? Pega la URL en el chat y deja que el agente obtenga la habilidad por sí mismo:
Lee https://github.com/JimLiu/baoyu-design y sigue su skills/baoyu-design/SKILL.md para diseñar una pantalla de configuración para una aplicación de meditación.
El agente clona o obtiene el repositorio, carga SKILL.md y procede — perfecto para un uso único.
Uso
Una vez que la habilidad está instalada (o obtenida), solo describe una tarea de diseño en lenguaje natural — se activa automáticamente desde su descripción:
Diseña 3 variaciones de alta fidelidad de una pantalla de configuración para una aplicación de meditación.
En Claude Code también puedes activarla explícitamente con /baoyu-design; en Codex, menciona $baoyu-design cuando las habilidades estén disponibles. El agente hace algunas preguntas aclaratorias, construye el HTML bajo designs/ y lo previsualiza a través de localhost. Señala cualquier elemento en la vista previa en vivo y di qué cambiar — el agente edita la fuente subyacente para una segunda pasada visual rápida.
Servidor de vista previa
Los entregables se previsualizan a través de HTTP (los prototipos de múltiples archivos no se cargan desde file://). El agente normalmente lo inicia por ti; para ejecutarlo manualmente:
python3 -m http.server 4311 --directory designs
# luego abre http://localhost:4311/<proyecto>/<archivo>.html
Sistemas de diseño
Más allá de las maquetas únicas, la habilidad puede mantener todo un proyecto sujeto a un sistema de diseño — un paquete versionado de los tokens, fuentes, componentes y kits de UI completos de una marca. Los sistemas viven junto a tus proyectos bajo designs/: crea uno con la habilidad integrada Crear sistema de diseño, o coloca uno preconstruido. Una vez que existe un sistema, dos flujos permiten que cualquier proyecto lo consuma.
Importar un sistema de diseño existente
Cuando inicias un diseño, el agente pregunta dónde guardarlo y qué sistema(s) de diseño usar — descubre cada sistema bajo designs/ y los lista, para que puedas elegir ninguno (diseño libre), uno o varios. Nombra uno de antemano y omite el menú:
Diseña una pantalla de configuración usando el sistema de diseño Fluent 2.
Para cada sistema que elijas, el agente sincroniza una copia autónoma y fijada por versión en tu proyecto en _ds/<slug>/, conecta su CSS y paquete de componentes en la página, y registra el enlace en _d_meta.json del proyecto. Esa copia local es lo que mantiene el proyecto portátil y reproducible — nada alcanza fuera de la carpeta, y volver a ejecutar la importación es cómo obtienes actualizaciones después. Elige varios sistemas y uno se vuelve primario — posee la apariencia general y gana cualquier colisión de tokens, mientras que los otros prestan componentes específicos.
Usar un sistema de diseño importado
Una vez que un sistema está vinculado, actúa como un contrato visual vinculante, no como una sugerencia vaga: cada pantalla se construye a partir de los tokens, tipo, espaciado y componentes reales del sistema, y el agente no inventará colores o estilos fuera del sistema. Si el sistema incluye puntos de partida — pantallas o componentes listos para usar — puedes iniciar un nuevo diseño desde uno en lugar de empezar en blanco.
El vínculo viaja con el proyecto. Vuelve a abrirlo más tarde y el agente lee _d_meta.json, recarga el sistema y sigue diseñando en estilo — sin necesidad de volver a elegir. Desde allí puedes actualizar un sistema para obtener actualizaciones, añadir otro, intercambiar cuál es primario o eliminar uno por completo.
Ejemplos de indicaciones
- "Diseña 3 variaciones de alta fidelidad de una página de precios usando la marca de esta captura de pantalla."
- "Prototipa un flujo de incorporación funcional — estado real, transiciones, validación de formularios."
- "Haz una presentación de 10 diapositivas a partir de este PRD para una reunión general de ingeniería."
- "Esboza algunas ideas de diseño para la pantalla de inicio de un rastreador de gastos móvil."
- "Recrea la interfaz de compositor de esta base de código, luego expórtala como HTML autónomo."
- "Construye un panel de control usando nuestro sistema de diseño, comenzando desde su pantalla de análisis."
Para obtener los mejores resultados, proporciónale contexto de diseño — una captura de pantalla, un kit de UI, un enlace de Figma o una base de código. Comenzar desde un contexto real es la mayor palanca para la calidad; la habilidad lo pedirá si no lo proporcionas.
Créditos y licencia
Este proyecto reempaqueta Claude Design, la habilidad de diseño de Anthropic que impulsa claude.ai/design, para que pueda ejecutarse en agentes locales. Es un esfuerzo independiente de la comunidad y no está afiliado ni respaldado por Anthropic.
Reempaquetado y mantenido por Jim Liu 宝玉. Publicado bajo la Licencia MIT.