design-handoffpor Anthropic

Design Handoff Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: especificaciones de traspaso para desarrolladores desde un diseño: layout, tokens, estados de componentes, breakpoints.

Marca y sistemas de diseño
Especificación de traspaso

Descargar OpenDesign Ver guía de uso

anthropics/knowledge-work-plugins · design/skills/design-handoff/SKILL.mdSKILL.md

--- name: design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. --- ## Usage ## What to Include ## Principles ## Output ## Handoff Spec: [Feature/Screen Name] ## If Connectors Available

Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 3.939 caracteres completos

01 Qué hace

Qué Hace el Skill de design-handoff en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Genera documentación de traspaso para desarrolladores a partir de un diseño, pensado para equipos cuyo diseño está listo para ingeniería y necesita una hoja de especificaciones. Apúntelo a una URL de Figma, o recurra a una descripción o captura de pantalla, y trabaja a través de especificaciones visuales, especificaciones de interacción, especificaciones de contenido, casos límite y accesibilidad.

La salida es una especificación de traspaso en Markdown con secciones para visión general, layout, tokens de diseño utilizados, componentes, estados e interacciones, comportamiento responsivo, casos límite, y animación y movimiento, así como notas de accesibilidad. Sus cuatro principios establecidos son especificar todo en lugar de asumir, referenciar tokens en lugar de valores en bruto, mostrar cada estado y explicar el por qué de un comportamiento.

Qué produce

Una tabla de tokens de diseño que lista cada token, su valor y su uso.
Una tabla de componentes que indica la variante, las props y las notas de comportamiento especial de cada componente.
Una tabla de animación y movimiento que registra elemento, disparador, animación, duración y easing.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Resolver la Fuente del Diseño
Una URL de Figma significa que el diseño se extrae de Figma; sin ella, el skill trabaja a partir de una descripción escrita o una captura de pantalla.
02
Especificar los Elementos Visuales
Padding, márgenes y anchos exactos, referencias a tokens de diseño para colores, tipografía y espaciado, breakpoints responsivos, y variantes y estados de componentes.
03
Especificar las Interacciones
Comportamiento de clic y toque, estados de hover, soporte de gestos, y transiciones registradas con duración y easing.
04
Cubrir Contenido y Casos Límite
Límites de caracteres, truncamiento, estados vacíos, estados de carga y error, además de contenido mínimo y máximo, cadenas internacionales más largas, conexiones lentas y datos faltantes.
05
Añadir Detalle de Accesibilidad
Orden de foco, etiquetas y roles ARIA, interacciones de teclado, y anuncios de lector de pantalla.
06
Emitir la Especificación en la Plantilla
El resultado se escribe como una especificación de traspaso en Markdown usando la estructura de secciones y tablas del archivo.

02 Encuentra tu caso de uso

Cuándo usar el skill design-handoff

Usa el skill design-handoff en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El ajuste y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

Un diseño está terminado y listo para ingeniería, y el equipo necesita una hoja de especificaciones que cubra layout, tokens, props de componentes, estados, breakpoints, casos límite y animación.
Un rastreador de proyectos está conectado y quieres que el traspaso esté vinculado al ticket de implementación.

Conozca los límites

Las mediciones exactas derivadas de Figma, los valores de tokens, los assets exportados y una hoja de especificaciones completa solo se obtienen cuando hay una herramienta de diseño conectada.
Configurar subtareas para cada sección de la especificación depende de que haya un rastreador de proyectos conectado.

Qué proporcionar

Una URL de Figma o una descripción de diseñoEste es el argumento que espera el comando, y es a partir de lo que se genera la especificación.

03 Dentro del skill

Reglas que el Skill design-handoff Da a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Especificar Todo
El primer principio es no asumir: si algo no está especificado, el desarrollador lo adivinará, así que el traspaso debe cubrirlo.
Referenciar Tokens, No Valores Sin Procesar
Los valores se escriben como nombres de token, como spacing-md, en lugar de como números de píxeles.
Mostrar Todos los Estados
Deben aparecer todos los estados: default, hover, active, disabled, loading, error y empty.
Describir el Porqué
La justificación se incluye junto al comportamiento para que los desarrolladores puedan tomar buenas decisiones, por ejemplo explicando por qué algo se colapsa en móvil.
Preguntar Explícitamente por los Casos Límite
Nombrar preguntas límite, como qué ocurre con 100 elementos, hace que esas condiciones límite queden especificadas.
Indicarle el Stack Tecnológico
Nombrar el stack, por ejemplo React más Tailwind, genera notas de implementación relevantes para ese stack.
Compartir el Enlace de Figma
El enlace es lo que permite extraer medidas exactas, tokens e información de componentes en lugar de inferirlos.

04 Ponlo a trabajar

Instalar design-handoff en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir design-handoff a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

Forma genérica de la CLI de skills para design/skills/design-handoff/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Generate a developer handoff spec for the [checkout confirmation screen] in [Figma URL]. I need exact padding and margins, design token references instead of raw values, all component states including loading and error, and the responsive behavior at each breakpoint. We use [React + Tailwind], and please spec the empty state and what happens with [very long product names].

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

La tabla de comportamiento responsivo tiene una fila completa para móvil por debajo de 768px, no un marcador de posición en blanco.
Los casos límite indican qué mostrar cuando no hay datos, junto con el comportamiento de truncamiento, carga y error.
Las notas de accesibilidad indican el orden de foco y las etiquetas ARIA necesarias.

En OpenDesign importe design-handoff desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Rama main
Archivo de skill: design/skills/design-handoff/SKILL.md Checksum de contenido registrado en la verificación; commit 8f877b6
License: Apache-2.0 De LICENSE.
Estrellas del repositorio: 24.012 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio anthropics/knowledge-work-plugins, que contiene 7 skills en este catálogo. No es una calificación ni un recuento de uso para design-handoff.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

UsoMuestra la invocación /design-handoff y los marcadores de posición $ARGUMENTS y @$1.
Qué IncluirEnumera las categorías que se deben cubrir: visual, interacción, contenido, casos límite y especificaciones de accesibilidad.
PrincipiosCuatro reglas: no asumir, usar tokens, mostrar todos los estados, describir el porqué.
SalidaProporciona la plantilla Markdown Handoff Spec con sus encabezados y tablas.
Si Hay Conectores DisponiblesExtras condicionales para una herramienta de diseño conectada y un gestor de proyectos.
ConsejosTres consejos: compartir el enlace de Figma, mencionar los casos límite, especificar el stack tecnológico.

La descripción propia del Skill

"Genera especificaciones de entrega para desarrolladores a partir de un diseño. Úsalo cuando un diseño está listo para ingeniería y necesita una hoja de especificaciones que cubra layout, design tokens, props de componentes, estados de interacción, breakpoints responsive, casos extremos y detalles de animación."

Descripción del front-matter desde SKILL.md. El archivo completo tiene aproximadamente 3.939 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre la Skill design-handoff

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Qué cambia si hay una herramienta de diseño conectada?

Extrae medidas exactas, tokens y especificaciones de componentes directamente desde Figma, y puede exportar assets y generar una hoja de especificaciones completa.

Design Handoff

Ejecuta design-handoff en una tarea de trabajo real de marca y design-system.

Descarga OpenDesign, importa design-handoff desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills