implement-design
por figma
Traduce diseños de Figma a código listo para producción con fidelidad visual perfecta a nivel de píxel. Requiere conexión al servidor MCP de Figma y una URL de Figma con clave de archivo e ID de nodo para extraer contexto de diseño, capturas de pantalla y recursos. Flujo de trabajo estructurado en siete pasos: analizar URL, obtener contexto de diseño, capturar referencia visual, descargar recursos, traducir a convenciones del proyecto, lograr paridad 1:1 y validar contra Figma. Prioriza la reutilización del sistema de diseño sobre la duplicación; mapea tokens de Figma al diseño del proyecto...
npx skills add https://github.com/figma/mcp-server-guide --skill implement-designMás skills de figma
video-interaction-mapper
figma
Esta habilidad debe usarse cuando el usuario solicite analizar una grabación de pantalla de UI y mapear los estados de interacción en Figma. Activar para solicitudes como "poner video…
figma-code-connect
figma
Crea y mantiene archivos de plantilla de Figma Code Connect que asignan componentes de Figma a fragmentos de código. Úsalo cuando el usuario mencione Code Connect, componente de Figma…
create-design-system-rules
figma
Reglas personalizadas del sistema de diseño para una implementación consistente de Figma a código en tu proyecto. Genera convenciones específicas del proyecto para la organización de componentes, estilos, tokens de diseño y manejo de assets que guían a los agentes de IA para producir código consistente. Soporta tres formatos de archivos de reglas: CLAUDE.md para Claude Code, AGENTS.md para Codex CLI y .cursor/rules/figma-design-system.mdc para Cursor. Requiere conexión con el servidor MCP de Figma y análisis del código base para descubrir patrones existentes antes de las reglas...
figma-implement-motion
figma
Traduce los movimientos y animaciones de Figma a código de aplicación listo para producción. Úsalo al implementar animaciones o movimientos desde un diseño de Figma — el usuario menciona…
figma-swiftui
figma
Traducción de SwiftUI ↔ Figma. Úsalo siempre que el usuario mencione Swift, SwiftUI, iOS, iPhone o iPad — en CUALQUIER dirección — traduciendo un diseño de Figma a…
figma-use-motion
figma
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…
figma-use-slides
figma
Esta habilidad ayuda a los agentes a usar la herramienta MCP use_figma de Figma en el contexto de Slides. Puede usarse junto con figma-use, que tiene contexto fundamental para usar el…
figma-use-figjam
figma
Esta habilidad ayuda a los agentes a usar la herramienta MCP use_figma de Figma en el contexto de FigJam. Puede usarse junto con figma-use, que tiene el contexto fundamental para usar el…