Antes de hacer un producto, era más fácil atascarse en dos lugares:
No puede diseñar, lo hace como un producto semiacabado; no puede desarrollar, el proyecto de diseño solo puede permanecer en Figma para siempre.
Ahora el proceso de conectar el Codex y Figma se está convirtiendo en:
Ideas → Peinar las necesidades → Generar o modificar el diseño → Desarrollar páginas reales → Validación del navegador → Volver a Figma para seguir ajustando
El MCP de Figma ya admite la colaboración bidireccional: Codex puede leer componentes, variables, diseños y materiales de Figma, o capturar páginas web en ejecución en capas de Figma editables, y puede crear o modificar contenido nativo de Figma directamente con permisos apropiados.
1 ️ ️️ ¿Cómo se divide el trabajo entre el Codex y Figma?
Mucha gente piensa:
El Codex es el código, Figma es el dibujo.
De hecho, su división del trabajo es más parecida a esto.
Codex: Análisis de Requisitos + Ejecución de Desarrollo
Puede ayudarle a:
-
Desarrollar ideas vagas
-
Lea PRD y código del proyecto
-
Análisis de la estructura de página
-
Escribir y modificar código front-end
-
Ejecutar la construcción y pruebas
-
Continuar con el feedback de diseño
-
Verificar los cambios finales
Figma: Área de trabajo de diseño y revisión
Tiene principalmente:
-
Estructura de página
-
Componentes y variaciones
-
Variables de color, fuente y espacio
-
Layout automático
-
Descripción interactiva
-
Revisión de productos y comentarios
-
Múltiples esquemas de diseño
Lo que conecta a ambos es MCP de Figma。
Convierte el marco de Figma seleccionado, los componentes, las variables, los diseños y los materiales en un contexto estructurado que se entrega al Codex para su comprensión e implementación. Tenga en cuenta que el MCP por sí mismo no genera el código final por usted; sigue siendo el Codex quien es realmente responsable de adaptar el almacén de código, reutilizar los componentes y completar el desarrollo.
2 años.️ Antes de comenzar, confirme la cuenta y los permisos.
Necesitas estar preparado para:
1 ChatGPT Desktop Codex Workspace, o Codex CLI 2 Una cuenta Figma 3 Un simple proyecto de práctica 4 Git para guardar y revertir código 5 Requisitos explícitos, PRD o material de referencia
Actualmente, el MCP remoto Figma está disponible en diferentes paquetes y asientos, pero con diferentes cuotas de llamada. Los usuarios de inicio, así como los asientos de View, Collab en equipos pagados, las herramientas de clase de lectura generalmente solo tienen una pequeña cuota de llamadas mensuales; los asientos Full y Dev tienen una cuota más alta.
También hay que distinguir entre dos funciones importantes:
-
Leer información de diseñoLos asientos Dev, Full, etc. se pueden utilizar según los permisos.
-
Escribir en Canvas, modificar directamente el lienzo FigmaRequiere un asiento completo y tiene permisos de edición para el archivo de destino.
Escribir a Canvas todavía está en beta, y Figma dijo que no cobrará cargos adicionales por el momento, pero planea cobrar por el uso en el futuro.
3 ️️ Paso 1: Instalando el Codex
Los usuarios que ya están instalados pueden saltarse directamente.
macOS o Linux
Windows PowerShell
También se puede usar npm:
Npm instalar - g
macOS también se puede instalar a través de Homebrew:
Brew instalar - Cask codex
Comprobación post-instalación:
Código - Versión
Inicio CLI:
Códex
Todos estos comandos provienen del actual repositorio oficial del Codex de OpenAI.
A partir de julio de 2026, la experiencia de escritorio original de Codex se ha integrado en la aplicación de escritorio ChatGPT, y los proyectos, configuraciones y flujos de trabajo de Codex permanecen.
4 ️️ Paso 2: Conectar Figma a Codex
En la nueva versión actual del escritorio de ChatGPT, generalmente se puede acceder a:
Configuración → Plugins → Figma → Instal
Puede ser invocado en el espacio de trabajo de Codex después de completar el inicio de sesión y la autorización de Figma.
Algunas versiones o páginas de ayuda de Figma todavía muestran la siguiente entrada:
En la esquina superior izquierda, Plugins → + junto a Figma → Install Figma → Allow access
Esto se debe a que la ubicación de la administración de plugins se ha ajustado después de que Codex se integró en el lado de escritorio de ChatGPT en julio, y la interfaz real puede variar según la versión.
Compruebe si la conexión es exitosa
Abrir un archivo Figma al que tiene acceso:
Seleccione Frame → Botón derecho → Copiar enlace a selección → Enviar enlace a Codex
A continuación, ingresa:
Markdown
请通过 Figma MCP 读取这个设计节点。
暂时不要写代码，请告诉我：
1. 页面包含哪些模块
2. 使用了哪些颜色、字体和间距
3. 有哪些组件和变量
4. 哪些内容适合复用项目已有组件
5. 是否提供了移动端设计
无法确认的内容请明确标记，不要自行猜测。El MCP de Figma remoto funciona basado en enlaces que deben tratar de apuntar al marco, componente o variante exacto en lugar de simplemente proporcionar la dirección de la página principal de todo el archivo.
Cinco años️ Práctica 1: Comenzando con una idea para hacer un sitio web
Puedes introducir:
Ayúdame a hacer un sitio web oficial de suministros para mascotas.
Pero esto solo puede usarse para iniciar una discusión y no entrar directamente en el desarrollo.
Es más seguro que el Codex le pregunte como un gerente de producto.
Copiar directamente el mensaje
Markdown
我想制作一个宠物用品品牌官网，但需求还不完整。
先不要设计，也不要写代码。
请向我提问，帮助我明确：
1. 目标用户是谁
2. 核心产品是什么
3. 用户进入网站后的主要目标
4. 首页需要哪些模块
5. 是否需要商品详情、购物车或支付
6. 品牌风格与参考方向
7. 手机端有哪些重点
8. 第一版必须完成什么
9. 第一版暂时不做什么
10. 最终验收标准是什么
每轮最多问5个问题。
信息不足时继续提问，不要自行编造。
确认完成后，输出：
- 产品定位
- 页面结构
- 用户流程
- 内容清单
- 设计需求
- 开发计划Una oración puede iniciar un proyecto, pero lo que determina la dirección sigue siendo la pregunta, la confirmación y la compensación.
6 ️️ Hacer que Codex genere diseños primarios en Figma
Requisito directo en la publicación original:
Crear la página de inicio en un nuevo archivo Figma.
No es lo suficientemente estable.
La forma más adecuada para el pequeño blanco es:
-
Crear un nuevo archivo de diseño en blanco en Figma;
-
Confirmar que tiene permisos de edición;
-
Copiar un archivo de enlace;
-
Dejemos que el Codex se escriba en el lienzo.
Markdown
请使用 Figma MCP，在下面这个空白文件中创建首页设计：
【粘贴Figma文件链接】
要求：
1. 使用Figma原生图层
2. 使用Auto Layout
3. 建立清晰的页面层级
4. 建立颜色、字体和间距变量
5. 包含桌面端与手机端页面
6. 图片位置先使用占位区域
7. 不编造Logo和品牌素材
8. 不增加尚未确认的功能Escribir en Canvas puede crear marcos, componentes, variables y diseños automáticos, pero requiere que el usuario tenga asiento completo y permisos de edición de archivos. Después de la generación, todavía debe ser verificado manualmente en Figma, en lugar de tratar la salida de IA directamente como el diseño final.
Cuando no hay asientos completos, primero puede dejar que el Codex produzca:
-
Estructura de página
-
Lista de componentes
-
Especificaciones de diseño
-
Descripción de Wireframe
Luego lo construye manualmente en Figma, o lo lee y desarrolla con un borrador de diseño existente.
7 años.️ Práctica 2: Transformar el diseño de Figma en una página web real
Después de la confirmación del diseño, seleccione el marco que debe desarrollarse y entregue el enlace al Codex:
Markdown
请根据这个Figma Frame实现当前项目中的首页。
【设计要求】
1. 遵循布局、间距、颜色和字体层级
2. 优先复用项目已有组件和变量
3. 不创建重复的组件系统
4. 使用Figma提供的真实图片和图标
5. 同时适配桌面端与手机端
【工程要求】
1. 先检查项目技术栈
2. 先输出实现计划
3. 不安装没有必要的依赖
4. 不修改无关文件
5. 不添加设计稿中没有的业务功能
【验证要求】
1. 运行已有构建和测试
2. 检查文字溢出与横向滚动
3. 检查按钮、链接和交互
4. 对比页面与Figma参考
5. 输出修改文件及验证结果
无法实际验证的项目必须标记为“未验证”。En lugar de copiar directamente la estructura de ejemplo devuelta por el MCP, el Codex recomienda oficialmente que primero obtenga el contexto de diseño exacto y capturas de pantalla de los nodos y luego reutilice los componentes existentes, tokens, enrutamiento y patrones de datos del almacén de código.
Cuanto más canónico sea el archivo de Figma, más estable será el efecto generado por primera vez:
-
Utilice el Auto Layout
-
No desmontar todos los componentes
-
Nombre de capa claro
-
Uso de variables o token de diseño
-
Mantener las imágenes e iconos reales
-
Aclarar el estado del lado de escritorio y el lado móvil
8 años️ Práctica 3: Transformar las capturas de pantalla en productos originales
Al ver la página web que le gusta, puede subir una captura de pantalla para que el Codex analice, pero no deje que copie directamente.
La lógica de negocio y las reglas de interacción que no se pueden ver en la captura de pantalla, deben hacerme preguntas primero, no inventarlas por ti mismo.
Markdown
请分析我提供的网页截图。
不要逐像素复刻，也不要复制原网站的：
- Logo
- 品牌名称
- 文案
- 插画
- 产品图片
- 具有明显识别度的视觉资产
请只提取：
1. 信息层级
2. 页面模块
3. 配色逻辑
4. 字体层级
5. 卡片和按钮风格
6. 留白与间距
7. 图片使用方式
再结合我的产品需求，生成一套原创设计。Las capturas de pantalla solo proporcionan información visual y no le dicen a la IA:
-
¿Qué sucede cuando se hace clic en el botón?
-
Cómo verificar los formularios
-
¿Dónde se obtienen los datos?
-
Cómo se controlan los permisos de login
-
Cómo expandir el menú del teléfono
-
Cómo se muestran los estados fallidos y vacíos
9 años.️ Práctica 4: Convertir PRD en prototipo revisable
Después de entregar el PRD al Codex, no le pida que genere páginas de inmediato.
En primer lugar, permítanle encontrar las lagunas en los requisitos:
Markdown
请读取这份产品需求文档。
第一阶段只做需求分析，不要生成设计和代码。
请整理：
1. 用户角色
2. 每个角色能够执行的操作
3. 所需页面
4. 页面核心任务
5. 正常流程
6. 异常流程
7. 空状态和错误状态
8. 权限边界
9. 矛盾或模糊描述
10. 必须由我补充的问题
等待我确认后，再制作产品原型。Después de confirmar los requisitos, deje que Codex cree la página o el diagrama de flujo FigJam a través de Figma MCP.
Cuando se utiliza Write to Canvas, todavía se requiere un asiento completo y permisos de edición; el asiento de desarrollo es más adecuado para leer el contexto del diseño que para modificar el lienzo directamente.
🔟 Volver a enviar páginas web en ejecución a Figma
Esta es una de las capacidades más valiosas de Codex + Figma.
El proceso tradicional es:
Diseño de Figma → Desarrollo Implementación → Descripción gradualmente desactualizada
Ahora se puede formar un bucle cerrado:
Diseño de Figma → Desarrollo de Codex → Ejecución del navegador → Captura de nuevo Figma → Revisión y ajuste → Implementación de Codex de nuevo
Se puede decir al Codex:
Por favor, inicie el servidor de desarrollo local para el proyecto actual. Utilice la capacidad de código a lienzo de Figma MCP para capturar la página de inicio actual en un nuevo archivo de diseño de Figma. No sobrescriba el diseño original. Después de completar la captura inicial, dígame cómo continuar con la captura de otros estados de la página.
Code to Canvas convierte una página que se ejecuta en un navegador en un marco de Figma editable. El estado actual se captura automáticamente cuando se abre el navegador por primera vez; otras páginas, ventanas emergentes o estados de error, generalmente requieren que manipule la página y luego continúe la captura utilizando "Pantalla entera" o "Seleccionar elemento" en la barra de herramientas.
Puede usar diferentes asientos para crear o editar archivos de captura en sus propios borradores; para escribir en archivos existentes fuera de los borradores, requiere asientos completos y permisos de edición.
1 2 31 2 3 Para hacer un Kanban de aplicaciones y datos, también agregue límites
Codex + Figma es ideal para la producción de:
-
Herramientas To-Do
-
El hábito de punchar
-
Contabilidad simple
-
Datos Kanban
-
Página de aterrizaje de productos
-
Prototipo de backstage
-
Aplicación web ligera
Sin embargo, "hacer una página " no es lo mismo que" completar una aplicación madura ".
Las aplicaciones móviles aún pueden requerir:
-
Xcode o el SDK de Android
-
Firma y certificado
-
Servicios Back End
-
Login y permisos
-
Notificación push
-
Política de privacidad
-
Aplicación de la tienda de revisión
-
Mantenimiento prolongado
El Kanban de datos también necesita una persona para confirmar:
-
Interfaz de datos
-
Índice calibre
-
Permisos de usuario
-
Aislamiento de datos
-
Paginación y rendimiento
-
Procesamiento de datos sensibles
1 2 32 de No despliegue directamente después de hacerlo.
Por último, entrego el siguiente párrafo al Codex:
Markdown
请对当前项目执行发布前检查。
先列出项目中真实存在的：
- build
- lint
- test
- 浏览器测试
- 部署脚本
然后执行可以安全运行的检查。
检查内容：
1. 构建是否成功
2. 是否存在终端或控制台错误
3. 是否存在横向滚动
4. 图片是否加载失败
5. 按钮和链接是否有效
6. 表单是否提供错误提示
7. 是否存在测试文案和占位数据
8. 是否泄露API Key或敏感信息
9. 页面是否符合Figma设计
10. 是否存在明显无障碍问题
不能实际验证的项目标记为“未验证”，
不要写成“已通过”。
不要执行正式部署、购买域名或创建付费资源。El proceso de recomendación oficial también requiere el uso de un navegador real contra el diseño y la combinación de herramientas como Playwright para verificar la apariencia y la interacción de la página, en lugar de simplemente leer el código y declararlo terminado.
La generación de código solo significa que el proyecto tiene una primera versión; la verificación significa que está comenzando a acercarse al producto.
Resumen Final
La forma correcta de abrir Codex + Figma no es:
Una frase → diseño automático → desarrollo automático → lanzamiento automático
sino que:
1Codex pregunta, requisitos claros 2Figma aloja diseño editable 3Confirmación manual de páginas y procesos 4Codex implementación de código real 5Verificación de navegador y herramientas de prueba 6Enviar los resultados de implementación a Figma para revisión 7Confirmación antes de la implementación en línea
En el pasado, la gente que no podía diseñar estaba atrapada en Figma, la gente que no podía programar estaba atrapada en el código.
Ahora, Codex + Figma ha bajado el umbral de la idea a un prototipo y a una página ejecutable.
Pero reduce el costo de implementación, no el costo de pensamiento.
En última instancia, lo que realmente determina el valor del producto sigue siendo:
-
¿Qué has resuelto?
-
Quien quiere usar
-
Las necesidades son claras
-
Los datos son fiables
-
El código está verificado
-
¿Estás dispuesto a continuar iterando?