Como usar
Como designers, desenvolvedores e QA usam este guide no fluxo de entrega do ME.
Fluxo recomendado
- Designers — use as páginas de Padrões e Componentes como referência ao montar telas no Figma (Global + Library Components).
- Desenvolvedores — siga a hierarquia EletroDS → Nuxt UI; use tokens sem hex hardcoded.
- QA / PO — valide comportamentos contra as páginas de Padrões (ações, feedback, formulários).
Ambiente com IA (MCPs e plugins)
Para implementar telas do ME com assistência de IA no Claude Code, conecte os MCPs do design system e o plugin oficial do Figma. Execute no terminal:
EletroDS — tokens, componentes e convenções do design system
claude mcp add --transport http eletrods https://eletro.design/mcp
Nuxt UI — documentação e props dos componentes U*
claude mcp add --transport http nuxt-ui-remote https://ui.nuxt.com/mcp
Figma — leitura e escrita de arquivos, Code Connect e design system
claude plugin install figma@claude-plugins-official
Com os três conectados, o agente cruza Figma, EletroDS e Nuxt UI ao implementar ou revisar UI — sem inventar componentes ou tokens fora do padrão.
Links de referência
Conhecimento
- Anthropic News — novidades sobre Claude e ferramentas de IA
- Repositório local de padrões ME em
knowledge/standards/na raiz do workspace
Skills
- Figma Community — Skills — skills para fluxos de design, Figma Make e handoff
- skills.sh — catálogo aberto de skills para agentes de IA
Este projeto é a versão Nuxt do guide. O conteúdo canônico de tokens e convenções também vive em
knowledge/standards/ na raiz do workspace ME.