Локализованное руководство по чтению
figma-implement-designНазначение, использование и источник
Преобразует дизайн Figma в готовый к использованию код приложения.1:1Визуальная точность. Используйте при реализации кода пользовательского интерфейса из файлов Figma, когда пользователь упоминает «реализовать дизайн», «сгенерировать код», «реализовать компонент», предоставляет URL-адреса Figma или просит создать компоненты, соответствующие спецификациям Figma. Для холста Figma запись осуществляется черезuse_figma, использоватьfigma-use.
Источник получен:
- Репозиторий-источник
- openai/skills
- SKILL.md
skills/.curated/figma-implement-design/SKILL.md- Звёзды репозитория
- 28,420
- Последнее обновление репозитория
- 2026-10-29
- Категории Skills
- Дизайн
- Время последнего сбора
Лицензия: Файл лицензии требует проверки
Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.
Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.
Что делает этот навык
Преобразует дизайн Figma в готовый к использованию код приложения.1:1Визуальная точность. Используйте при реализации кода пользовательского интерфейса из файлов Figma, когда пользователь упоминает «реализовать дизайн», «сгенерировать код», «реализовать компонент», предоставляет URL-адреса Figma или просит создать компоненты, соответствующие спецификациям Figma. Для холста Figma запись осуществляется черезuse_figma, использоватьfigma-use.
Как работает рабочий процесс на вышестоящем уровне
Необходимый рабочий процесс
Выполняйте эти шаги по порядку. Не пропускайте ни одного шага.
проход вверх по течению · L29 ↗Обзор
Этот навык обеспечивает структурированный рабочий процесс для преобразования дизайнов Figma в готовый к производству код с точностью до пикселя. Он гарантирует согласованную интеграцию с сервером Figma MCP, правильное использование токенов дизайна и1:1визуальное соответствие дизайну.
проход вверх по течению · L8 ↗Шаг2: Получение контекста дизайна
Бегатьget_design_contextс извлеченным ключом файла и идентификатором узла. Это обеспечивает структурированные данные, включая: свойства компоновки (автоматическая компоновка, ограничения, размеры), значения цветов и токены дизайна.
get_design_context(fileKey=":fileKey", nodeId="1-2")Требования и настройка
Предварительные требования
Сервер Figma MCP должен быть подключен и доступен. Пользователь должен указать URL-адрес Figma в следующем формате:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Ограничения и проверки качества
Качество кода
Избегайте жестко закодированных значений — выносите их в константы или токены проектирования. Обеспечьте возможность компоновки и повторного использования компонентов.
проход вверх по течению · L156 ↗Начните с безопасного пробного периода.
- Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
- Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
- Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
- Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.
Подробнее читайте в источнике.
- Обзор
- Границы навыков
- Предварительные требования
- Необходимый рабочий процесс
- Вариант A: Анализ URL-адреса Figma
- Вариант B: Использовать текущий выбор из приложения Figma Desktop (только для Figma Desktop MCP)
- Шаг2: Получение контекста дизайна
- Шаг3: Создание визуальной ссылки
- Шаг4: Загрузите необходимые ресурсы
- Шаг5: Перевести в соответствии с проектными соглашениями
- Шаг6: Достигать1:1Визуальная паритетность
- Шаг7Проверка соответствия Figma
- Организация компонентов
- Проектирование системной интеграции
- Качество кода
- Пример1Реализация компонента «Кнопка»
- Пример2: Создание макета панели мониторинга
- Всегда начинайте с контекста.
- Поэтапная проверка
- Отклонения в документе
- Повторное использование важнее переосмысления
- Проектирование с учетом принципов системного подхода
- Проблема: вывод Figma обрезается.
- Проблема: После реализации дизайн не соответствует действительности.
- Проблема: Ресурсы не загружаются
- Проблема: Значения токенов дизайна отличаются от значений в Figma.
- Понимание реализации проекта
- Дополнительные ресурсы
Смежные навыки
Перевод и сфера применения
В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.
Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.
- Закрепленный источник
- Прочитайте оригинал ↗
- Источник получен
- Исходный коммит
49f948faa9258a0c61caceaf225e179651397431- Исходный SHA-256
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad