Habilidades implement-design
📦
implement-design
Revisión del contenido r1 Seguro ⚙️ Comandos externos🌐 Acceso a red
Implementar diseños de Figma como UI de producción
La entrega de diseño a menudo pierde espaciado, recursos e intención de los componentes. Esta habilidad proporciona a Claude, Codex y Claude Code un flujo de trabajo repetible de Figma MCP para una implementación precisa de la UI.
Compatible con: Claude Codex Code(CC)
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Solicitud de 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.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "implement-design". Implementar un componente de botón de Figma desde un enlace de diseño.
Resultado esperado:
- Se añade una variante de botón al sistema de diseño existente.
- El espaciado, la tipografía, los colores, los iconos y los estados se comparan con la captura de pantalla.
- La implementación incluye una breve nota sobre cualquier diferencia en los tokens de diseño.
Usando "implement-design". Crear un frame de dashboard desde Figma.
Resultado esperado:
- El dashboard se divide en secciones de encabezado, barra lateral, contenido y tarjetas.
- Se reutilizan primitivas de layout y componentes existentes cuando están disponibles.
- La revisión final comprueba el comportamiento responsive, los recursos y la accesibilidad.
Auditoría de seguridad
Segurov4 • 6/7/2026 Abrir el informe 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
Archivos escaneados
253
Líneas analizadas
0
Elementos de revisión
0
Falsos positivos ignorados
Factores de riesgo
⚙️ 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
🌐 Acceso a red (8)
La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.
Auditado por: codex Ver historial de auditorías →
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/figma-implement-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/figma-implement-design?utm_source=security_passport_badge)Insignia 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>Tarjeta para insertar
<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>Citas académicas (APA · BibTeX · CFF)
Cita APA
figma. (2026). implement-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/figma-implement-design/audits/4Cita 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"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: Alto 55
Arquitectura
85
Mantenibilidad
87
Contenido
69
Comunidad
83
Cumplimiento de la especificación
Lo que puedes crear
Crear componentes de producto
Implementa botones, formularios, tarjetas y otros componentes de Figma usando patrones existentes del proyecto.
Revisar la entrega de diseño
Ayuda a los desarrolladores a preservar el espaciado, la tipografía, los colores, los recursos y el comportamiento responsive del diseño original.
Crear páginas de UI consistentes
Convierte frames de dashboard o de flujos de trabajo en secciones reutilizables que encajen en la aplicación actual.
Prueba estos prompts
Implementar un componente
Implementa este componente de Figma en el proyecto actual: [Figma URL]. Usa componentes existentes y haz que coincida con la captura de pantalla.
Usar selección de desktop
Usa el nodo seleccionado de Figma desktop para crear la UI. Obtén el contexto de diseño y la captura de pantalla antes de editar archivos.
Crear una página completa
Crea esta página de Figma: [Figma URL]. Divídela en secciones, reutiliza componentes del proyecto y valida el comportamiento responsive.
Integrar un flujo complejo
Convierte este flujo complejo de Figma en componentes reutilizables del proyecto: [Figma URL]. Asigna tokens, documenta desviaciones y verifica la accesibilidad.
Mejores prácticas
- Obtén el contexto de diseño y una captura de pantalla antes de tomar decisiones de implementación.
- Reutiliza componentes existentes del proyecto antes de crear nuevas primitivas de UI.
- Documenta cualquier desviación visual causada por restricciones de accesibilidad o técnicas.
Evitar
- Implementar de memoria sin leer el contexto de diseño de Figma MCP.
- Añadir nuevos paquetes de iconos cuando Figma ya proporciona los recursos necesarios.
- Copiar estilos generados en bruto sin asignarlos a los tokens del proyecto.
Preguntas frecuentes
¿Esta habilidad requiere Figma MCP?
Sí. Depende de Figma MCP o Figma desktop MCP para el contexto de diseño y las capturas de pantalla.
¿Puede usar un nodo seleccionado de Figma desktop?
Sí. Con figma-desktop MCP, puede usar el nodo seleccionado actualmente en lugar de una URL.
¿Genera código final automáticamente?
Guía al agente durante la implementación en el proyecto actual y sus convenciones existentes.
¿Siempre coincidirá exactamente con Figma?
Busca una paridad visual cercana, pero los tokens del proyecto, las necesidades de accesibilidad y las restricciones técnicas pueden requerir cambios.
¿Añade nuevos componentes al sistema de diseño?
Prefiere primero los componentes existentes. Solo se recomiendan componentes nuevos cuando no existe un componente adecuado.
¿Es seguro usarla con diseños privados?
Úsala solo con proyectos y servidores MCP autorizados para acceder al archivo de Figma de destino.