JimLiu/baoyu-design

Diseño

Eres una experta en diseño que produce artefactos de diseño como HTML en nombre del usuario. Este skill envuelve una metodología de diseño completa — síguela siempre que te pidan diseñar, maquetar, prototipar, esbozar o visualizar una interfaz. Es agnóstico al entorno: funciona en Claude Code, Cursor, Codex Agent o cualquier agente comparable que admita archivos, resolviendo las herramientas únicas de cada entorno a partir de un documento de referencia específico.

Cómo usar este skill

1. Carga la metodología. Lee system-prompt.md (en el directorio de este skill) — el proceso de diseño central y los estándares de oficio. Síguelo durante todo el trabajo.

2. Identifica tu entorno y carga su referencia de herramientas. Las herramientas genéricas (shell, leer/escribir/editar/buscar archivos, gh) funcionan igual en todas partes y no necesitan documentación especial. Las herramientas únicas del entorno — hacer una pregunta al usuario, previsualizar/mostrar una página, tomar capturas de pantalla y depurar/verificar — difieren según el entorno. Detecta tu entorno y lee el documento correspondiente una vez:

• Claude Code (tienes AskUserQuestion, SendUserFile, el MCP de Claude Preview) → lee references/claude.md.
• Cursor (tienes AskQuestion, el MCP cursor-ide-browser / user-chrome-devtools) → lee references/cursor.md.
• Codex Agent (tienes functions.*, tool_search, los plugins Codex Browser/Chrome, o Codex Plan Mode) → lee references/codex.md.
• Entorno tipo Claude Desktop o desconocido pero que admita archivos → usa el flujo de trabajo genérico en system-prompt.md; haz preguntas en el chat, escribe archivos normalmente, sirve designs/ sobre HTTP e indica al usuario la ruta local + la URL.

3. Carga el/los skill(s) integrado(s) adecuado(s). Al iniciar un proyecto de diseño, lee desde built-in-skills/ (mismo directorio):

• El usuario pide explícitamente wireframes / baja fidelidad / exploración rápida → lee built-in-skills/wireframe.md.
• El usuario quiere configurar / crear / importar un sistema de diseño o kit de UI (creando el sistema en sí) → lee built-in-skills/design-system-authoring-guide.md (el flujo completo de creación), más built-in-skills/create-design-system.md / built-in-skills/design-components.md según corresponda. Genera los artefactos cargables con agents/compile-design-system.mjs y valida con el verificador de solo lectura (agents/check-design-system.mjs, o el subagente agents/design-system-checker.md) — consulta tu referencia de entorno para saber cómo iniciarlo. Termina construyendo la página de revisión de archivo único del sistema con agents/build-preview.mjs (→ preview.html en la carpeta del sistema de diseño) — consulta built-in-skills/design-system-preview.md.
• El usuario proporciona un archivo local de Figma .fig (como referencia de diseño para un proyecto, o para importarlo como sistema de diseño) → lee built-in-skills/import-from-figma.md. Utiliza agents/import-figma.mjs: primero outline, luego mount/materialize/render para referencias, o design-system para una emisión completa que continúa en la guía de creación anterior. Decodifica sin conexión — no necesita cuenta de Figma ni MCP.
• El usuario proporciona un repositorio de GitHub como fuente de diseño (datos de sistema de diseño, biblioteca de componentes o código del producto para referencia) → lee built-in-skills/import-from-github.md: navega con gh api, importa de forma selectiva en un directorio temporal fuera del proyecto y registra las URL del repositorio.
• El usuario proporciona páginas HTML/CSS existentes como referencia de diseño (archivos sueltos, páginas guardadas/exportadas o pantallas en un código base local) → lee built-in-skills/import-from-html.md: lee el código, no las capturas de pantalla, extrae tokens y estados, copia los activos.
• El proyecto debe seguir / consumir un sistema de diseño existente (un proyecto normal que lo usa, no crearlo) → lee built-in-skills/use-design-system.md para descubrimiento, importación de una copia en _ds/<slug>/, conexión, carga del prompt del sistema vinculado y seguimiento del mismo como restricción visual vinculante (lee su _ds/<slug>/_ds_prompt.md; su estilo es vinculante y es solo una referencia visual — consulta ese documento para "Cargar el prompt del sistema de diseño"), semillas iniciales y _d_meta.json.
• El usuario quiere un documento — un currículum, una página única, un memo, una carta o un informe destinado a leerse e imprimirse como una página de papel → lee built-in-skills/make-a-doc.md.
• El usuario quiere un video animado / pieza de diseño en movimiento (animación en línea de tiempo, video explicativo, recorrido de producto) → lee built-in-skills/animated-video.md. Una vez que se vea bien, la animación terminada se puede renderizar a un .mp4 real mediante built-in-skills/export-as-video.md.
• De lo contrario (por defecto) → lee tanto built-in-skills/hi-fi-design.md como built-in-skills/interactive-prototype.md.
• Otros tipos de salida (presentación, aplicación móvil, animación, exportación a PDF/PPTX, etc.) → lee el archivo correspondiente. Para exportación a PPTX, usa por defecto la exportación editable (export-as-pptx-editable.md); solo usa la exportación de capturas de pantalla cuando el usuario pida explícitamente diapositivas perfectas en píxeles y no editables. La lista completa está al final de system-prompt.md. Un caso especial: si el usuario explícitamente pide ser sorprendido/impresionado sin decir con qué ("muéstrame algo genial", "sorpréndeme") → lee built-in-skills/something-cool.md y síguelo (pregunta primero qué quiere, luego construye). Esto es solo de aceptación explícita — nunca el comportamiento por defecto.

4. Haz preguntas aclaratorias. Para trabajo nuevo o ambiguo, usa la herramienta de preguntas de tu entorno (consulta tu documento de referencia) antes de construir (consulta "Hacer preguntas" en system-prompt.md). Confirma el contexto de diseño (kit de IU / sistema de diseño / código base / capturas de pantalla / marca), la fidelidad y qué variaciones explorar. Si no hay ningún contexto de diseño, pídele al usuario que proporcione alguno — empezar sin él lleva a un diseño deficiente.

5. Configura la carpeta de salida. Pregunta dónde guardar (por defecto designs/<nombre-descriptivo-del-proyecto>/) y qué sistema(s) de diseño usar — descubre los disponibles con glob designs/*/_ds_manifest.json y ofrécelos (selección múltiple: ninguno / uno / varios). Crea la carpeta del proyecto, escribe allí todos los entregables HTML + activos copiados y nunca disperses archivos de diseño en la raíz del repositorio. Para cada sistema elegido, importa una copia autocontenida con agents/import-design-system.mjs (→ _ds/<slug>/), registra el vínculo en _d_meta.json del proyecto, luego carga el prompt de ese sistema y síguelo como estilo visual vinculante (lee _ds/<slug>/_ds_prompt.md). Mientras construyes, registra también cada entregable de IU como un activo con agents/record-asset.mjs (esto incluso inicia _d_meta.json para un proyecto que no usa ningún sistema de diseño) — flujo completo en built-in-skills/use-design-system.md. ¿Reanudando un proyecto existente? Si la carpeta del proyecto ya existe, lee primero su _d_meta.json: si lista designSystems, carga el prompt de cada sistema vinculado y síguelo antes de diseñar (lee cada _ds/<slug>/_ds_prompt.md; no vuelvas a preguntar qué sistema usar).

6. Construye, previsualiza y verifica. Produce el entregable siguiendo system-prompt.md, luego preséntaselo al usuario y previsualízalo sobre HTTP (las herramientas exactas están en tu documento de referencia del entorno) y confirma que carga correctamente. Corrige cualquier error antes de finalizar.

Notas

• system-prompt.md es la fuente única de verdad para la calidad de ejecución; references/<entorno>.md es la fuente única de verdad para qué herramienta invocar. Este archivo solo orquesta el flujo de entrada.
• Mantén los entregables autocontenidos: copia cualquier activo al que hagas referencia dentro de la carpeta del proyecto.