flcker/figma-ui-desktop

Normas de desarrollo de interfaz de usuario de escritorio con Figma (versión Framelink MCP)

Resuelve el problema de baja fidelidad al desarrollar interfaces de usuario de escritorio a partir de diseños de Figma. La causa raíz es tratar los datos del "lienzo" de Figma (coordenadas absolutas, colores en línea, capas de píxeles) como "datos de implementación", copiándolos directamente y resultando en diseños rígidos, colores y fuentes incorrectos, y recursos faltantes.

¿Por qué usar Framelink en lugar del servidor MCP oficial de Figma para escritorio?: La herramienta principal del MCP oficial, get_design_context, genera código web por defecto (React/Tailwind, con opciones para Vue/HTML/iOS), no admite Qt Widget / QML / WinUI / Flutter, y requiere pago. Framelink se posiciona como "solo proporciona datos de Figma independientes del framework, la traducción queda a cargo del modelo" – esta "debilidad" es precisamente una ventaja en escenarios de escritorio con múltiples frameworks: el modelo puede traducir los datos del lienzo a cualquier framework objetivo, en lugar de estar limitado a la web.

Este skill está orientado a las dos herramientas de Framelink figma-developer-mcp:

Herramienta	Canal	Función
get_figma_data	Canal preciso	Extrae datos del lienzo según fileKey + nodeId: información de diseño, contenido, visual y de componentes
download_figma_images	Canal visual	Exporta SVG/PNG/GIF del nodo a un directorio local

Si el objetivo es frontend web (React/Vue/HTML), usa figma-ui-web en lugar de este skill.

Principios fundamentales

1. Doble canal en paralelo, prohibido escribir código con un solo canal. El canal preciso proporciona valores numéricos exactos, el canal visual proporciona el diseño general y el texto. Usar solo uno inevitablemente causa distorsión.
2. Usa valores exactos, no hagas estimaciones visuales. Color, tamaño de fuente, peso de fuente, espaciado, bordes redondeados, bordes, sombras: siempre toma los valores exactos del diseño.
3. Primero solicita el diseño, no escribas la interfaz de usuario por iniciativa propia.
4. Después de la implementación, debes cerrar el ciclo de validación: compara capturas de pantalla del programa ejecutado con el diseño original → corrige automáticamente los defectos encontrados → itera con revisión humana.

Flujo de trabajo

Fase uno: Lectura rápida (comprender los requisitos y la estructura)

Cuando el diseño es demasiado grande, primero haz una lectura rápida para evitar sobrecargar el contexto con una extracción completa:

1. Usa get_figma_data para extraer la estructura de nivel superior (el depth controla la profundidad de recorrido, comienza desde lo superficial) para entender qué páginas/secciones/controles hay.
2. Usa download_figma_images para exportar la imagen general de la interfaz y comprender el diseño y el texto.

Fase dos: Lectura detallada (obtener datos precisos antes de la implementación)

Para la sección/control que se va a implementar, llama simultáneamente a:

• get_figma_data (con nodeId, lee coordenadas, valores de color, tamaños de fuente, espaciados, bordes redondeados, bordes nodo por nodo)
• download_figma_images (exporta la imagen de esa sección para confirmar las relaciones de posición relativa de los controles)

Una vez obtenidos, realiza un análisis estructural antes de escribir código:

• ¿Qué nodos son patrones repetitivos (elementos de lista, tarjetas, botones)? → Extraerlos como controles/componentes personalizados del framework objetivo
• ¿Qué posiciones absolutas son en realidad diseño (disposición horizontal, centrado, alineado a los extremos, cuadrícula)? → Convertirlos al diseño del framework correspondiente según la tabla de mapeo a continuación
• ¿Cuáles son roles semánticos (navegación/formulario/lista)? → Mapearlos a la biblioteca de controles existente del framework objetivo
• Nodos de imagen/icono → Usa download_figma_images para descargar el archivo original en el directorio de recursos, no los dibujes a mano

Fase tres: Implementación (traducción independiente del framework)

Color/tamaño de fuente/espaciado: usa los valores exactos del diseño. Al traducir, consulta la tabla de mapeo "Concepto del lienzo → Framework objetivo" a continuación. No inventes controles – si el framework objetivo tiene diseños/controles estándar, úsalos. Las coordenadas absolutas solo se conservan cuando "realmente se necesita un posicionamiento preciso en píxeles".

Fase cuatro: Cierre del ciclo de validación

En escritorio no hay automatización del navegador como Playwright. El método de validación: toma capturas de pantalla del programa compilado y ejecutado, compáralas lado a lado con las capturas del diseño. Corrige automáticamente los defectos evidentes; la revisión humana identifica problemas más sutiles (espaciado, peso de fuente, pequeñas diferencias de color), plantéalos activamente a la IA para una corrección precisa e inicia la siguiente ronda de iteración.

Tabla de mapeo: Concepto del lienzo → Framework objetivo

El lienzo de Figma tiene coordenadas absolutas + capas de píxeles. La implementación debe traducirlos a la semántica de diseño de cada framework. Al traducir, consulta esta tabla:

Concepto de lienzo/diseño	Qt Widget	QML (Qt Quick)	WinUI 3 (XAML)	Flutter
Disposición horizontal	QHBoxLayout	Row	StackPanel (Orientation=Horizontal)	Row
Disposición vertical	QVBoxLayout	Column	StackPanel (Orientation=Vertical)	Column
Diseño de cuadrícula	QGridLayout	Grid / GridLayout	Grid	GridView / Table
Posicionamiento absoluto	setGeometry / move	Item + x/y	Canvas + Canvas.Left/Top	Stack + Positioned
Superposición / Capas	Superponer widgets hijos / raise()	Propiedad z / Stack	Canvas.ZIndex	Stack
Centrado	addStretch / setAlignment	anchors.centerIn	HorizontalAlignment/VerticalAlignment=Center	Center / Align
Alineado a los extremos	addStretch en ambos lados	anchors.left/right + márgenes	Asignación de márgenes	MainAxisAlignment.spaceBetween
Espaciado	QSpacerItem / spacing del layout	Propiedad spacing	Margin / Padding	SizedBox / Padding / Spacer
Color	QPalette / hoja de estilos	Tema / enlace de propiedades	Diccionario de recursos ResourceDictionary	ThemeData / ColorScheme
Tamaño de fuente / fuente	QFont	font.pixelSize	FontSize	TextStyle.fontSize
Bordes redondeados	Hoja de estilos border-radius	Rectangle radius	CornerRadius	BorderRadius
Sombra	QGraphicsDropShadowEffect	DropShadow	ThemeShadow / DropShadow	BoxShadow
Icono	QIcon / recursos	Image / fuente de iconos	FontIcon / SymbolIcon	Icon
Reutilización de componentes	Subclase personalizada de QWidget	Component QML personalizado	UserControl / control personalizado	Widget
Estado / variante	Enumeración + update()	State / impulsado por propiedades	VisualStateManager	setState / AnimatedWidget

Reglas estrictas contra la pereza

La IA tiende a usar solo un canal para escribir código. Debes exigir explícitamente:

• "Llama simultáneamente a get_figma_data y download_figma_images para leer el diseño"
• "No está permitido usar solo imágenes/capturas para leer el diseño y escribir código"
• "Lee línea por línea los valores exactos de get_figma_data, compara colores, tamaños de fuente y espaciados, no hagas estimaciones visuales"
• "Traduce al diseño/control estándar del framework objetivo según la tabla de mapeo, no inventes"

Lista de verificación de autoevaluación de fidelidad

Después de generar, verifica elemento por elemento (más fiable que "si se parece en general"):

• Color (¿se usó el valor exacto, no aproximado?)
• Tamaño de fuente / peso de fuente
• Espaciado / márgenes / relleno
• Bordes redondeados / bordes / sombras
• Diseño (¿se tradujo al diseño estándar del framework objetivo, en lugar de copiar coordenadas absolutas?)
• Jerarquía / orden de capas
• Iconos/imágenes (¿se usaron los archivos originales, no dibujados a mano?)
• Patrones repetitivos (¿se extrajeron como componentes/controles personalizados?)

Fuentes de referencia

La metodología se inspira en el flujo de desarrollo de UI del MCP oficial de Figma + Playwright (consulta "Mejorando la eficiencia del desarrollo y depuración de UI con Figma MCP y Playwright MCP"). La idea central de "doble canal + cierre del ciclo de validación + requisitos claros contra la pereza" se mantiene, las herramientas se adaptan a Framelink figma-developer-mcp, y la tabla de mapeo se ha ampliado para cubrir múltiples frameworks de escritorio.