技能 implement-design
📦

implement-design

安全

Implementar Diseños de Figma en Código

Traducir diseños de Figma a código listo para producción de forma manual consume mucho tiempo y es propenso a errores. Esta habilidad proporciona un flujo de trabajo estructurado para la implementación de interfaces de usuario píxel-perfecto con mapeo automático de tokens de diseño.

支援: Claude Codex Code(CC)
⚠️ 67 差
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「implement-design」。 Implement this button: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

預期結果:

Componente de botón con variantes primary/secondary, estados hover, coincidencia con tokens de diseño de Figma, integrado con el sistema de diseño del proyecto

正在使用「implement-design」。 Build the dashboard layout from Figma

預期結果:

Dashboard responsive completo con header, sidebar, área de contenido y componentes de tarjetas usando convenciones del proyecto

安全審計

安全
v1 • 2/13/2026

All static findings are FALSE POSITIVES. The skill is a legitimate Figma design implementation workflow. External commands flagged are MCP tool call examples in markdown (not shell execution). Network URLs are Figma examples and documentation links. Weak crypto and system reconnaissance flags are spurious pattern matches on placeholder text. No actual security risks identified.

1
已掃描檔案
253
分析行數
4
發現項
1
審計總數

高風險問題 (2)

SKILL.md:17-20SKILL.md:33-46SKILL.md:56-60SKILL.md:72-74SKILL.md:78-82SKILL.md:165-167SKILL.md:182-186SKILL.md:198SKILL.md:221
External Commands Flag - FALSE POSITIVE
Static analyzer detected 'Ruby/shell backtick execution' at 42 locations. These are MCP tool call examples in markdown code blocks (e.g., `get_design_context(fileKey="...")`), not actual shell commands. No command injection risk exists.
SKILL.md:2-5SKILL.md:8-12SKILL.md:17-21SKILL.md:31-40SKILL.md:44-46SKILL.md:50-52SKILL.md:161-171
Weak Cryptographic Algorithm - FALSE POSITIVE
Static analyzer detected 85 instances of 'weak cryptographic algorithm' (blocker level). This is a spurious pattern match - the analyzer misinterprets placeholder text like ':fileKey', 'node-id', 'fileKey=' as cryptographic references. There is NO cryptographic code in this skill.
中風險問題 (1)
SKILL.md:17SKILL.md:33SKILL.md:44SKILL.md:161SKILL.md:178SKILL.md:250-252
Hardcoded URLs - FALSE POSITIVE
Static analyzer detected 'hardcoded URLs' at 8 locations. These are legitimate Figma URL examples and official Figma documentation links. No sensitive data exfiltration or malicious network behavior.
低風險問題 (1)
SKILL.md:116SKILL.md:141SKILL.md:152
System Reconnaissance - FALSE POSITIVE
Static analyzer detected 'system reconnaissance' at 3 locations. The terms 'metadata' and 'context' refer to Figma design metadata and node context, not system enumeration.
審計者: claude

品質評分

38
架構
100
可維護性
87
內容
31
社群
78
安全
91
規範符合性

你能建構什麼

Construyendo Componentes de UI desde Figma

Convertir un componente individual de Figma (botón, tarjeta, input) en código listo para producción que coincida exactamente con las especificaciones del diseño.

Creando Maquetados de Página

Tomar un diseño completo de página de Figma y construir el maquetado responsive completo con todas las secciones, usando componentes existentes del proyecto.

Actualizaciones del Sistema de Diseño

Actualizar componentes existentes cuando las especificaciones de diseño cambian en Figma, asegurando consistencia en todo el código base.

試試這些提示

Implementación Básica de Componente 
Implement this Figma component: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID
Implementación de Página Completa 
Build this page from Figma: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID. Use our existing design system components where possible.
Componente con Variantes 
Implement the button component at https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID including all variants (primary, secondary, disabled states).
Extracción de Recursos 
Extract all icons and images from this Figma frame: https://figma.com/design/FILE_KEY/PROJECT_NAME?node-id=NODE_ID and create the necessary component code.

最佳實務

  • Siempre obtener contexto del diseño y captura de pantalla antes de iniciar la implementación para asegurar una traducción precisa
  • Verificar componentes existentes del sistema de diseño antes de crear nuevos para mantener consistencia
  • Validar la implementación contra la captura de pantalla de Figma frecuentemente durante el desarrollo, no solo al final

避免

  • Implementar sin obtener primero el contexto real del diseño de Figma
  • Crear componentes duplicados en lugar de extender los componentes existentes del sistema de diseño
  • Usar valores hardcodeados en lugar de tokens de diseño de Figma, lo cual rompe actualizaciones futuras

常見問題

¿Qué se requiere para usar esta habilidad?
Necesitas el servidor MCP de Figma conectado y ya sea una URL de Figma con un ID de nodo o la aplicación de escritorio de Figma con un nodo seleccionado.
¿Funciona con cualquier framework?
Sí, la habilidad traduce la salida de Figma al framework específico de tu proyecto, ya sea React, Vue u otros frameworks.
¿Puede implementar aplicaciones completas?
Esta habilidad se enfoca en componentes y páginas, no en aplicaciones completas. Las páginas complejas pueden necesitar dividirse en partes más pequeñas.
¿Cómo maneja los tokens de diseño?
La habilidad mapea los valores de diseño de Figma a los tokens de diseño de tu proyecto para colores, tipografía y espaciado.
¿Qué pasa si mi diseño es muy complejo?
Usa get_metadata para ver la estructura del nodo, luego obtiene nodos hijos específicos individualmente en lugar de todo el diseño.
¿Soporta variables de Figma?
Sí, la herramienta get_design_context retorna valores de variables que la habilidad mapea a los tokens del proyecto.

開發者詳情

作者

figma

授權

MIT

儲存庫

https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design/

引用

main

檔案結構

📄 SKILL.md