Habilidades implement-design
📦
implement-design
Revisão do conteúdo r1 Seguro ⚙️ Comandos externos🌐 Acesso à rede
Implementar Designs do Figma como UI de Produção
O handoff de design muitas vezes perde espaçamento, ativos e a intenção dos componentes. Esta skill oferece ao Claude, ao Codex e ao Claude Code um fluxo de trabalho repetível com Figma MCP para uma implementação de UI precisa.
Suporta: Claude Codex Code(CC)
Instalar com meu Agente
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Solicitação do agente
Review the Skillstore skill "implement-design" from https://skillstore.io/skills/figma-implement-design.md and its manifest at https://skillstore.io/api/skills/figma-implement-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Recursos legíveis por agentes
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Testar
Usando "implement-design". Implemente um componente de botão do Figma a partir de um link de design.
Resultado esperado:
- Uma variante de botão é adicionada ao sistema de design existente.
- Espaçamento, tipografia, cores, ícones e estados são comparados com o screenshot.
- A implementação inclui uma breve nota sobre quaisquer diferenças de tokens de design.
Usando "implement-design". Crie um frame de dashboard a partir do Figma.
Resultado esperado:
- O dashboard é dividido em seções de cabeçalho, barra lateral, conteúdo e cards.
- Primitivos de layout e componentes existentes são reutilizados quando disponíveis.
- A revisão final verifica comportamento responsivo, ativos e acessibilidade.
Auditoria de segurança
Segurov4 • 06/07/2026 Abrir o relatório versionado
All static command findings are false positives from Markdown inline code and examples that name Figma MCP tools. The URL findings are documented Figma examples or resource links, and no prompt injection or malicious intent was found in SKILL.md.
1
Arquivos analisados
253
Linhas analisadas
0
Itens de revisão
0
Falsos positivos ignorados
Fatores de risco
⚙️ Comandos externos (33)
SKILL.md:17 SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:33 SKILL.md:37 SKILL.md:38 SKILL.md:40 SKILL.md:44 SKILL.md:45 SKILL.md:46 SKILL.md:50 SKILL.md:52 SKILL.md:56 SKILL.md:58-60 SKILL.md:60-72 SKILL.md:72-74 SKILL.md:74-78 SKILL.md:78-80 SKILL.md:80-82 SKILL.md:82-92 SKILL.md:92-94 SKILL.md:94-165 SKILL.md:165 SKILL.md:166-167 SKILL.md:167-171 SKILL.md:171 SKILL.md:182 SKILL.md:183-185 SKILL.md:185-186 SKILL.md:186-198 SKILL.md:198 SKILL.md:221
🌐 Acesso à rede (8)
A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.
Auditado por: codex Ver histórico de auditoria →
Compartilhar e citar este relatório
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
Copiar link do relatório
https://skillstore.io/skills/figma-implement-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/figma-implement-design?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/figma-implement-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/figma-implement-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Cartão incorporável
<iframe src="https://skillstore.io/embed/skills/figma-implement-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citações acadêmicas (APA · BibTeX · CFF)
Citação APA
figma. (2026). implement-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/figma-implement-design/audits/4Citação BibTeX
@techreport{figma-figma-implement-design-2026,
author = {figma},
title = {implement-design security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/figma-implement-design/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "implement-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "figma"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/figma-implement-design/audits/4"
identifiers:
- type: other
value: "skillstore:figma-implement-design:audit:4"
description: "Skillstore immutable audit report identifier"
Pontuação do Skillstore
Por que esta pontuação Confiança das evidências: Alto 55
Arquitetura
85
Manutenibilidade
87
Conteúdo
69
Comunidade
83
Conformidade com a especificação
O que você pode criar
Criar Componentes de Produto
Implemente botões, formulários, cards e outros componentes do Figma usando os padrões existentes do projeto.
Revisar Handoff de Design
Ajude desenvolvedores a preservar espaçamento, tipografia, cores, ativos e comportamento responsivo do design de origem.
Criar Páginas de UI Consistentes
Transforme frames de dashboard ou fluxo de trabalho em seções reutilizáveis que se encaixem na aplicação atual.
Teste estes prompts
Implementar um Componente
Implemente este componente do Figma no projeto atual: [Figma URL]. Use componentes existentes e corresponda ao screenshot.
Usar Seleção do Desktop
Use o nó selecionado no Figma desktop para criar a UI. Busque o contexto de design e o screenshot antes de editar arquivos.
Criar uma Página Completa
Crie esta página do Figma: [Figma URL]. Divida-a em seções, reutilize componentes do projeto e valide o comportamento responsivo.
Integrar um Fluxo Complexo
Converta este fluxo complexo do Figma em componentes reutilizáveis do projeto: [Figma URL]. Mapeie tokens, documente desvios e verifique a acessibilidade.
Boas práticas
- Busque o contexto de design e um screenshot antes de tomar decisões de implementação.
- Reutilize componentes existentes do projeto antes de criar novos primitivos de UI.
- Documente qualquer desvio visual causado por restrições de acessibilidade ou técnicas.
Evitar
- Implementar de memória sem ler o contexto de design do Figma MCP.
- Adicionar novos pacotes de ícones quando o Figma já fornece os ativos necessários.
- Copiar estilos brutos gerados sem mapeá-los para os tokens do projeto.
Perguntas frequentes
Esta skill requer Figma MCP?
Sim. Ela depende do Figma MCP ou do Figma desktop MCP para contexto de design e screenshots.
Ela pode usar um nó selecionado no Figma desktop?
Sim. Com figma-desktop MCP, ela pode usar o nó selecionado no momento em vez de uma URL.
Ela gera o código final automaticamente?
Ela orienta o agente pela implementação no projeto atual e em suas convenções existentes.
Ela sempre corresponderá exatamente ao Figma?
Ela busca uma paridade visual próxima, mas tokens do projeto, necessidades de acessibilidade e restrições técnicas podem exigir alterações.
Ela adiciona novos componentes ao sistema de design?
Ela prefere componentes existentes primeiro. Novos componentes são recomendados apenas quando não existe nenhum componente adequado.
É seguro usá-la com designs privados?
Use-a apenas com projetos e servidores MCP autorizados a acessar o arquivo Figma de destino.