danielhall/agent-skills

Sitio web a archivo de diseño en Figma

Convierte una aplicación web en ejecución en un archivo de Figma que un diseñador pueda rediseñar de verdad: contenido real, iconos reales, variables de color y espaciado con modos claro/oscuro, estilos de texto, componentes reutilizables y cada página construida a partir de instancias de esos componentes. Las capturas de pantalla son solo una referencia, nunca el resultado final.

Esta habilidad se basa en las propias habilidades del plugin de Figma. Carga figma-use y figma-generate-design antes de cualquier llamada a use_figma, y figma-generate-library al crear componentes o variables.

Cuándo usarlo

• "Lleva mi sitio a Figma para que pueda rediseñarlo"
• "Recrea estas páginas en Figma" / "sube esta app a Figma"
• Agregar marcos móviles o nuevas páginas a un archivo de Figma que se construyó de esta manera

Pasos

1. Leer la fuente de verdad

• La aplicación en ejecución y la hoja de estilos global tienen prioridad sobre los documentos de diseño. Los documentos se desactualizan durante un rediseño; indícalo si encuentras una discrepancia.
• Recopila: tokens de tema (claro y oscuro), familias y pesos de fuente, la cuadrícula de layout (medianiles, carriles, anchos de columna) y los archivos de componente detrás de cada sección de página.
• Verifica que las fuentes existan en Figma con figma.listAvailableFontsAsync() antes de escribir estilos. Nunca recurras a Inter en silencio.

2. Capturar capturas de pantalla de referencia con Playwright, no capturas de página

Usa scripts/ref-screenshots.mjs en cada ancho objetivo (por ejemplo 1440 y 390). Establece reducedMotion: "reduce", para que las animaciones de revelado al desplazarse y las de entrada no oculten el contenido.

Las capturas de página de generate_figma_design no son fiables para esta tarea: el contenido detrás de animaciones en vista se captura en blanco, y las capturas abiertas en pestañas de navegador en segundo plano a menudo quedan en estado pending para siempre. Si las usas, abre una pestaña a la vez y elimina la captura una vez que haya servido como referencia. Si inyectas el script de captura en la aplicación, elimínalo después.

3. Exportar datos reales e iconos desde el código base

Escribe un script tsx desechable (fuera del repositorio, o elimínalo después) que importe los módulos de datos de la propia aplicación y renderice los componentes de icono a cadenas SVG con renderToStaticMarkup de react-dom/server. Luego:

• Reemplaza currentColor con un color real y asigna a cada SVG un width/height explícito. Las bibliotecas de iconos emiten 1em, que Figma no puede dimensionar.
• Deduplica iconos por datos de ruta. Los mapas de marca suelen asociar muchos nombres a un solo logotipo.
• Obtén el contenido del CMS (títulos, extractos, categorías) con el cliente del CMS en lugar de volver a escribirlo.

4. Construir primero los fundamentos

Una llamada cada uno, devolviendo cada ID creado:

1. Páginas: Fundamentos, Componentes, una página por punto de ruptura.
2. Colecciones de variables: colores del tema (modos claro/oscuro), colores de categoría o marca, tokens de layout (modos escritorio/móvil). Establece scopes explícitos y sintaxis de código WEB.
3. Estilos de texto para cada rol tipográfico, más variantes móviles de los tamaños de visualización.
4. Un estilo de efecto para cualquier sombra compartida.

5. Construir componentes, primero los más pequeños

Iconos, luego primitivas (botones, enlaces, mosaicos, insignias, chips), luego compuestos (encabezado, pie de página, héroe, tarjetas). Expón propiedades TEXT, BOOLEAN e INSTANCE_SWAP para que las páginas puedan completarse sin desvincular. Dale a las piezas responsivas una variante Breakpoint en lugar de sobrescribir tamaños en las instancias. Captura una captura de pantalla de cada grupo una vez y corrige lo que esté mal antes de continuar.

6. Ensamblar páginas a partir de instancias

• Una llamada a use_figma por página, en posiciones fijas del lienzo, para que las páginas se puedan construir en paralelo.
• Refleja la cuadrícula CSS con relleno de auto-layout (por ejemplo un carril y medianil), no con posiciones absolutas.
• Iguala las alturas de las tarjetas por fila explícitamente; Figma no estira los elementos hermanos como lo hace la cuadrícula CSS.
• Compara la altura total de cada página y una captura de pantalla con la referencia. Alturas dentro de unos pocos porcentajes significan que el espaciado es correcto.

7. Vincular componentes al código

Code Connect solo funciona en planes Organization y Enterprise. Verifica whoami primero. En otros planes, escribe la ruta de origen, el nombre del componente y el mapeo de propiedades en la description de cada componente y establece documentationLinks al archivo en GitHub. El Modo Desarrollador muestra ambos. No agregues archivos .figma.ts a un repositorio que no pueda publicarlos; rompen tsc sin el paquete Code Connect.

8. Limpiar

Elimina las capturas de referencia, quita cualquier script inyectado, detén los servidores de desarrollo que hayas iniciado y confirma que git status esté limpio.

Riesgos

Lee references/plugin-api-pitfalls.md antes de escribir scripts de componentes o páginas. Enumera los fallos que más tiempo cuestan, cada uno con su solución: opacidad de pintura vinculada, resize() bloqueando el tamaño de auto-layout, claves de propiedad reasignadas, referencias perdidas en variantes clonadas, el límite de tamaño por llamada y más.

references/helpers.md contiene las pequeñas funciones auxiliares que vale la pena pegar al inicio de cada script de construcción de páginas.