Реализация дизайнов Figma в production UI
При передаче дизайна в разработку часто теряются отступы, ассеты и замысел компонентов. Этот навык дает Claude, Codex и Claude Code повторяемый рабочий процесс Figma MCP для точной реализации UI.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "implement-design" from https://skillstore.io/skills/figma-implement-design.md and its manifest at https://skillstore.io/api/skills/figma-implement-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «implement-design». Реализовать компонент кнопки Figma по ссылке на дизайн.
Ожидаемый результат:
Использование «implement-design». Создать фрейм дашборда из Figma.
Ожидаемый результат:
All static command findings are false positives from Markdown inline code and examples that name Figma MCP tools. The URL findings are documented Figma examples or resource links, and no prompt injection or malicious intent was found in SKILL.md.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/figma-implement-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/figma-implement-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/figma-implement-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/figma-implement-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/figma-implement-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>figma. (2026). implement-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/figma-implement-design/audits/4@techreport{figma-figma-implement-design-2026,
author = {figma},
title = {implement-design security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/figma-implement-design/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: "implement-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "figma"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/figma-implement-design/audits/4"
identifiers:
- type: other
value: "skillstore:figma-implement-design:audit:4"
description: "Skillstore immutable audit report identifier"
Реализуйте кнопки, формы, карточки и другие компоненты Figma с использованием существующих паттернов проекта.
Помогает разработчикам сохранить отступы, типографику, цвета, ассеты и адаптивное поведение из исходного дизайна.
Преобразуйте фреймы дашборда или рабочего процесса в переиспользуемые секции, которые подходят текущему приложению.
Реализуй этот компонент Figma в текущем проекте: [Figma URL]. Используй существующие компоненты и сопоставь результат со скриншотом.
Используй выбранный Figma desktop node, чтобы построить UI. Получи контекст дизайна и скриншот перед редактированием файлов.
Создай эту страницу Figma: [Figma URL]. Разбей ее на секции, переиспользуй компоненты проекта и проверь адаптивное поведение.
Преобразуй этот сложный поток Figma в переиспользуемые компоненты проекта: [Figma URL]. Сопоставь токены, задокументируй отклонения и проверь доступность.
Автор
figmaЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
a06681402992ceae98ba04d54cfd4ab004862696
Актуальность поддержки
18.07.2026
Использование
26 загрузок · 156 просмотров
Структура файлов
📄 SKILL.md
Автоматизируйте рабочие процессы Grasshopper
от AmemiyaLai
Моделирование в Grasshopper может требовать множества повторяющихся шагов с компонентами, соединениями и параметрами. Этот навык преобразует структурированные проектные заметки в исполняемые файлы рабочих процессов и локальные действия MCP.
Проектирование интерфейсов в стиле Apple
от BarisSozen
Современным продуктовым командам нужны согласованные и отточенные рекомендации по UI. Этот навык дает Claude, Codex и Claude Code практические правила в стиле Apple для типографики, цвета, отступов, компонентов, анимации и UX-ревью.
Создание согласованных интерфейсов базовых компонентов
от sickn33
Работа над UI может постепенно свестись к жестко заданным отступам, цветам и необработанным платформенным компонентам. Этот skill направляет Claude, Codex и Claude Code к использованию базовых компонентов, токенов и переиспользуемых макетов.
Улучшение процессов UI/UX-дизайна
от A-Genno
Работа над UI/UX часто отклоняется от курса, когда у команд нет общих принципов и привычек ревью. Этот навык дает Claude, Codex и Claude Code краткий чек-лист для принятия дизайн-решений.
Создавайте премиальные дизайн-системы Google Stitch
от leonxlnx
Типовые AI-экраны часто выглядят несогласованно, и их трудно дорабатывать. Этот навык превращает направление проекта в структурированный DESIGN.md, который направляет Google Stitch, Claude, Codex и Claude Code.
Research Winning Mobile App Patterns
от appllama
Mobile teams often design from isolated inspiration and miss the patterns that shape successful app journeys. This skill guides structured research of top-grossing apps, screens, flows, and UI elements before implementation.