Перейти к содержимому
Разработка и дизайн с ИИ
RU
Стать автором

Подключить WikiVibe MCP

Добавьте адрес сервера в настройки MCP или передайте этот промпт вашему AI-агенту.

URL
https://wikivibe.dev/mcp/
Промпт для агента
Подключи MCP-сервер WikiVibe.

URL: https://wikivibe.dev/mcp/
Transport: streamable-http

После подключения выполни tools/list и покажи доступные инструменты.

Поиск по WikiVibe

Недавние запросы

Популярные темы

Стать автором

Войдите или создайте аккаунт, чтобы заполнить профиль автора.

Войти или зарегистрироваться
СервисДизайн

Figma

Облачный инструмент дизайна интерфейсов: макеты, прототипы, компоненты и совместная работа команды.

figmadesignuiprototyping
Открыть сайт
Написать статью о Figma

Материалы о Figma

Новости
19.09.20266 мин

Figma связала макеты с Weave и обновила папки: что меняется в работе с вариациями

Figma node переносит реальный frame в Weave workflow, а новые папки упрощают навигацию по исходникам. Разбираем, где это полезно для брендированных кампаний и что пока не стоит автоматизировать.

FigmaFigma WeaveAI-дизайндизайн-процесс
Новости
04.09.20264 мин

Figma добавила управление прозрачностью через токены: как это упрощает дизайн-системы

В Figma теперь можно связать прозрачность цвета с числовой переменной, сохранив связь с библиотекой. Разбираем, где это убирает ручные правки — и чего обновление не решает.

Figmaдизайн-системыdesign tokensUX/UI
Новости
02.09.20265 мин

Figma открыла генеративные плагины и шейдеры: что теперь можно передать из канваса в React

Figma расширила генеративные плагины и шейдеры: публикация в Community и внутри организации, анимация, доступ к коду и работа через MCP. Разбираем практический сценарий и границы, за которыми всё ещё нужен инженерный контроль.

FigmaAI-дизайнMCPReact
Новости
31.08.20266 мин

Figma показала, как измерять влияние ИИ на дизайн — и почему одной метрики скорости мало

Figma описала методику, которая оценивает не только ускорение работы с ИИ, но и изменения в совместной работе, продуктах и инструментах. Разбираем, что из неё можно перенести в свою команду и где заканчиваются выводы исследования самого поставщика.

FigmaAIДизайнUX-исследования
Motion и анимация
16.07.202639 мин

Figma Motion + AI: 10 промптов, которые оживят макет и усилят портфолио

Статичный макет может быть аккуратным и визуально сильным, но всё равно ощущаться как набор картинок. Пользователь не видит, как карточка раскрывается, куда уходит старый контент и что происходит после нажатия. Заказчик смотрит на двенадцать фреймов и вынужден собирать продукт у себя в голове. Короткая анимация показывает иерархию, реакцию системы и характер продукта. В портфолио она отделяет «я нарисовал экран» от «я спроектировал поведение». А Figma Motion теперь позволяет собирать движение на таймлайне, генерировать ключевые кадры через Figma Agent и передавать точные параметры в разработку через MCP. Ниже — пошаговый процесс, десять универсальных промптов и отдельная копируемая инструкция для AI-агента: переходы между экранами, нажатия, hover, loading, success, error, reduced motion и обязательный QA. Главное ограничение одно: движение должно объяснять интерфейс, а не превращать его в презентацию, где летает каждый второй заголовок.

VibeDesignFigmaMotionAI
Новости
24.06.20265 мин

Figma Config 2026: канвас стал рабочей средой для кода, анимации и агентов

Figma провела Config 2026 в Moscone Center в Сан-Франциско. Дилан Филд вышел на сцену с одной идеей: канвас больше не место для макетов — это рабочая среда, в которой живут код, анимация, шейдеры и AI-агенты одновременно. Вот что показали.

FigmaConfig2026VibeDesignAI-дизайн
Дизайн-система и компоненты
14.06.202610 мин

Тёмная тема за один день — если ты правильно настроил переменные заранее

Есть два способа добавить тёмную тему. Первый: открываешь каждый компонент, меняешь цвета вручную, смотришь как половина рассыпается, переделываешь три дня, всё равно чтото пропускаешь. Второй: создаёшь Dark Mode в Figma Variables, задаёшь тёмные значения, переключаешь — всё обновляется за секунду. Один день вместо трёх.

дизайн-систематокеныFigmaворкфлоу
Дизайн-система и компоненты
14.06.20269 мин

Токены дизайна: почему без них продукт всегда выглядит по-разному

В команде три разработчика делают три разных раздела продукта. У каждого в голове «основной синий цвет бренда» — но у каждого своё понимание какой именно синий. Первый пишет 1A1A2E. Второй 1B1B30. Третий берёт пипеткой из Figma но промахивается на пиксель — получается 1A1C2E.

дизайн-систематокеныFigmaворкфлоу
Figma и макеты
10.06.20265 мин

Твой экран никто не читает. Вот почему — и как это поменять

Пользователи не читают экраны. Они их сканируют. Nielsen Norman Group провела масштабные исследования с айтрекингом: 232 участника, тысячи страниц. Вывод один — взгляд двигается по предсказуемым маршрутам и пропускает большую часть текста. Это значит, что текст, который вы тщательно выверяли, большинство пользователей просто не увидят. И красивый дизайн работает только если в нём правильно расставлены точки остановки для взгляда.

UXUIVibeDesignиерархия
Figma и макеты
10.06.20267 мин

7 ошибок в AI-дизайне, из-за которых тебя не возьмут на работу

С AI-инструментами дизайнеры начали делать больше — и допускать новый класс ошибок. Не те, что были раньше («забыл про состояния», «нет сетки»), а специфические: те, которые возникают именно из-за того, как работает генерация. Нанимающий менеджер их видит сразу — особенно если сам умеет работать с AI. Вот семь таких ошибок.

VibeDesignAI-дизайнFigmaпортфолио
Figma и макеты
11.06.202613 мин

Figma + Claude Code + React: дизайн-система своими руками — без платных курсов

Обычно дизайн-система живёт в двух местах, которые никак не связаны между собой. В Figma — компоненты, токены, правила. В коде — что-то похожее, но по-своему. Дизайнер обновил цвет кнопки — разработчик узнал об этом через неделю на ревью. Или не узнал вообще. Claude Code закрывает этот разрыв. Figma подключается к Claude как источник данных через MCP. Claude читает токены напрямую из дизайн-файла, генерирует React-компоненты точно по ним, может сам рисовать в Figma и писать в неё документацию. Это руководство — полный путь: от установки до задеплоенного прототипа из ваших компонентов. Кодить не нужно. Нужно уметь писать промпты. Важный момент: большинство шагов ниже — установка проекта, Git, структура папок, создание файлов — вам делать руками не обязательно. Claude Code умеет делать это сам по промпту. Шаги описаны подробно чтобы понимать что происходит, но в реальной работе достаточно написать агенту что нужно на выходе — и он разберётся сам.

Claude CodeVibeDesignFigmaReact
AI-инструменты дизайна
10.06.20269 мин

Я сделал рабочий экран за 58 минут с нуля и вот как

Раньше экран в Figma — это часа три минимум. Сначала ищешь референсы, потом строишь сетку, потом переставляешь компоненты, потом переделываешь, потому что «что-то не то». Сейчас это 58 минут от пустого холста до макета, который можно показывать. Это не «AI нарисует всё сам». Это конкретный воркфлоу, где ИИ закрывает рутину, а ты занимаешься решениями. Разберём по шагам — с промптами, таймингом и типичными граблями.

VibeDesignFigmaGoogle StitchFigma Make
AI-инструменты дизайна
10.06.20266 мин

Минимальный стек для дизайнера в 2026

Самая частая ошибка при переходе на AI-дизайн — попытка собрать полный стек сразу. Stitch, Figma Make, v0, Lovable, Framer, Midjourney, Reve, плюс ещё пять инструментов «на попробовать» — и в итоге не используется ничего нормально. Дизайн в 2026 — это не одна задача, это пять: исследование, идея, генерация, полировка, хендофф. Ни один инструмент не закрывает все пять хорошо. Минимальный стек — это по одному сильному инструменту на фазу, не больше.

stacktoolsFigmaGoogle-Stitch
AI-инструменты дизайна
10.06.20266 мин

Что такое VibeDesign и чем он отличается от классического дизайна

В начале 2025 года исследователь Андрей Карпати написал твит про «вайбкодинг» — подход, при котором ты полностью доверяешь AI реализацию и перестаёшь думать о том, как именно работает код. Твит набрал 4,5 миллиона просмотров. К марту 2026 та же идея добралась до дизайна — и получила имя. VibeDesign — это не инструмент и не тренд. Это сдвиг в том, с чего начинается работа над интерфейсом.

AI DesignVibeDesignGoogle StitchFigma
AI-инструменты дизайна
10.06.20267 мин

Stitch + Figma: как работает связка, которую уже используют все нормальные команды

Есть два типа дизайнеров в 2026 году. Первые спорят — убьёт ли Stitch Figma. Вторые пока спорят — уже сделали три проекта за неделю, используя оба инструмента вместе. Stitch и Figma не конкуренты. Это две части одного конвейера, и чем раньше это понять, тем быстрее становится работа.

Google-StitchFigmaworkflowAI Design

Скиллы для агентов

  • Figma Context MCP

    Figma Context MCP — автоматизация для AI-агента: помогает быстрее понять задачу, выбрать подходящий workflow и не собирать инструкцию с нуля. Подходит для проектов со стеком TypeScript, ai, cursor. Исходники: GLips/Figma-Context-MCP.

  • awesome claude design

    awesome claude design — разработка для AI-агента: помогает быстрее понять задачу, выбрать подходящий workflow и не собирать инструкцию с нуля. Подходит для проектов со стеком claude code, claude design, design md. Исходники: VoltAgent/awesome-claude-design.

Макеты

  • Дизайн-токены: Color Contrast Checker

    Дизайн-токены: Color Contrast Checker — бесплатный open-source набор дизайн-токенов из GitHub (incluud/color-contrast-checker). Стек: Astro, Figma, Expo. подходит для переноса цветов, типографики, spacing и тем в продуктовую дизайн-систему.

  • Дизайн-токены: Themekit

    Дизайн-токены: Themekit — бесплатный open-source набор дизайн-токенов из GitHub (isamercan/ThemeKit). Стек: Figma, Swift. подходит для переноса цветов, типографики, spacing и тем в продуктовую дизайн-систему.

  • Дизайн-токены: Chinese Color Atlas

    Дизайн-токены: Chinese Color Atlas — бесплатный open-source набор дизайн-токенов из GitHub (chroma-cathy/chinese-color-atlas). Стек: Tailwind CSS, Figma, CSS. подходит для переноса цветов, типографики, spacing и тем в продуктовую дизайн-систему.

Каталог тем

Автономные агенты
12.10.20267 мин

Распределённый интеллект: кому будет подчинена сеть

ИИ перестаёт быть сервисом и становится инфраструктурой, а интернет — единым распределённым интеллектом. Разбираю, как это уже происходит и почему у такой системы может не оказаться одного хозяина.

ИИавтономные агентыинфраструктурараспределённые системы
Рабочее место
11.10.202614 мин

Просто пробуй всё. Как я пришёл к вайб-кодингу

Я художник, не программист. Прошёл путь от кусков кода в Gemini до восьми проектов в продакшене, OMP, Orca, русского языка для Orca и плагина, который подключает WikiVibe API к семи CLI-агентам. Почему не стоит искать «лучший» инструмент и с чего начать.

вайб-кодингAI-агентыOrcaOMP
Новости
20.09.20268 мин

Awwwards MCP: как AI-агенту искать референсы и проверять web-дизайн

Новый open-source MCP-сервер собирает для AI-агента референсы с Awwwards, показывает скриншоты, палитры и структуру страниц. Разбираем рабочий процесс, ограничения лицензий и границу между исследованием и копированием.

MCPAI-агентыдизайн-референсыUX/UI
Новости
19.09.20266 мин

Figma связала макеты с Weave и обновила папки: что меняется в работе с вариациями

Figma node переносит реальный frame в Weave workflow, а новые папки упрощают навигацию по исходникам. Разбираем, где это полезно для брендированных кампаний и что пока не стоит автоматизировать.

FigmaFigma WeaveAI-дизайндизайн-процесс
Новости
04.09.20264 мин

Figma добавила управление прозрачностью через токены: как это упрощает дизайн-системы

В Figma теперь можно связать прозрачность цвета с числовой переменной, сохранив связь с библиотекой. Разбираем, где это убирает ручные правки — и чего обновление не решает.

Figmaдизайн-системыdesign tokensUX/UI
GitHub
04.09.202610 мин

browser-use: библиотека, которая превращает браузер в инструмент AI-агента

Разбираем browser-use — открытую (MIT) Python-библиотеку и CLI-скилл, которые позволяют LLM-агенту кликать, печатать и заполнять формы в реальном браузере. Установка, примеры кода, кастомные инструменты, структурированный вывод и работа с чувствительными данными.

browser-useai-agentpython
Новости
02.09.20265 мин

Figma открыла генеративные плагины и шейдеры: что теперь можно передать из канваса в React

Figma расширила генеративные плагины и шейдеры: публикация в Community и внутри организации, анимация, доступ к коду и работа через MCP. Разбираем практический сценарий и границы, за которыми всё ещё нужен инженерный контроль.

FigmaAI-дизайнMCPReact
Новости
01.09.20264 мин

Runway Solaris: интерфейс, который генерируется в реальном времени — и почему это пока не замена веб-разработке

Runway показала Solaris — исследовательскую модель, которая создаёт интерфейс и реакцию на действия пользователя кадр за кадром. Идея меняет разговор о прототипах и бренд-опыте, но пока не подходит для ответственных продуктовых сценариев.

RunwayAI-дизайнUXгенеративный интерфейс
Новости
31.08.20266 мин

Figma показала, как измерять влияние ИИ на дизайн — и почему одной метрики скорости мало

Figma описала методику, которая оценивает не только ускорение работы с ИИ, но и изменения в совместной работе, продуктах и инструментах. Разбираем, что из неё можно перенести в свою команду и где заканчиваются выводы исследования самого поставщика.

FigmaAIДизайнUX-исследования
Motion и анимация
30.08.202619 мин

AI-видеоредакторы, управляемые через Codex и Claude Code

Какие видеоредакторы можно управлять из кодинг-агента: MCP-серверы к Premiere, Final Cut, DaVinci Resolve и After Effects, агентные редакторы video-use, Pireel, OpenChatCut, kinocut, code-first движки Remotion и Revideo. Сравнение, установка, ограничения

ВидеомонтажMCPClaudeRemotion
Рабочее место
30.08.20269 мин

Orca (stablyai/orca) — ADE для оркестрации флота параллельных AI-агентов

Полный разбор Orca от Stably: что это, как работает оркестрация агентов в git worktree, параллельные воркспейсы, мобильное приложение и Design Mode, чем Orca лучше и хуже конкурентов, установка и отзывы.

OrcaAI-АгентыОркестрация
Автономные агенты
30.08.202619 мин

Что такое ИИ-агенты и как они работают: понятное руководство для бизнеса

Простыми словами объясняем, что такое ИИ-агенты, чем они отличаются от чат-ботов и оркестраторов, где ошибаются и почему делать из агента «сотрудника» рискованно. С примерами и чек-листом для бизнеса.

АгентыБизнесИИ-Сотрудники
GitHub
29.08.202610 мин

ChatGPT-подписка в Codex: разбор codex-chatgpt-web и codex-with-chatgpt

Два рабочих GitHub-проекта — miuuyy/codex-chatgpt-web и XiaoDuoYa/codex-with-chatgpt — задействуют веб-подписку ChatGPT внутри Codex, но разными способами: один подставляет ChatGPT как модель, второй делает ChatGPT мозгом-планировщиком. Разбираем архитектуру, установку, отличия и риски.

CodexChatGPTGithub