design-handoffpor Anthropic

Design Handoff Skill.

Uma skill para Claude Code e Codex voltada para trabalho de marca e sistemas de design: especificações de handoff do desenvolvedor a partir de um design: layout, tokens, estados de componente, breakpoints.

Marca e Sistemas de Design
Especificação de handoff

Baixar OpenDesign Ver guia 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

Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 3.939 caracteres no total

01 O que faz

O que a Skill design-handoff faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Gera documentação de handoff para desenvolvedores a partir de um design, voltada para equipes cujo design já está pronto para a engenharia e precisa de uma ficha de especificações. Aponte para uma URL do Figma, ou, na falta dela, use uma descrição ou captura de tela, e ele trabalha as especificações visuais, de interação, de conteúdo, os casos extremos e a acessibilidade.

O resultado é uma Especificação de Handoff em Markdown com seções para visão geral, layout, design tokens usados, componentes, estados e interações, comportamento responsivo, casos extremos, animação e movimento, e notas de acessibilidade. Seus quatro princípios declarados são especificar tudo em vez de supor, referenciar tokens em vez de valores brutos, mostrar todos os estados e explicar o motivo por trás de um comportamento.

O que ele produz

Uma tabela de design tokens listando cada token, seu valor e seu uso.
Uma tabela de componentes indicando a variante, as props e as notas de comportamento especial de cada componente.
Uma tabela de animação e movimento registrando elemento, gatilho, animação, duração e easing.

Veja o exemplo de prompt ↗

Como funciona

01
Resolver a Fonte do Design
Uma URL do Figma significa que o design é extraído do Figma; sem ela, o skill trabalha a partir de uma descrição escrita ou de uma captura de tela.
02
Especificar os Visuais
Padding, margens e larguras exatos, referências de design tokens para cores, tipografia e espaçamento, breakpoints responsivos, e variantes e estados dos componentes.
03
Especificar as Interações
Comportamento de clique e toque, estados de hover, suporte a gestos, e transições registradas com duração e easing.
04
Cobrir Conteúdo e Casos Extremos
Limites de caracteres, truncamento, estados vazios, estados de carregamento e erro, além de conteúdo mínimo e máximo, strings internacionais mais longas, conexões lentas e dados ausentes.
05
Adicionar Detalhes de Acessibilidade
Ordem de foco, rótulos e papéis ARIA, interações via teclado, e anúncios de leitor de tela.
06
Emitir a Especificação no Template
O resultado é escrito como uma Especificação de Handoff em Markdown usando a estrutura de seções e tabelas do arquivo.

02 Encontre o ideal para você

Quando Usar o Skill design-handoff

Use a skill design-handoff no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do arquivo da própria skill.

Boa Combinação

Um design está finalizado e pronto para engenharia, e a equipe precisa de uma folha de especificação cobrindo layout, tokens, props de componentes, estados, breakpoints, casos extremos e animação.
Um rastreador de projeto está conectado e você quer vincular o handoff ao ticket de implementação.

Conheça os Limites

Medidas exatas derivadas do Figma, valores de tokens, assets exportados e uma folha de especificação completa só são obtidos quando uma ferramenta de design está conectada.
Configurar subtarefas para cada seção da especificação depende de um rastreador de projeto estar conectado.

O Que Fornecer

Uma URL do Figma ou uma descrição de designEste é o argumento que o comando espera, e é a partir dele que a especificação é gerada.

03 Dentro da skill

Regras que o Skill design-handoff Dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Especificar Tudo
O primeiro princípio é não supor: se algo não for especificado, o desenvolvedor vai adivinhar, então o handoff precisa cobrir isso.
Referencie tokens, não valores brutos
Os valores são escritos como nomes de token, como spacing-md, em vez de números em pixels.
Mostre todos os estados
Todo estado deve aparecer: padrão, hover, ativo, desabilitado, carregando, erro e vazio.
Descreva o porquê
O raciocínio é incluído junto com o comportamento para que os desenvolvedores possam tomar boas decisões, por exemplo, explicando por que algo recolhe no celular.
Peça casos extremos explicitamente
Nomear perguntas de limite, como o que acontece com 100 itens, faz com que essas condições de limite sejam especificadas.
Informe a stack de tecnologia
Nomear a stack, por exemplo React mais Tailwind, produz notas de implementação relevantes para essa stack.
Compartilhe o link do Figma
O link é o que permite extrair medidas exatas, tokens e informações de componentes em vez de inferi-los.

04 Coloque em prática

Instale design-handoff no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione design-handoff ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica da CLI skills para design/skills/design-handoff/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma primeira tarefa de marca e design-system

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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].

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

A tabela de comportamento responsivo tem uma linha preenchida para celular abaixo de 768px, não um espaço em branco.
Os casos extremos indicam o que mostrar quando não há dados, além do comportamento de truncamento, carregamento e erro.
As notas de acessibilidade indicam a ordem de foco e os rótulos ARIA necessários.

No OpenDesign importe design-handoff a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Arquivo da skill: design/skills/design-handoff/SKILL.md Checksum do conteúdo registrado na verificação; commit 8f877b6
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 24.012 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório anthropics/knowledge-work-plugins, que contém 7 skills neste catálogo. Não é uma avaliação ou contagem de uso de design-handoff.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

UsoMostra a invocação /design-handoff e os placeholders $ARGUMENTS e @$1.
O que incluirLista as categorias a cobrir: especificações visuais, de interação, de conteúdo, casos extremos e acessibilidade.
PrincípiosQuatro regras: não presuma, use tokens, mostre todos os estados, descreva o porquê.
SaídaFornece o modelo de Handoff Spec em Markdown com seus títulos e tabelas.
Se houver conectores disponíveisExtras condicionais para uma ferramenta de design conectada e um rastreador de projetos.
DicasTrês dicas: compartilhe o link do Figma, mencione casos extremos, especifique a stack de tecnologia.

A Descrição da Própria Skill

"Gera especificações de handoff para desenvolvedores a partir de um design. Use quando um design estiver pronto para engenharia e precisar de uma folha de especificações cobrindo layout, design tokens, props de componentes, estados de interação, breakpoints responsivos, casos extremos e detalhes de animação."

Descrição do front-matter extraída de SKILL.md. O arquivo completo tem cerca de 3.939 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre a skill design-handoff

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O que muda quando uma ferramenta de design está conectada?

Ele extrai medidas exatas, tokens e especificações de componentes diretamente do Figma, e pode exportar assets e gerar uma folha de especificações completa.

Design Handoff

Execute design-handoff em uma tarefa de trabalho real de marca e design-system.

Baixe OpenDesign, importe design-handoff a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills