danielmiessler/LifeOS

Notificación de Voz (PRIMERA ACCIÓN REQUERIDA)

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Ejecutando la habilidad Webdesign", "voice_enabled": true}' > /dev/null

Qué Hace

Diseña e integra interfaces web a través de dos vías. ClaudeDesign utiliza el producto claude.ai/design de Anthropic mediante la habilidad Interceptor y luego integra el resultado en tu código base. DirectDesign escribe el diseño en línea utilizando la filosofía de diseño frontend de código abierto de Anthropic, cargada desde una referencia local. Enrutamiento por defecto: el trabajo corto, ad-hoc y dentro del código va a DirectDesign; los prototipos de varias páginas o compartibles van a ClaudeDesign.

El Problema

Producir una buena interfaz web generalmente significa luchar contra una herramienta visual que no puede tocar tu código base real, o codificar desde cero y terminar con los mismos valores predeterminados genéricos de siempre. Los dos modos de fallo tiran en direcciones opuestas: las herramientas visuales te dan pulido pero un vacío en la transferencia, mientras que escribir código directamente te da integración pero una estética plana. Esta habilidad te ofrece ambas rutas bajo un mismo techo: un recorrido visual a través de claude.ai/design cuando la revisión importa, o diseño en línea con una doctrina estética real cargada cuando la velocidad y la iteración dentro del código importan, y enruta a la correcta según la petición.

Cómo Funciona

Webdesign cubre tres rutas para producir interfaces web. Elige la ruta que se ajuste; muestra las opciones por nombre cuando la intención sea ambigua. Siempre utilizamos la versión de Claude Design que esté activa; no hay una versión que fijar.

Ruta 1 — DirectDesign (trabajo por defecto; {{DA_NAME}} escribe el diseño en línea)

{{DA_NAME}} escribe el diseño directamente con la doctrina estética de código abierto frontend-design de Anthropic cargada en línea. El contenido principal de la indicación se refleja desde github.com/anthropics/skills/tree/main/skills/frontend-design (licencia MIT) en References/FrontendDesignPhilosophy.md: lista de registro, reglas anti-valores predeterminados, recetas de pares de tipografía, vocabulario de movimiento, disciplina de color. Autónomo: sin dependencia de tiempo de ejecución, sin navegador, sin autenticación. Esta es la ruta que realmente ha producido todos los diseños reales que esta habilidad ha generado. Flujo de trabajo: DirectDesign.

Ruta 2 — CLI Nativo de Claude Design (preferido para integración de código + sincronización del sistema de diseño)

Anthropic lanzó los comandos de primera parte /design y /design-sync dentro de Claude Code (junio de 2026, GA en Pro/Max/Team/Enterprise — oficial: support.claude.com/en/articles/14604416). /design-sync extrae el sistema de diseño real de un código base en Claude Design y envía los cambios construidos de vuelta; /design crea y edita diseños desde la terminal. Estos son el reemplazo determinista y de primera parte para el aparato de paquete de transferencia Interceptor hecho a mano — prefíjalos para cualquier cosa vinculada al código. Flujo de trabajo: NativeDesignSync.

Ruta 3 — ClaudeDesign a través de Interceptor (respaldo de revisión visual EXPERIMENTAL)

⚠️ No verificado y actualmente no funcional. Esta ruta controla el lienzo web de claude.ai/design a través de la habilidad Interceptor para una revisión visual. Requiere una sesión autenticada de claude.ai en el perfil de Chrome interceptor-test, que actualmente no ha iniciado sesión, y nunca se ha ejecutado de principio a fin (todas las ejecuciones reales de esta habilidad usaron DirectDesign). Úsala solo cuando quieras específicamente el lienzo web visual Y hayas configurado el inicio de sesión primero. Flujos de trabajo: CreatePrototype, ExtractDesignSystem, RefinePrototype, WebsiteToRedesign, ExportToCode, IntegrateIntoApp, DeployDesign. Herramienta: DriveClaudeDesign.ts.

Regla de enrutamiento

Cuando el usuario pide "un diseño bonito" / "diseña algo" sin nombrar una ruta:

• Por defecto, usa DirectDesign para trabajo corto, ad-hoc y dentro del código — velocidad e iteración en contexto.
• Usa el CLI nativo (/design-sync) cuando el trabajo sea sincronizar un sistema de diseño de un código base real o hacer trabajo de diseño vinculado al código y los comandos estén disponibles.
• Recurre a ClaudeDesign (Ruta 3) solo cuando se quiera explícitamente la revisión del lienzo web visual, y recuerda que necesita el inicio de sesión único y no está probado.

Operación Consciente de la Integración (CRÍTICO)

Esta habilidad se invoca con frecuencia como un subpaso de un trabajo de sitio más grande — escribir una entrada de blog, construir un panel de administración, lanzar una página de marketing. Cuando se invoca desde un contexto padre, la habilidad:

• Acepta el contexto del proyecto existente como entrada: framework, archivo de tokens, directorio de componentes, destino de implementación.
• Produce resultados como diffs/parches contra la aplicación existente, no archivos HTML aislados.
• Respeta los tokens de diseño y patrones de componentes existentes — NO los sobrescribe a menos que el usuario solicite un rediseño completo.
• Enruta el trabajo de integración a través de Workflows/IntegrateIntoApp.md.

Cuando se invoca de forma independiente para un diseño desde cero, la habilidad produce un prototipo autónomo y opcionalmente prepara una nueva aplicación.

Personalización

Las preferencias de diseño específicas del usuario (paleta de colores, tipografía, cuadrícula de espaciado, temporización de animación, valores predeterminados del framework) se encuentran en:

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # Tokens de diseño, frameworks preferidos
├── README.md
└── EXTEND.yaml

La habilidad lee PREFERENCES.md si está presente y pasa esos tokens al resumen de Claude Design y a cualquier paquete de transferencia posterior. Sin una capa de personalización, la habilidad utiliza por defecto la salida de extracción del sistema propio de Claude Design.

Enrutamiento de Flujos de Trabajo

Al ejecutar un flujo de trabajo, muestra esta notificación:

Ejecutando **WorkflowName** en **Webdesign**...

Flujo de Trabajo	Desencadenante	Archivo
DirectDesign (Ruta 1 — predeterminada, {{DA_NAME}} escribe en línea)	"haz un diseño bonito", "diseña esto directamente", "haz el diseño tú mismo", "diseña algo genial", "estética frontend", "interfaz brutalista/editorial/retro/maximalista", cualquier petición de diseño ad-hoc corta sin "prototipo" / "maqueta" / "diseño Claude"	Workflows/DirectDesign.md
NativeDesignSync (Ruta 2 — preferida para trabajo de código)	"/design", "/design-sync", "sincronización de diseño", "sincronizar sistema de diseño", "extraer sistema de diseño a Claude Design", "enviar código de vuelta a Claude Design", "comando de diseño nativo"	Workflows/NativeDesignSync.md
CreatePrototype (Ruta 3 — experimental, controla claude.ai/design)	"diseña un prototipo", "crea prototipo", "maqueta", "construye un diseño", "diseño Claude", "usa claude.ai/design"	Workflows/CreatePrototype.md
ExtractDesignSystem (Ruta 3)	"extraer sistema de diseño", "extraer tokens de", "extraer marca"	Workflows/ExtractDesignSystem.md
RefinePrototype (Ruta 3)	"iterar sobre", "refinar", "ajustar espaciado", "cambiar color"	Workflows/RefinePrototype.md
WebsiteToRedesign (Ruta 3)	"rediseñar este sitio", "reconstruir esta URL", "modernizar"	Workflows/WebsiteToRedesign.md
ExportToCode (Respaldo Ruta 3 — prefiere /design-sync)	"exportar a código", "enviar a código", "enviar a Claude Code", "procesar transferencia"	Workflows/ExportToCode.md
IntegrateIntoApp (Respaldo Ruta 3 — prefiere /design-sync)	"integrar esto en", "parchear en la aplicación", "aterrizar en el código base existente"	Workflows/IntegrateIntoApp.md
DeployDesign (Ruta 3)	"implementar el diseño", "enviar a producción"	Workflows/DeployDesign.md

Para trabajo vinculado al código (exportación, integración, extracción/sincronización de sistema de diseño), prefiere la Ruta 2 (NativeDesignSync → /design-sync). Los flujos de trabajo de paquete de la Ruta 3 anteriores permanecen como respaldo documentado para cuando trabajes desde el lienzo web, pero no están probados y necesitan el inicio de sesión del perfil de prueba.

Requisitos Previos (PREFLIGHT)

La Ruta 1 (DirectDesign) no necesita nada — sin navegador, sin autenticación. La Ruta 2 (CLI nativo) solo necesita una suscripción a Claude que incluya Claude Design y un Claude Code actual (/update si los comandos no aparecen). Las comprobaciones a continuación se aplican SOLO a la Ruta 3 (ClaudeDesign a través de Interceptor):

1. Habilidad Interceptor disponible — which interceptor devuelve una ruta. Si no, indica al usuario que invoque primero la configuración de Skill("Interceptor").
2. Sesión autenticada de claude.ai — el perfil de Chrome interceptor-test debe haber iniciado sesión en claude.ai. Compruébalo en tiempo de ejecución (un perfil no autenticado llega a la pared de marketing, no a la aplicación); si no lo está, se requiere un inicio de sesión único con navegador antes de que pueda ejecutarse cualquier flujo de trabajo de la Ruta 3.
3. Acceso a Claude Design — la suscripción a Claude debe incluir Claude Design (Pro, Max, Team o Enterprise con suscripción del administrador).
4. Para IntegrateIntoApp: ruta del proyecto padre + identificador del framework (next, astro, vitepress, vite-react, vue, vanilla) pasados en el contexto.

Requisitos previos faltantes → detente con un paso de remediación claro. Nunca recurras a una alternativa en silencio.

Errores Comunes

Acumula lecciones aquí. La densidad de información es máxima en los errores comunes.

• Dos rutas, una habilidad. ClaudeDesign (CreatePrototype et al.) controla claude.ai/design; DirectDesign hace que {{DA_NAME}} escriba el diseño en línea usando References/FrontendDesignPhilosophy.md. No las confundas. Cuando la intención del usuario sea ambigua, muestra ambas como opciones nombradas y deja que elija — nunca decidas en silencio.
• Nativo primero — el código y los tokens son la fuente de verdad, Figma no es una dependencia. Importa un sistema de diseño vinculando el repositorio (Claude Design lee componentes y tokens reales del código) o subiendo archivos de tokens/componentes, nunca una exportación .fig. NO agregues un recorrido de Figma en ninguna dirección (diseño → .fig, o código → marcos de Figma editables). La apuesta es que el diseño vive en el código base, no en un archivo de intercambio externo. Si alguna vez surge una necesidad de revisión visual sin repositorio, resuélvela con una URL/compartición de captura de pantalla, no acoplando la habilidad a Figma.
• DirectDesign es autónomo. La doctrina estética vive en References/FrontendDesignPhilosophy.md (reflejada de la fuente MIT de anthropics/skills). Sin dependencia de tiempo de ejecución en el plugin frontend-design de Claude Code instalado — DirectDesign funciona en cualquier entorno LifeOS.
• Los comandos nativos /design + /design-sync son ahora la ruta vinculada al código (CONFIRMADO). La documentación oficial de Anthropic (support.claude.com/en/articles/14604416) documenta ambos comandos, GA en Pro/Max/Team/Enterprise desde junio de 2026. /design-sync hace sincronización bidireccional código base↔sistema de diseño — úsalo en lugar del aparato de paquete de transferencia de Interceptor para cualquier cosa vinculada al código. Todavía no hay API REST pública ni servidor MCP; los comandos CLI son la superficie programática. Si no aparecen, ejecuta /update.
• La ruta ClaudeDesign/Interceptor (Ruta 3) no está probada y actualmente está bloqueada. Nunca se ha ejecutado de principio a fin — todas las ejecuciones reales de esta habilidad usaron DirectDesign. El perfil interceptor-test no ha iniciado sesión en claude.ai, por lo que DriveClaudeDesign.ts llega a la pared de marketing, no a la aplicación. La herramienta se dirige a los controles mediante heurísticas del árbol de accesibilidad (compositor por role=textbox/contenteditable, enviar por /send|submit/, exportar por /export/), por lo que un botón movido NO es el bloqueador — la autenticación faltante y la supervisión del CLI nativo lo son. Antes de confiar en la Ruta 3: inicia sesión una vez en el perfil de prueba en claude.ai, luego haz una ejecución supervisada única.
• Chrome real requerido. Usa la habilidad Interceptor — es la única automatización de navegador autorizada en LifeOS. La interfaz de Claude Design depende del estado completo de la sesión de claude.ai; la automatización basada en CDP activa la detección de bots y elimina las cookies de sesión.
• Los paquetes de transferencia son directorios, no archivos individuales. Un paquete contiene PROMPT.md, opcionalmente tokens.json, components/, assets/ y andamiaje específico del framework. Trata todo el directorio como la unidad.
• El plugin frontend-design se activa automáticamente. Cuando el paquete de transferencia se alimenta a Claude Code, el plugin (ya instalado en el mercado oficial) recoge el trabajo frontend automáticamente — NO lo invoques manualmente.
• La extracción del sistema de diseño de Claude Design se ejecuta durante la incorporación. Para un código base nuevo del que quieras que Claude Design entienda, ejecuta ExtractDesignSystem PRIMERO antes de CreatePrototype — de lo contrario, Claude Design utiliza valores predeterminados genéricos y sobrescribe tus tokens.
• Integración ≠ sobrescritura. IntegrateIntoApp produce diffs sobre el código existente. Si el usuario quiere un rediseño completo que reemplace la interfaz existente, márcalo explícitamente y obtén confirmación.
• Las exportaciones de Canva son editables. Si el usuario quiere que un no desarrollador (comercial, fundador) refine el diseño, enruta a través de Workflows/ExportToCode.md con --format canva.
• Sin colaboración en tiempo real. Claude Design no admite edición multijugador como Figma. Comparte mediante exportación de URL para revisión asíncrona.
• Bloqueo empresarial. Las cuentas Enterprise necesitan que un administrador habilite Claude Design en la configuración de la organización antes de que aparezca el icono de paleta en claude.ai.
• Cuotas de sesión. La generación de Claude Design consume muchos tokens. A partir de la actualización de junio de 2026, su uso comparte un solo grupo con el chat de claude.ai, Claude Code y Cowork — ya no es una cuota separada. Pro es ajustado para trabajo de diseño sostenido; se recomienda Max.
• Sistema de diseño primero es la solución de tokens. El mayor consumo de tokens es reinferir tu marca en cada paso y luego corregirla. Ejecuta ExtractDesignSystem una vez para que el sistema sea una referencia fija reutilizable; cada generación posterior lo reutiliza en lugar de adivinar. Menos ciclos de corrección = muchos menos tokens durante la vida de un proyecto. Esta es la única acción de mayor apalancamiento contra el agotamiento de la cuota.
• Fidelidad de salida ≠ lista para producción. Claude Design produce imágenes pulidas, pero el código de transferencia a menudo necesita una verificación + una pasada de accesibilidad. Ejecuta Tools/VerifyDesign.ts después de la integración.
• La visión no adivina. Si la indicación no especifica puntos de interrupción responsivos, requisitos de contraste o comportamiento de modo oscuro, Claude Design elige valores predeterminados que pueden no coincidir con la aplicación objetivo. Sé explícito en el resumen.

Ejemplos

Ejemplo 1: Crear un prototipo a partir de un resumen

Usuario: "Diseña una página de precios para una startup de seguridad de IA — estética editorial, solo oscuro"
→ Invoca el flujo de trabajo CreatePrototype
→ Preflight: Interceptor + sesión autenticada de claude.ai
→ Compone el resumen con estética explícita, restricciones, diferenciación
→ Controla claude.ai/design a través de Herramientas

...

[truncado para traducción]