Ранее сделать продукт легче всего застряли в двух местах:
Не спроектировать, не делать, как полуфабрикаты; не разрабатывать, проект всегда лежит в Figma.
Теперь процесс соединения Codex с Figma становится:
Идеи → Разборка требований → Создание или изменение дизайна → Разработка реальных страниц → Проверка браузера → Вернуться в Figma и продолжать корректировку
Figma MCP поддерживает двустороннюю совместную работу: Codex может читать компоненты, переменные, маски и материалы в Figma, а также захватить текущие веб-страницы в редактируемый слой Figma, а также создавать или изменять собственный контент Figma, если у него есть соответствующие права.
1 ️️ Как разделить работы Codex и Figma?
Многие считают:
Кодекс отвечает за коды. Фигма - за рисунки.
На самом деле, их разделение труда больше похоже на это.
Кодекс: анализ потребностей + реализация разработки
Это может помочь вам:
-
Рассеивать расплывчатые идеи
-
Читать PRD и код проекта
-
Анализ структуры страницы
-
Создание и изменение кода фронт-энде
-
Запустить сборку и тестирование
-
Продолжение корректировки на основе отзывов о проекте
-
Проверка окончательных изменений
Figma: рабочее пространство проектирования и рецензирования
Он включает в себя, в частности:
-
Структура страницы
-
Компоненты и варианты
-
Переменные цвета, шрифта и интервала
-
Автоматический компоновка
-
Интерактивное описание
-
Обзоры и комментарии продукции
-
Несколько вариантов проектирования
Соединяющие оба являются Figma MCP。
Он преобразует выбранные Figma Frame, компоненты, переменные, компоновки и материалы в структурированный контекст для понимания и реализации Codex.Следует отметить, что сам MCP не создает окончательный код для вас; действительно ответственный за адаптацию хранилища кода, повторное использование компонентов и завершение разработки по-прежнему является Codex.
2 ️️ Прежде чем начать, подтвердите учетную запись и разрешения.
Вам нужно подготовиться:
1 Рабочее пространство Codex на рабочем столе GPT, или Codex CLI2 Учетная запись Figma3 Простой практический проект4 Git для сохранения и отгрузки кода5 Четкие требования, PRD или справочные материалы
В настоящее время удаленный MCP Figma доступен для различных пакетов и мест, но с разными квотами на звонки.У пользователей Starter и платных групп, как правило, есть небольшое количество звонков в месяц для инструментов View, Collab и Reading Class; для полноценных и Dev мест выше.
Также следует разграничить две важные функции:
-
Прочитывание информации о проектеМестные места Dev, Full и т. д. могут использоваться в зависимости от привилегий.
-
Write to Canvas, непосредственно изменять холст Figma: Требуется полное место и имеет права редактировать файл назначения.
Write to Canvas все еще находится в бета-версии, и Figma говорит, что в настоящее время не взимает дополнительную плату, но в будущем планирует взимать плату по количеству использования.
3 ️️ Первый шаг: установка кодекса
Пользователи, которые уже установили, могут просто пропустить.
macOS или Linux
Windows PowerShell
Также можно использовать NPM:
npm install -g
macOS также можно установить с помощью Homebrew:
Brew Install - Cask Codex
Проверка после установки:
Кодекс - версия
Запустить команду CLI:
кодекс
Все команды взяты из текущего официального репозитория OpenAI Codex.
По состоянию на июль 2026 года первоначальный опыт работы с рабочим столом Codex был интегрирован в рабочее приложение ChatGPT, а проекты, настройки и рабочие процессы Codex остаются.
4️️ Шаг 2: Подключение Figma к Кодексу
В текущей новой версии ChatGPT на рабочем столе, как правило, можно ввести:
Настройки → Плагины → Figma → Установка
После завершения входа в систему Figma и авторизации можно вызвать ее в рабочем пространстве Codex.
В некоторых версиях или на страницах справки Figma по-прежнему отображаются следующие входные страницы:
Плагины → + рядом с Figma → Install Figma → Allow access
Это объясняется тем, что в июле, когда Codex был интегрирован в ChatGPT на рабочем столе, местонахождение управления плагинами было изменено, и фактический интерфейс может варьироваться в зависимости от версии.
Проверка успешного соединения
Откройте файл Figma, к которому вы имеете доступ:
Выберите Frame → Правую кнопку мыши → Copy link to selection → Отправить ссылку в Codex
Затем введите следующее:
Markdown
请通过 Figma MCP 读取这个设计节点。
暂时不要写代码，请告诉我：
1. 页面包含哪些模块
2. 使用了哪些颜色、字体和间距
3. 有哪些组件和变量
4. 哪些内容适合复用项目已有组件
5. 是否提供了移动端设计
无法确认的内容请明确标记，不要自行猜测。Удаленный MCP Figma работает на основе ссылок, которые должны указывать на точный фрейм, компонент или вариант, а не просто указывать адрес главной страницы всего файла.
5 ️️ Начинать с одной идеи: создать сайт
Вы можете ввести:
Помогите мне создать сайт для домашних животных.
Но это может быть использовано только для запуска дискуссии, а не для прямого перехода к разработке.
Более безопасно, чтобы Кодекс сначала спросил вас, как менеджер продукта.
Скопировать этот запрос прямо
Markdown
我想制作一个宠物用品品牌官网，但需求还不完整。
先不要设计，也不要写代码。
请向我提问，帮助我明确：
1. 目标用户是谁
2. 核心产品是什么
3. 用户进入网站后的主要目标
4. 首页需要哪些模块
5. 是否需要商品详情、购物车或支付
6. 品牌风格与参考方向
7. 手机端有哪些重点
8. 第一版必须完成什么
9. 第一版暂时不做什么
10. 最终验收标准是什么
每轮最多问5个问题。
信息不足时继续提问，不要自行编造。
确认完成后，输出：
- 产品定位
- 页面结构
- 用户流程
- 内容清单
- 设计需求
- 开发计划Одно предложение может запустить проект, но определяющее направление по-прежнему остается вопросом, подтверждением и компромиссом, которые следует за ним.
6 ️️ Кодекс создает первоначальный дизайн в Figma
В первоначальной статье непосредственно запрошены:
Создание главной страницы в новом файле Figma.
Это недостаточно стабильно.
Более подходящий вариант для белых - это:
-
Создание пустого файла Design в Figma;
-
подтвердить, что у вас есть права на редактирование;
-
Копировать ссылку на файл;
-
Пусть Кодекс будет записан на холсте.
Markdown
请使用 Figma MCP，在下面这个空白文件中创建首页设计：
【粘贴Figma文件链接】
要求：
1. 使用Figma原生图层
2. 使用Auto Layout
3. 建立清晰的页面层级
4. 建立颜色、字体和间距变量
5. 包含桌面端与手机端页面
6. 图片位置先使用占位区域
7. 不编造Logo和品牌素材
8. 不增加尚未确认的功能Фрейм, компоненты, переменные и автоматические компоновки создаются с помощью программы Write to Canvas, но требуется полное место пользователя и права на редактирование файлов.После создания все еще необходимо проверять вручную в Figma, а не рассматривать выход ИИ непосредственно как окончательный дизайн.
Если нет полного места, то можно сначала вывести кодекс:
-
Структура страницы
-
Список компонентов
-
Рекомендации проектирования
-
Описания Wireframe
Затем вы можете создать его вручную в Figma или использовать уже существующий проект для чтения и разработки.
7 ️️ Практика 2: Превратить дизайн Figma в реальную страницу.
После подтверждения дизайна выберите Frame, который необходимо разработать, и отправьте ссылку в Кодекс:
Markdown
请根据这个Figma Frame实现当前项目中的首页。
【设计要求】
1. 遵循布局、间距、颜色和字体层级
2. 优先复用项目已有组件和变量
3. 不创建重复的组件系统
4. 使用Figma提供的真实图片和图标
5. 同时适配桌面端与手机端
【工程要求】
1. 先检查项目技术栈
2. 先输出实现计划
3. 不安装没有必要的依赖
4. 不修改无关文件
5. 不添加设计稿中没有的业务功能
【验证要求】
1. 运行已有构建和测试
2. 检查文字溢出与横向滚动
3. 检查按钮、链接和交互
4. 对比页面与Figma参考
5. 输出修改文件及验证结果
无法实际验证的项目必须标记为“未验证”。Официальное предложение Кодекса заключается в том, чтобы сначала получить точный контекст проектирования и скриншоты узлов, а затем использовать существующие компоненты, токены, маршрутизации и схемы данных в хранилище кода, а не просто копировать примерную структуру, возвращенную MCP.
Чем более стандартный файл Figma, тем более стабильный эффект, который вы получаете впервые:
-
Используйте Auto Layout
-
Не разделять все компоненты.
-
Ясное имя слоя
-
Использование переменных или токенов дизайна
-
Сохранить реальные изображения и иконки
-
Определение состояния настольных и мобильных устройств
8️️ Практика 3: Превратить скриншоты в оригинальные продукты
Когда вы видите любую страницу, вы можете загрузить скриншоты для анализа в Кодекс, но не просто копировать ее.
Деловая логика и правила взаимодействия, которые не видны на скриншотах, сначала нужно задать мне вопросы, а не создавать их сами.
Markdown
请分析我提供的网页截图。
不要逐像素复刻，也不要复制原网站的：
- Logo
- 品牌名称
- 文案
- 插画
- 产品图片
- 具有明显识别度的视觉资产
请只提取：
1. 信息层级
2. 页面模块
3. 配色逻辑
4. 字体层级
5. 卡片和按钮风格
6. 留白与间距
7. 图片使用方式
再结合我的产品需求，生成一套原创设计。Скриншоты предоставляют только визуальную информацию, не могут рассказать ИИ:
-
Что происходит после нажатия кнопки?
-
Как проверить форму
-
Где получать данные
-
Как управлять правами входа
-
Как развернуть меню мобильного телефона
-
Как показать неудачу, пустое состояние
9️️ Практика 4: Превратить PRD в проверяемый прототип
После того, как вы передаете PRD в Кодекс, не просите его создавать страницы.
Позвольте сначала выявить пробелы в требовании:
Markdown
请读取这份产品需求文档。
第一阶段只做需求分析，不要生成设计和代码。
请整理：
1. 用户角色
2. 每个角色能够执行的操作
3. 所需页面
4. 页面核心任务
5. 正常流程
6. 异常流程
7. 空状态和错误状态
8. 权限边界
9. 矛盾或模糊描述
10. 必须由我补充的问题
等待我确认后，再制作产品原型。После подтверждения потребностей Codex использует Figma MCP для создания страницы или схемы работы FigJam.
При использовании команды Write to Canvas по-прежнему требуются полное место и права редактирования; место Dev лучше подходит для чтения контекста проекта, а не для непосредственного изменения полотна.
🔟 Вернуть рабочую страницу в Figma
Это одна из самых ценных возможностей Codex + Figma.
Традиционные процессы являются:
Дизайн Figma → Разработка → Реализация проектов → Проекты устаревают
Теперь можно сформировать замкнутый цикл:
Дизайн Figma → Разработка Codex → Запуск браузера → Загрузка в Figma → Рецензия и настройка → Кодекс снова реализуется
В кодекса можно сказать:
Запустите локальный сервер разработки для текущего проекта.Используйте возможности Coding to Canvas в MCP для захвата текущей главной страницы в новый файл Figma Design.Не перезаписывайте исходный проект.После завершения первоначального захвата, укажите мне, как продолжить захват других состояний страницы.
Code to Canvas позволяет преобразовать страницу, работающую в браузере, в редактируемый фрейм фигмы.Текущее состояние автоматически захватывается при первом открытии браузера; другие страницы, всплывающие окна или состояния ошибок, как правило, требуют от вас манипулировать страницей, а затем использовать «Весь экран» или «Выберите элемент» на панели инструментов для продолжения захвата.
Для создания или редактирования собственных файлов, захваченных в проектах, можно использовать разные места; для записи в существующие файлы за пределами проекта требуется полное место и права редактирования.
1...1... Сделать App и Data Kanban, также добавьте границы
Codex + Figma подходит для создания:
-
Инструменты для выполнения работы
-
Привычка на карты
-
Простая бухгалтерская отчетность
-
Данные Канбан
-
Страницы продуктов
-
Операционный прототип фоновой системы
-
Легкие веб-приложения
Но «создать страницу» не означает «завершить зрелое приложение».
Мобильные приложения все еще могут потребовать:
-
Xcode или Android SDK
-
Подпись и сертификат
-
Обслуживание вспомогательных служб
-
Регистрация и права
-
Пушные уведомления
-
Политика конфиденциальности
-
Аудит магазина приложений
-
Долгосрочное обслуживание
Также требуется подтверждение данного персонала:
-
Интерфейс данных
-
Калибр индикатора
-
Пользовательские права
-
Изоляция данных
-
Странирование и производительность
-
Обработка чувствительных данных
1...2 Не развертывайте сразу после завершения.
Наконец, мы передаем Кодекс следующий пункт:
Markdown
请对当前项目执行发布前检查。
先列出项目中真实存在的：
- build
- lint
- test
- 浏览器测试
- 部署脚本
然后执行可以安全运行的检查。
检查内容：
1. 构建是否成功
2. 是否存在终端或控制台错误
3. 是否存在横向滚动
4. 图片是否加载失败
5. 按钮和链接是否有效
6. 表单是否提供错误提示
7. 是否存在测试文案和占位数据
8. 是否泄露API Key或敏感信息
9. 页面是否符合Figma设计
10. 是否存在明显无障碍问题
不能实际验证的项目标记为“未验证”，
不要写成“已通过”。
不要执行正式部署、购买域名或创建付费资源。Официальный процесс рекомендаций также требует использования реальных браузеров для проверки внешнего вида и взаимодействия страницы с помощью таких инструментов, как Playwright, а не просто прочитывать код и объявлять завершенным.
Создание кода означает только, что проект имеет первую версию; только проверка означает, что он приближается к продукту.
Заключительные замечания
Правильным способом открытия Codex + Figma не является:
Одно слово → Автоматическое проектирование → Автоматическая разработка → Автоматический выпуск
Вместо этого,
1 Кодекс задает вопросы, определяет требования2 Фигма поддерживает редактируемый дизайн3 Ручная проверка страниц и процессов4 Реализация кода5 Проверка браузеров и инструментов тестирования6 Отправка результатов реализации7 Подтверждение перед развертыванием
В прошлом люди, которые не могли проектировать в Figma, не могли программировать в коде.
Теперь Codex + Figma действительно снижает порог от идеи до прототипа и до рабочей страницы.
Но это снижает затраты на реализацию, а не затраты на мышление.
В конечном итоге, что действительно определяет стоимость продукта, остается:
-
Что вы решили?
-
Кто хочет использовать
-
Ясна ли потребность?
-
Надежны ли данные?
-
Проверен ли код
-
Вы хотите продолжать итерацию?