ismael-jemsystems/skills-claude-figma-ui-ux

Configuração do Claude Code para prototipar telas no Figma com padrões de design, acessibilidade (WCAG 2.1 AA) e handoff para front-end. É independente de projeto: cada projeto guarda suas regras e referências em .claude/projects/ /.
## O que faz
Cria telas no Figma a partir de um link do ClickUp, de um texto no chat ou de um print, usando a biblioteca de design e as regras do projeto.
Mede contraste, alvos de toque, foco e alt, e propõe correções.
Compara uma réplica com o print original e ajusta as diferenças.
Entrega um briefing para o time de front-end ao finalizar cada tela.
## Estrutura
.claude/
├── CLAUDE.md instruções gerais para o Claude
├── skills/ skills instaladas e criadas
├── agents/ agents personalizados
├── templates/ templates de devolutiva
├── memories/ memórias de tarefas
└── projects/ conhecimento por projeto
### Skills (.claude/skills/)
| Skill | Para quê |
| figma-prototype | Monta protótipos no Figma lendo as regras de projects/ /, valida acessibilidade e devolve o briefing de front-end. Também faz réplicas fiéis de um print. |
| ui-ux-pro-max | Biblioteca de regras de UI/UX (estilos, tipografia, guidelines). Os scripts de busca exigem Python. |
| web-accessibility | Guia de WCAG 2.1 (contraste, teclado, ARIA). |
| web-design-guidelines | Revisa código de UI contra as Web Interface Guidelines da Vercel. |
### Agents (.claude/agents/)
Todos são somente leitura, devolvem texto e usam poucas chamadas ao Figma. Rode um de cada vez.
| Agent | Para quê |
| a11y-auditor | Audita a acessibilidade de um frame e calcula os contrastes. |
| fidelity-checker | Compara o print original com o render do Figma, por região. |
| figma-extractor | Extrai tokens, notas de handoff e componentes de uma página do Figma. |
### Templates (.claude/templates/)
prototype-handoff.md: resumo do protótipo (frames, componentes, desvios, suposições, pendências).
frontend-briefing.md: briefing para o front-end (estrutura, especificação, comportamento, acessibilidade e critérios de aceite).
### Projects (.claude/projects/)
Uma pasta por projeto, com quatro arquivos:
README.md: arquivo Figma, bibliotecas, páginas e referências.
instructions.md: regras de construção (breakpoints, containers, tipografia, estados obrigatórios, foco, formato das Notes).
design-patterns.md: tokens, componentes e regras de comportamento.
screens.md: telas criadas.
Veja .claude/projects/README.md. A pasta template/ serve de base para um projeto novo.
## Como usar
1. Abra a pasta no Claude Code (a configuração de .claude/ é carregada automaticamente).
2. Projeto novo: copie .claude/projects/template/ para .claude/projects/ / e preencha o README.md e o instructions.md. Peça ao agent figma-extractor para levantar os padrões do arquivo Figma.
3. Peça a tela, por exemplo: "prototipe a página X no Figma", com o link da tarefa do ClickUp ou a descrição no chat, e a URL do arquivo Figma de destino.
4. A skill figma-prototype lê o projeto, descobre o design system, monta os frames, valida a acessibilidade e devolve o briefing de front-end preenchido no chat.
## Como pedir
Diga sempre o projeto (slug) e dê a URL do arquivo Figma. Os exemplos abaixo podem ser copiados e adaptados.