Habilidade de Design de UI Rayden

Visão Geral

Crie e mantenha componentes e telas de UI Rayden diretamente no Figma usando o MCP do Figma. A habilidade impõe o sistema de design de UI Rayna — tokens de design resolvidos, regras de criação, detecção de anti-padrões e validação visual — para que cada saída seja mecanicamente correta e visualmente premium. Suporta três modos de estilo (conservador, equilibrado, expressivo) e inclui um subagente dedicado para composição de telas de página inteira.

Quando Usar Esta Habilidade

• Você precisa criar um novo componente de UI Rayden com todas as suas variantes no Figma
• Você está compondo uma tela inteira (dashboard, página de destino, formulário de autenticação, configurações, tabela de dados) a partir de padrões Rayden
• Você deseja auditar um arquivo Figma existente para conformidade com o sistema de design
• Você precisa adicionar novas variantes a um componente Figma existente
• Você está sincronizando atualizações de componentes React de volta para o Figma

Como Funciona

1. Verifica o ambiente — Verifica a conexão do MCP do Figma e o acesso de escrita via whoami
2. Carrega dados do componente — Lê especificações de componentes Rayden, anatomia e tokens do servidor MCP @raydenui/ai ou pacote instalado
3. Carrega regras de criação — Lê arquivos de suporte: valores de tokens resolvidos, regras de criação, anti-padrões e padrões de layout de tela
4. Identifica o tipo de tarefa — Determina se está criando um único componente, compondo uma tela, auditando ou adicionando variantes
5. Aplica o modo de estilo — Ajusta espaçamento, sombra, tipografia e peso visual com base no modo conservador/equilibrado/expressivo
6. Cria com auxiliares — Gera código da API do Plugin Figma usando funções auxiliares obrigatórias (hexToRgb, loadFonts, applyShadow, applyBorder) com layout automático em cada frame
7. Validação visual — Tira capturas de tela após cada estágio de criação e valida contra 8 critérios de aceitação (alinhamento, espaçamento, precisão de cor, hierarquia, raio, sombra, contagem de ação primária)

Exemplos

Crie um componente com todas as variantes

/rayden-use Button https://figma.com/file/abc123

Caso de uso: Você está iniciando um novo arquivo de sistema de design e precisa do componente Botão com todas as variantes (primário, secundário, cinza, destrutivo) em aparências sólida e contornada nos tamanhos SM e LG.

Projete um dashboard SaaS

/rayden-use dashboard-screen balanced https://figma.com/file/abc123

Caso de uso: Você está projetando um dashboard de análise e precisa de um layout de barra lateral com cartões de KPI, uma tabela de dados e um feed de atividades — todos usando tokens e espaçamento Rayden consistentes.

Crie uma página de destino de marketing

/rayden-compose landing expressive https://figma.com/file/abc123

Caso de uso: Você precisa de uma página de destino de alto impacto com tipografia mais ousada, sombras mais fortes e layouts assimétricos que evitem o visual genérico "gerado por IA".

Audite um design existente para conformidade

/rayden-use audit https://figma.com/file/abc123

Caso de uso: Você tem um arquivo Figma existente e deseja verificar se todas as cores correspondem aos tokens Rayden, o espaçamento está na grade de 4px e o raio é concêntrico.

Adicione variantes a um componente existente

/rayden-use add-variants Input https://figma.com/file/abc123

Caso de uso: O componente Input existe em seu arquivo Figma, mas está faltando os estados de erro e sucesso — a habilidade lê a estrutura existente e a estende.

Melhores Práticas

• Sempre forneça um URL de arquivo Figma como o último argumento
• Use o modo balanced (padrão) para a maioria dos casos de uso; conservative para UIs administrativas densas, expressive para páginas de marketing
• Deixe a habilidade tirar capturas de tela entre os estágios de criação — é assim que ela valida a qualidade da saída
• Instale @raydenui/ai como um servidor MCP para o acesso mais rico a dados de componentes
• Revise a saída gerada no Figma após a conclusão — a habilidade valida mecanicamente, mas o julgamento humano sobre a estética ainda é valioso

Notas de Segurança e Proteção

• Esta habilidade apenas lê arquivos de suporte locais e chama o MCP do Figma — nenhuma solicitação de rede externa além da API do Figma
• Requer assento Dev ou Full do Figma com acesso de escrita ao arquivo de destino
• Não modifica arquivos fora do documento Figma de destino
• Todos os tokens de design estão incluídos nos arquivos de suporte da habilidade — sem segredos ou credenciais envolvidos

Armadilhas Comuns

…