content(ai-assistant-figma): сократил местоимения
This commit is contained in:
1 parent
03a8e73ea6
commit
c8a9c82bfa
2 files changed
+26
-26
No files matched your search
@@ -419,22 +419,22 @@
|
||||
<p class="case-page__sub">Мост между Cursor IDE и Figma для создания и запуска скриптов</p>
|
||||
|
||||
<p class="section__prose">
|
||||
Я каждый день работал в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а сложные задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
|
||||
Рабочие будни проходили в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
|
||||
</p>
|
||||
|
||||
<h2 id="context">Контекст</h2>
|
||||
<p class="section__prose">
|
||||
Плагин я делал для себя. Я уже использовал LLM для разных задач и писал с их помощью скрипты для Figma. Код создавал в Cursor, а для запуска раньше приходилось переносить его в Figma вручную. Сам писать код плагина и скриптов я не умел, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
|
||||
Плагин я делал для себя. LLM уже помогали создавать скрипты для Figma. Код готовил в Cursor, а для запуска переносил в Figma вручную. Навыков самостоятельного написания кода плагинов и скриптов не хватало, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
|
||||
</p>
|
||||
|
||||
<h2 id="task">Задача</h2>
|
||||
<p class="section__prose">
|
||||
Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
|
||||
Задача состояла в том, чтобы убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагину предстояло связать Cursor с Figma, дать возможность повторно запускать сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
|
||||
</p>
|
||||
<aside class="case-callout" data-callout>
|
||||
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
|
||||
<div class="case-callout__content">
|
||||
<p>Я мог добавлять в каталог скрипты под разные задачи и запускать их прямо в Figma.</p>
|
||||
<p>Каталог позволял добавлять скрипты под разные задачи и запускать их прямо в Figma.</p>
|
||||
</div>
|
||||
</aside>
|
||||
<figure class="case-media case-media--real">
|
||||
@@ -451,7 +451,7 @@
|
||||
|
||||
<h2 id="solution">Решение</h2>
|
||||
<p class="section__prose">
|
||||
Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma.
|
||||
Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт был готов, достаточно было открыть плагин и нажать «Выполнить». Код автоматически передавался в Figma.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -465,7 +465,7 @@
|
||||
<figcaption>Экран скрипта перед запуском в Figma.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Сохранённые сценарии можно запускать из каталога и без Cursor. Я использовал готовые скрипты чаще, чем создавал новые.
|
||||
Готовые сценарии запускал чаще, чем создавал новые. Из каталога их можно было запускать и без Cursor.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -479,7 +479,7 @@
|
||||
<figcaption>Меню дополнительных действий со скриптом.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью.
|
||||
Для более точных ответов модели плагин копировал данные о выбранной ноде или целой странице. Этот контекст можно было передать LLM вместе с запросом.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -493,7 +493,7 @@
|
||||
<figcaption>Панель управления скриптом с переключателем Live.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Логи выполнения мог читать LLM-бот в Cursor. Если дело было не в ошибке, а в логике скрипта, я разбивал его на небольшие шаги и запускал их по очереди. Сначала проверял сценарий на отдельном файле, а если всё работало, пробовал в рабочем макете.
|
||||
Логи выполнения мог читать LLM-бот в Cursor. Логические ошибки разбирал по шагам: делил сценарий на части и запускал их по очереди. Сначала проверял скрипт в отдельном файле, а после успешного теста пробовал в рабочем макете.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -521,7 +521,7 @@
|
||||
<aside class="case-callout" data-callout>
|
||||
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
|
||||
<div class="case-callout__content">
|
||||
<p>По моей оценке, на задачу вручную уходило от 1 до 30 минут. Запустить сценарий теперь можно было одним нажатием.</p>
|
||||
<p>На ручное выполнение отдельной задачи уходило от 1 до 30 минут. Это оценка, отдельную статистику не собирал. Теперь скрипт запускался одним нажатием.</p>
|
||||
</div>
|
||||
</aside>
|
||||
<figure class="case-media case-media--real">
|
||||
@@ -536,10 +536,10 @@
|
||||
<figcaption>Индикатор активного выполнения скрипта.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц.
|
||||
Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также помогали обновлять цветовые токены после ручных изменений и собирать структуру файла дизайн-системы с множеством страниц.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся.
|
||||
Были и другие задачи: добавлял варианты компонентов, сохранял набор токенов из JSON в текстовом слое или собирал прототип с переходами по клавиатуре. Подсветку кода в макете тоже автоматизировал скриптом, чтобы нагляднее показать идею и подобрать цвета синтаксиса. Вручную за такую работу не взялся бы.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<div class="case-video-shell">
|
||||
@@ -552,12 +552,12 @@
|
||||
<figcaption>Сборка формы из компонентов дизайн-системы по референсу с помощью скрипта.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции.
|
||||
За время работы лучше разобрался в Figma Plugin API. Теперь при планировании заранее учитываю, какие действия можно скриптовать, чтобы не тратить время на рутину.
|
||||
</p>
|
||||
|
||||
<h2 id="next-steps">Планы</h2>
|
||||
<p class="section__prose">
|
||||
Дальше я хочу убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
|
||||
Дальше планирую убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы.
|
||||
|
||||
@@ -106,22 +106,22 @@
|
||||
<p class="case-page__sub">Мост между Cursor IDE и Figma для создания и запуска скриптов</p>
|
||||
|
||||
<p class="section__prose">
|
||||
Я каждый день работал в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а сложные задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
|
||||
Рабочие будни проходили в Figma: проектировал сайты и приложения, использовал плагины, а когда готовых решений не хватало, делал свои. Со временем заметил, сколько времени уходит на повторяющиеся действия. Рутину вроде организации слоёв хотелось отдать скриптам, а задачи, которые вручную казались неподъёмными, так и оставались в списке на потом.
|
||||
</p>
|
||||
|
||||
<h2 id="context">Контекст</h2>
|
||||
<p class="section__prose">
|
||||
Плагин я делал для себя. Я уже использовал LLM для разных задач и писал с их помощью скрипты для Figma. Код создавал в Cursor, а для запуска раньше приходилось переносить его в Figma вручную. Сам писать код плагина и скриптов я не умел, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
|
||||
Плагин я делал для себя. LLM уже помогали создавать скрипты для Figma. Код готовил в Cursor, а для запуска переносил в Figma вручную. Навыков самостоятельного написания кода плагинов и скриптов не хватало, поэтому по ходу работы изучал документацию и API плагинов Figma, а правила генерации скриптов в Cursor постоянно уточнял.
|
||||
</p>
|
||||
|
||||
<h2 id="task">Задача</h2>
|
||||
<p class="section__prose">
|
||||
Я хотел убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагин должен был связать Cursor с Figma, дать возможность повторно запускать уже созданные сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
|
||||
Задача состояла в том, чтобы убрать ручной перенос кода и запускать скрипты прямо из Figma. Плагину предстояло связать Cursor с Figma, дать возможность повторно запускать сценарии и быстро копировать для LLM контекст выбранного объекта или страницы.
|
||||
</p>
|
||||
<aside class="case-callout" data-callout>
|
||||
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">💡</span>
|
||||
<div class="case-callout__content">
|
||||
<p>Я мог добавлять в каталог скрипты под разные задачи и запускать их прямо в Figma.</p>
|
||||
<p>Каталог позволял добавлять скрипты под разные задачи и запускать их прямо в Figma.</p>
|
||||
</div>
|
||||
</aside>
|
||||
<figure class="case-media case-media--real">
|
||||
@@ -138,7 +138,7 @@
|
||||
|
||||
<h2 id="solution">Решение</h2>
|
||||
<p class="section__prose">
|
||||
Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт готов, я открываю плагин и нажимаю «Выполнить». Код автоматически передаётся в Figma.
|
||||
Локальный сервер и WebSocket связали Cursor с плагином. Когда скрипт был готов, достаточно было открыть плагин и нажать «Выполнить». Код автоматически передавался в Figma.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -152,7 +152,7 @@
|
||||
<figcaption>Экран скрипта перед запуском в Figma.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Сохранённые сценарии можно запускать из каталога и без Cursor. Я использовал готовые скрипты чаще, чем создавал новые.
|
||||
Готовые сценарии запускал чаще, чем создавал новые. Из каталога их можно было запускать и без Cursor.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -166,7 +166,7 @@
|
||||
<figcaption>Меню дополнительных действий со скриптом.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Чтобы LLM точнее понимала макет, плагин копирует информацию о выбранной ноде или целой странице. Эти данные я использовал в диалоге с моделью.
|
||||
Для более точных ответов модели плагин копировал данные о выбранной ноде или целой странице. Этот контекст можно было передать LLM вместе с запросом.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -180,7 +180,7 @@
|
||||
<figcaption>Панель управления скриптом с переключателем Live.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Логи выполнения мог читать LLM-бот в Cursor. Если дело было не в ошибке, а в логике скрипта, я разбивал его на небольшие шаги и запускал их по очереди. Сначала проверял сценарий на отдельном файле, а если всё работало, пробовал в рабочем макете.
|
||||
Логи выполнения мог читать LLM-бот в Cursor. Логические ошибки разбирал по шагам: делил сценарий на части и запускал их по очереди. Сначала проверял скрипт в отдельном файле, а после успешного теста пробовал в рабочем макете.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<img
|
||||
@@ -208,7 +208,7 @@
|
||||
<aside class="case-callout" data-callout>
|
||||
<span class="case-callout__emoji case-callout__emoji--pulse" aria-hidden="true">✅</span>
|
||||
<div class="case-callout__content">
|
||||
<p>По моей оценке, на задачу вручную уходило от 1 до 30 минут. Запустить сценарий теперь можно было одним нажатием.</p>
|
||||
<p>На ручное выполнение отдельной задачи уходило от 1 до 30 минут. Это оценка, отдельную статистику не собирал. Теперь скрипт запускался одним нажатием.</p>
|
||||
</div>
|
||||
</aside>
|
||||
<figure class="case-media case-media--real">
|
||||
@@ -223,10 +223,10 @@
|
||||
<figcaption>Индикатор активного выполнения скрипта.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах я часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также обновляли цветовые токены после ручных изменений и помогали собрать файл дизайн-системы с множеством страниц.
|
||||
Высвободившееся время позволяло браться за более сложные рабочие сценарии. В рабочих файлах часто запускал скрипт, который сводил векторные иконки через flatten для корректного отображения в продакшене. Другой превращал фрейм в компонент, создавал его инстанс и переносил мастер-компонент в заданное место на странице компонентов. Скрипты также помогали обновлять цветовые токены после ручных изменений и собирать структуру файла дизайн-системы с множеством страниц.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Были и другие задачи: добавить варианты компонентов, сохранить набор токенов из JSON в текстовом слое или собрать прототип с переходами по клавиатуре. Я автоматизировал и подсветку кода в макете, чтобы показать идею и подобрать цвета синтаксиса. Вручную я бы за это не взялся.
|
||||
Были и другие задачи: добавлял варианты компонентов, сохранял набор токенов из JSON в текстовом слое или собирал прототип с переходами по клавиатуре. Подсветку кода в макете тоже автоматизировал скриптом, чтобы нагляднее показать идею и подобрать цвета синтаксиса. Вручную за такую работу не взялся бы.
|
||||
</p>
|
||||
<figure class="case-media case-media--real">
|
||||
<div class="case-video-shell">
|
||||
@@ -239,12 +239,12 @@
|
||||
<figcaption>Сборка формы из компонентов дизайн-системы по референсу с помощью скрипта.</figcaption>
|
||||
</figure>
|
||||
<p class="section__prose">
|
||||
За время работы я лучше разобрался в Figma Plugin API. Теперь при планировании заранее замечаю, какие действия можно скриптовать, чтобы не тратить время на повторяющиеся операции.
|
||||
За время работы лучше разобрался в Figma Plugin API. Теперь при планировании заранее учитываю, какие действия можно скриптовать, чтобы не тратить время на рутину.
|
||||
</p>
|
||||
|
||||
<h2 id="next-steps">Планы</h2>
|
||||
<p class="section__prose">
|
||||
Дальше я хочу убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
|
||||
Дальше планирую убрать Cursor из рабочего процесса и общаться с LLM-агентами прямо в Figma. В зависимости от задачи агент сможет подготовить переиспользуемый скрипт или выполнить действие по текстовой команде.
|
||||
</p>
|
||||
<p class="section__prose">
|
||||
Сейчас готово только окно интерфейса. Работа с агентами и запуск действий пока не реализованы.
|
||||
|
||||
Reference in new issue
Block a user