Локализованное руководство по чтению
figma-code-connect-componentsНазначение, использование и источник
Соединяет компоненты дизайна Figma с компонентами кода с помощью инструментов сопоставления Code Connect. Используется, когда пользователь говорит «подключить код», «подключить этот компонент к коду», «сопоставить этот компонент», «связать компонент с кодом», «создать сопоставление Code Connect» или хочет установить сопоставление между дизайном Figma и реализацией кода. Для записи на холст черезuse_figma, использоватьfigma-use.
Источник получен:
- Репозиторий-источник
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Звёзды репозитория
- 28,420
- Последнее обновление репозитория
- 2026-10-29
- Категории Skills
- Дизайн
- Время последнего сбора
Лицензия: Не указано
Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.
Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.
Что делает этот навык
Соединяет компоненты дизайна Figma с компонентами кода с помощью инструментов сопоставления Code Connect. Используется, когда пользователь говорит «подключить код», «подключить этот компонент к коду», «сопоставить этот компонент», «связать компонент с кодом», «создать сопоставление Code Connect» или хочет установить сопоставление между дизайном Figma и реализацией кода. Для записи на холст черезuse_figma, использоватьfigma-use.
Как работает рабочий процесс на вышестоящем уровне
Необходимый рабочий процесс
Выполняйте эти шаги по порядку. Не пропускайте ни одного шага.
проход вверх по течению · L29 ↗Обзор
Этот навык помогает связать компоненты дизайна Figma с соответствующими реализациями кода с помощью функции Code Connect в Figma. Он анализирует структуру дизайна Figma, ищет соответствующие компоненты в вашей кодовой базе и устанавливает соответствия, обеспечивающие согласованность дизайна и кода.
проход вверх по течению · L8 ↗Шаг1: Получить предложения по подключению к коду
Вызовget_code_connect_suggestionsЭтот инструмент позволяет идентифицировать все неподключенные компоненты за одну операцию. Он автоматически: получает информацию о компонентах из графа сцены Figma; идентифицирует опубликованные компоненты в выделенной области; проверяет существующие сопоставления Code Connect и отфильтровывает уже подключенные компоненты.
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Требования и настройка
Предварительные требования
Сервер Figma MCP должен быть подключен и доступен. Пользователь должен указать URL-адрес Figma с идентификатором узла:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Ограничения и проверки качества
Из этого файла не был выбран отдельный фрагмент с ограничениями. Это не означает, что навык безопасен для любых входных данных или сред. Проверьте полный исходный код и подтвердите свой собственный результат.
Начните с безопасного пробного периода.
- Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
- Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
- Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
- Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.
Подробнее читайте в источнике.
- Обзор
- Границы навыков
- Предварительные требования
- Необходимый рабочий процесс
- Шаг1: Получить предложения по подключению к коду
- Вариант А: Использование
figma-desktopMCP (URL не указан) - Вариант B: Если указана ссылка на Figma.
- Шаг2: Сканирование кодовой базы для поиска соответствующих компонентов
- Шаг3: Представить пользователю подходящие варианты
- Шаг4: Создание сопоставлений кода
- Пример1Подключение компонента кнопки
- Пример2: Множественные компоненты с частичным выбором
- Пример3: Создание потребностей в компонентах
- Проактивное обнаружение компонентов
- Точное сопоставление структур
- Четкая коммуникация
- Обработка неопределенности
- Изящная деградация
- Проблема: «В этом наборе не найдено опубликованных компонентов»
- Проблема: «Code Connect доступен только в тарифных планах Organization и Enterprise».
- Проблема: В кодовой базе не найден подходящий компонент.
- Проблема: "Опубликованный компонент не найден" (CODE_CONNECT_ASSET_NOT_FOUND)
- Проблема: "Компонент уже сопоставлен с кодом" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Проблема: "Недостаточные права доступа для создания сопоставления" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Проблема: Сбой сопоставления Code Connect приводит к ошибкам URL-адреса.
- Проблема: обнаружено несколько похожих компонентов.
- Понимание Code Connect
- Дополнительные ресурсы
Смежные навыки
Перевод и сфера применения
В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.
Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.
- Закрепленный источник
- Прочитайте оригинал ↗
- Источник получен
- Исходный коммит
49f948faa9258a0c61caceaf225e179651397431- Исходный SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d