Convertir diseños de Figma a React
La transferencia de diseño a menudo pierde detalles de maquetación y estructura de componentes. Esta skill guía la conversión de Figma a React con prompts repetibles y scripts auxiliares.
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "design-to-code" from https://skillstore.io/skills/migoxlab-design-to-code.md and its manifest at https://skillstore.io/api/skills/migoxlab-design-to-code/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.
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Usando "design-to-code". Un frame de landing page con contenido hero, secciones de funcionalidades y un footer.
Resultado esperado:
Un plan estructurado de implementación en React con componentes generados, assets y orientación de integración.
Usando "design-to-code". Un diseño de dashboard con cards repetidas, gráficos y navegación.
Resultado esperado:
Usando "design-to-code". Una pantalla de app móvil con iconos, imágenes y elementos de lista repetidos.
Resultado esperado:
Tareas de componentes generadas que preservan el contenido de texto, las referencias de imágenes y la jerarquía de maquetación.
Most static findings are false positives from markdown fences, JavaScript template literals, and expected local workflow files. The remaining risks are limited to unvalidated local path inputs, generated code writes, and Figma token handling through an external helper.
Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.
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.
https://skillstore.io/skills/migoxlab-design-to-code/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/migoxlab-design-to-code?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/migoxlab-design-to-code?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/migoxlab-design-to-code/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/migoxlab-design-to-code.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>MigoXLab. (2026). design-to-code security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/migoxlab-design-to-code/audits/4@techreport{migoxlab-migoxlab-design-to-code-2026,
author = {MigoXLab},
title = {design-to-code security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/migoxlab-design-to-code/audits/4},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-to-code security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "MigoXLab"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/migoxlab-design-to-code/audits/4"
identifiers:
- type: other
value: "skillstore:migoxlab-design-to-code:audit:4"
description: "Skillstore immutable audit report identifier"
Convierte un frame de Figma seleccionado en un proyecto React con componentes y assets generados.
Convierte la estructura visual, los componentes repetidos y las props en tareas listas para implementación.
Crea una interfaz funcional de Vite y Tailwind CSS a partir de un diseño visual aprobado.
Usa design-to-code para convertir mi frame de Figma en React y TypeScript. Sigue el flujo de trabajo y dime qué archivos necesitan revisión.
Usa la miniatura y el protocolo generados para extraer props de cada componente repetido. Mantén etiquetas, rutas de imágenes y orden exactos.
Genera los componentes React en orden de tareas. Guarda cada resultado mediante el flujo de trabajo auxiliar y mantén consistentes los imports del padre.
Revisa los componentes generados para verificar fidelidad visual, rutas inseguras y assets faltantes. Luego integra el componente raíz en la app.
Autor
MigoXLabLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Ref.
6425ec35f4ac137735cff58cd7877843bba23e3b
Actualidad del mantenimiento
18/7/2026
Uso
6 descargas · 217 vistas
Estructura de archivos
Build Accessible Tailwind Interfaces
por nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Crear componentes React con seguridad de tipos
por softaworks
El trabajo con React TypeScript suele necesitar tipos precisos para eventos, hooks y rutas. Esta skill proporciona patrones enfocados para componentes tipados, APIs de React 19 y enrutamiento.
Desarrolla funcionalidades frontend listas para producción
por davila7
Los equipos de frontend necesitan directrices coherentes sobre React y Next.js en todos sus proyectos. Esta habilidad proporciona flujos de trabajo de referencia, prácticas de calidad y scripts auxiliares para el análisis del frontend.
Construye aplicaciones modernas con React y Next.js
por sickn33
Los proyectos de React y Next.js suelen necesitar decisiones de configuración coherentes en enrutamiento, componentes, estilos, datos, formularios, pruebas y despliegue. Esta skill proporciona a Claude, Codex y Claude Code un flujo de trabajo por fases para planificar y construir aplicaciones frontend modernas.
Mejorar la cobertura de pruebas de Playwright
por C0ntr0lledCha0s
Las suites de Playwright pueden volverse inestables cuando la configuración, los localizadores y las fixtures son incoherentes. Esta skill ofrece patrones prácticos para pruebas de navegador fiables, depuración y objetos de página reutilizables.
Crea aplicaciones de Starknet con starknet.js
por internet-court
Las integraciones con Starknet requieren un manejo preciso de proveedores, cuentas, transacciones y comisiones. Esta skill proporciona a Claude, Codex y Claude Code patrones prácticos de starknet.js v9.