מתוך Figma לאתר חי · המדריך המלא לחיבור Figma ל-Claude Code.

תארו לעצמכם את שיטת העבודה הישנה: מעצב בונה מסכים בפיגמה, שולח למפתח, המפתח כותב קוד, חוזרים עם פידבק, המפתח מתקן, עוד פידבק, פיקסל פה, צבע שם. שבועות של פינג-פונג ועשרות אלפי שקלים על אתר אחד. העולם זז. ב-2026 הקלוד יודע לקרוא ישירות מקובץ פיגמה. העיצוב הופך מתמונה סטטית הוראה שה-AI מבצע. אתם נשארים מעצבים. אתם לא צריכים להבין קוד. אתם לא תלויים במפתח. הקלוד הוא הצד השלישי שלכם · עובד 24/7 בלי שתרגישו לא נעים. המדריך הזה תמצית של מפגש 19 של מועדון AI Master עם אביבית בלומשטיין. נראה איך מחברים את פיגמה לקלוד דרך MCP, איזה סוכנים מותאמים אישית הופכים את התהליך למקצועי, אילו חוקי ברזל בעיצוב פיגמה גורמים לקלוד לפלוט קוד מדויק, ואיך פורסים את התוצאה ל-Vercel עם דומיין משלכם.

מה יהיה לכם בסוף המדריך

• חיבור MCP חי בין Claude Code לחשבון הפיגמה שלכם · קלוד קורא קבצים ישירות, לא מנחש
• API Token מוגדר בצורה מאובטחת · לא חשוף בצ'אט, נשמר ב-.env
• סוכנים מותאמים אישית · Copywriter, Critic, Developer, Launcher · משרד עיצוב שלם בלי משכורות
• חוקי ברזל לעיצוב פיגמה שגורמים לקלוד לתרגם 1:1 · Auto Layout, Variables, פריימים נכונים
• תהליך סנכרון דו-כיווני · שינוי בפיגמה מתעדכן בקוד, וההפך, דרך סוכן Design Sync
• אתר חי באוויר · Localhost → GitHub → Vercel → דומיין משלכם

למה זה משנה · הפער בין מעצב למפתח נסגר

שלב 1 · 3 התקנות בסיס לפני שמתחילים

חשבון Figma בתשלום

Professional ומעלה · חינמי לא מאפשר MCP

החשבון החינמי של פיגמה לא מאפשר חיבור MCP. צריך לפחות מנוי Professional. אם אתם רק רוצים להתנסות · אפשר להתחיל בתקופת ניסיון. אם אתם כבר עובדים עם פיגמה · בודקים בהגדרות שיש לכם את הסוג הנכון של החשבון.

טיפ לסוכנים: אם חשבון החברה שלכם הוא Professional · בקשו מהאדמין להוסיף אתכם. אין צורך לרכוש מנוי אישי בנפרד.

Node.js

המנוע שמריץ את הכל מתחת למכסה המנוע

Node.js היא סביבת הריצה של JavaScript. תחשבו עליה כעל מתרגם · היא לוקחת את הקוד שקלוד כותב, מריצה אותו ישירות על המחשב שלכם (לא בדפדפן), ומאפשרת להריץ אתר ב-localhost לפני שעולה לאוויר. ההתקנה לוקחת שתי דקות, חינמית, וצריך לעשות אותה פעם אחת.

טיפ לסוכנים: בוחרים את גרסת LTS (השמאלית) · יציבה יותר. אחרי ההתקנה · פותחים טרמינל ומקלידים `node -v`. אם רואים מספר גרסה · עובד.

Claude Code Desktop

הגישה הנוחה והעוצמתית · לא דפדפן

אל תעבדו ב-Claude בדפדפן. צריך את אפליקציית הדסקטופ של Claude Code. רק הגרסה הזו יכולה לגשת לתיקיות במחשב שלכם, להתחבר ל-MCP, להריץ קוד מקומית. הגרסה הוובית טובה לאוטומציות עם Gmail או Drive · אבל לא לפיתוח.

טיפ לסוכנים: אחרי ההתקנה · נכנסים לחשבון Claude Pro (20 דולר/חודש) או Max (100 דולר/חודש). הסדנה והמדריכים הקיימים עובדים על Pro.

💡 Claude Code לעומת Claude Cowork לעומת Claude Design · כולם מבוססים על אותו מנוע (Opus / Sonnet). Cowork זו גרסה מעוקרת ונחמדה. Claude Design הוא ממשק אונליין יפה אבל יקר (טוקנים נפרדים, יכולים לרוץ ל-300 דולר). Claude Code עושה את כל היכולות של שלושתם · ויש לו גישה מלאה לדסקטופ ולפיגמה דרך MCP. אם מתרגלים לעבוד איתו · לא חוזרים.

שלב 2 · רגע, מה זה פיגמה?

🧰 לא יודעים להשתמש בפיגמה? אין סטרס. בסוף המדריך יש קוד QR לקהילת המעצבים של אביבית · 'פורטפוליו לב'. אבל גם בלי לדעת לעצב · אפשר להיכנס ל-Figma Community, להוריד תבנית מוכנה (Portfolio, Dashboard, Landing Page), ולחבר אותה ישירות לקלוד.

שלב 3 · יצירת API Token בפיגמה (5 דקות)

איך מייצרים את הטוקן · שלב אחר שלב

• נכנסים ל-Figma (דפדפן או דסקטופ), לוחצים על האווטר שלכם · Settings
• לשונית Security · גוללים למטה עד Personal Access Tokens
• Generate new token · נותנים שם משמעותי (למשל 'Claude MCP')
• Expiration · בוחרים 90 ימים (המקסימום הקיים). הקלוד יתריע כשצריך לחדש
• סקופים (הרשאות) · מאשרים את אלה: File content (Read), File metadata, Library content (Read), Library assets (Read), Variables (Read), Design system (Read)
• לא מאשרים את אלה: File comments (Write), Webhooks · עדיף לא לתת לקלוד הרשאות כתיבה למסמכים שמשותפים עם אחרים
• לוחצים Generate token · מקבלים מחרוזת ארוכה של אותיות ומספרים. מעתיקים אותה למקום בטוח · לא רואים אותה שוב

רוצים לשלוט ב-Claude Code מאפס?

המדריך הזה נתן לכם את הבסיס. בסדנת Claude Code המלאה בונים יחד שלב אחר שלב: התקנה, CLAUDE.md, סקילים, סוכנים ואתר חי באוויר. 4 מפגשים מוקלטים, גישה לכל החיים.

⚠️ אזהרת בטחת מידע · הטוקן הזה הוא צ'ק פתוח. אל תזרקו אותו ל-chat של קלוד! אל תשמרו אותו בקובץ רגיל! אל תשלחו אותו במייל! הדרך הנכונה: שמים אותו רק ב-Terminal (פעם אחת) או בקובץ .env שקלוד יוצר עבורכם. אם הטוקן דלף · נכנסים מיד ל-Settings → Security → Revoke.

שלב 4 · חיבור MCP · הגשר בין קלוד לפיגמה

פקודת ה-MCP להזנה בטרמינל (דוגמה · תקבלו את הגרסה שלכם מהפיגמה)

claude mcp add figma-developer-mcp -- npx -y figma-developer-mcp --figma-api-key=YOUR_TOKEN_HERE --stdio

איך מריצים את הפקודה בלי לחשוף את הטוקן

• בקלוד דסקטופ · פותחים את הטרמינל הפנימי (Cmd+J ב-Mac, Ctrl+J ב-Windows)
• מעתיקים את הפקודה מהפיגמה. ב-YOUR_TOKEN_HERE · מחליפים בטוקן שיצרתם בשלב 3
• מדביקים בטרמינל. לוחצים Enter
• מחכים שתופיע השורה: 'Installed', 'Registered', 'Connected'
• אם משהו נכשל · עושים צילום מסך של ההודעה ושולחים בצ'אט לקלוד. הוא ידע לתקן
• בודקים שעובד · שואלים את קלוד: 'תסביר לי את הסטטוס של ה-MCP'. אם הוא יודע לרשום את כל ה-tools של figma-developer-mcp · עובד

🔒 ההבדל בין Connector ל-MCP · בקלוד יש Connectors מוכנים לפיגמה (דרך Customize). הם נותנים גישה בסיסית. ה-MCP הרשמי מהפיגמה נותן גישה הרבה יותר רחבה: קריאה מלאה של מבנה הקובץ, של ה-Variables, של הקומפוננטות. אם אתם רציניים · MCP. אם אתם רק מסתכלים · Connector מספיק.

שלב 5 · המרה ראשונה · מקובץ פיגמה לאתר חי

התהליך מקצה לקצה

• פיגמה · פותחים את הקובץ שרוצים להמיר. עוברים ל-Dev Mode. עושים Share → Copy Link
• קלוד · יוצרים תיקיית פרויקט חדשה (לדוגמה 'portfolio'), פותחים session חדש
• מדביקים את הקישור לפיגמה ומסבירים בעברית: 'אני רוצה להפוך את הדבר היפה הזה לאתר חי. תעבוד עם הסוכן Figma Implement Design'
• קלוד קורא את הקובץ, סורק את הליירס, בונה את העץ של הקוד · React/HTML/CSS
• פותח Localhost · נותן לכם URL (לרוב http://localhost:3000) ופותח preview בצד
• אתם רואים את האתר חי. רספונסיב במובייל, עם hover states, עם כל הדקויות. תוך 20–30 דקות

🎯 בלי סוכן · קלוד יבנה אתר, אבל הוא יהיה גנרי. סוכנים מקצועיים (שלב הבא במדריך) הם ההבדל בין 'אתר שנראה כמו AI בנה אותו' לבין 'אתר שנראה כמו מעצב מקצועי עיצב אותו'.

שלב 6 · 4 הסוכנים שהופכים את התהליך למקצועי

Copywriter

כותב בקול שלכם · לא בקול של AI

סוכן שמכיר את הטון שלכם · איך אתם כותבים כותרות, איזה מילים אתם נמנעים מהן, איך נראה CTA טיפוסי באתר שלכם. דינמי · משתפר כל סשן. אפשר ליצור גרסה אחרת לכל פרויקט · גרסה ל-Personal Brand וגרסה לחברה.

Совет агентам: этот агент обновляется после каждого сеанса. Завершили проект, в котором вам понравился микрокопирайтинг, скажите Клоду: «Сохрани этот тон в Copywriter Agent».

Полный воркшоп Claude Code объединяет всё в одном месте: установка, навыки, агенты и создание сайтов. 4 записанных урока навсегда.

Critic

Автоматическая проверка дизайна перед запуском.

После того как сайт готов, этот агент проверяет его: визуальную иерархию, адаптивность, доступность, соответствие дизайн-системе и контрастность по стандарту WCAG. Вместо того чтобы проверять вручную, Клод говорит вам точно, что и где исправить.

Developer (Figma Implement Design)

Конвертирует дизайн в код, мозг процесса.

Главный агент. Получает ссылку на Figma, сканирует файл, строит код компонент за компонентом, с точным CSS 1:1 под дизайн. Поддерживает автоматизацию адаптивности, если файл собран с правильным Auto Layout.

Совет агентам: Авивит дарит этого агента сообществу. Он будет отправлен через саммари встречи в клуб.

Launcher

Загружает код с Localhost в сеть.

Завершили работу локально? Этот агент пушит код в GitHub, автоматически подключает к Vercel, разворачивает онлайн и возвращает публичный URL. Всё это без вашего участия в DevOps. Вместо 5 ручных действий одно предложение.

🤖 Бонус · Design Sync. Пятый агент, о котором упоминает Авивит. Когда сайт уже работает, а вы меняете что-то в Figma (клиент попросил обновить цвет), этот агент синхронизирует изменения в коде. Двусторонняя связь. Figma не умирает после первой конвертации, а продолжает жить рядом с кодом.

Шаг 7 · 5 железных правил дизайна в Figma

Правила без компромиссов.

• **Auto Layout везде** · Вместо того чтобы размещать элементы вручную, используйте Auto Layout. Так Клод умеет создавать автоматическую адаптивность. На мобилках элементы будут вставать друг под друга, не ломая дизайн
• **Осмысленные имена слоев** · Никаких Frame 1 и Group 2. Кнопка называется Button-Primary, блок Hero называется Section-Hero. Клод путается в общих названиях и выдает запутанный код
• **Variables для цветов, шрифтов и отступов** · Вместо того чтобы везде писать #FF6B00, создайте переменную color/primary и используйте ее. Клод переведет это в CSS Variables, и сайт можно будет глобально редактировать в одну строчку
• **Frame, а не Group** · Всегда используйте Frames (нажатие клавиши F). Group это старая структура, которую Клод читает плохо. Frame дает всю мощь: гибкость, Auto Layout, адаптивность
• **Иконки как SVG или Component** · Если это иконка, либо импортируйте ее как SVG (векторный формат, который не пикселизуется), либо сделайте из нее Component. PNG иконки заставит Клода построить картинку, а не чистый код, и сайт получится тяжелее и менее гибким

📚 Дизайн сделан без Auto Layout? Не страшно. Есть навык под названием Strap Grid Builder, который умеет переводить дизайн без Auto Layout в хорошую адаптивную верстку. Это хорошая отправная точка, но исходник лучше.

Шаг 8 · Нет готового дизайна? Figma Community

Figma Community

Тысячи бесплатных и доступных шаблонов дизайна.

Огромная библиотека шаблонов: UI Kits, панели управления, мобильные приложения, лендинги, иконки, иллюстрации. Большинство бесплатны. Нажимаете на шаблон, Open in Figma, шаблон копируется в ваш аккаунт, вы его редактируете и передаете Клоду.

Совет агентам: в поиске фильтруйте по Free. Стоит просмотреть рейтинги сообщества: шаблон с 50 тысячами скачиваний, скорее всего, отлично структурирован.

Хотите освоить Claude Code с нуля?

Это руководство дало вам базу. На полном воркшопе Claude Code мы строим всё шаг за шагом: установка, CLAUDE.md, навыки, агенты и живой сайт онлайн. 4 записанных урока, пожизненный доступ.

Шаг 9 · С Localhost в сеть · GitHub + Vercel

Команды для Клода: копировать и вставлять.

• Создай мне приватный репозиторий на GitHub и запушь код
• Подключи этот репозиторий к Vercel и разверни в Production
• У меня есть домен avivit-portfolio.com, купленный на Cloudflare. Подключи его к проекту и обнови DNS-записи
• Добавь на сайт Google Analytics 4 и подключи мой Property ID

💰 Объедините 3 инструмента: GitHub бесплатен, Vercel бесплатен (до 100 ГБ трафика в месяц), Figma Professional это единственная платная часть. Если у вас есть воркшоп и клуб, окупаемость первого сайта возвращает затраты в 50 раз.

Частые вопросы с мастер-класса.

Вряд ли в ближайшее время. Claude Design это инструмент дизайна на сайте Claude (не на десктопе). Он красивый, быстрый и умеет делать базовый дизайн, но сильно ограничен. Его токены отдельны от Claude Code, стоят дорого и быстро заканчиваются. Авивит потратила 300 долларов на одном аккаунте. Тот, кто работает с Claude Code на десктопе, получает те же результаты без лишних затрат. Figma остается профессиональным стандартом для сложного дизайна.

Да, но с одним отличием: вместо создания дизайна в Figma вы заходите в Figma Community, скачиваете готовый шаблон (портфолио, дашборд, лендинг), правите тексты с картинками и подключаете к Клоду. Авивит также предлагает попросить Клода: «Давай вместе построим дизайн-систему». Вы даете ему картинки, мудборд, идеи, и Клод создает базу.

Навык это конкретное умение: редактирование видео, тексты на иврите, проверка доступности. Клод задействует его при необходимости. Агент (Sub-Agent) это сущность с полноценным мозгом, которая умеет выполнять серию действий, принимать решения и запускать другие навыки. В связке Figma + Code агент Developer может одновременно использовать навыки CSS Optimization, Accessibility и OKLCH Colors. Новичок использует навыки. Профессионал строит агентов.

Авивит тестировала работу и без агентов, результаты были хуже. Агенты дают суперсилы: каждый обучен под конкретную задачу, знает, как вы хотите мыслить, и работает согласованно с остальными. Первичные инвестиции в 2–3 часа на создание агента окупаются, после чего он работает на вас вечно.

Шаг за шагом: 1) Убедитесь, что ваш аккаунт Figma платный. 2) Убедитесь, что установлен Node.js, введите в терминале node -v и увидите номер версии. 3) Убедитесь, что токен действителен, если прошло 90 дней, сгенерируйте новый. 4) Сделайте скриншот ошибки терминала и отправьте в чат Клоду. Он умеет распознавать 95% неполадок.

Нет. Есть два пути: 1) Редактировать дизайн прямо в Figma и запустить агента Design Sync, Клод синхронизирует изменения в код. 2) Просто сказать Клоду: «Сделай главную кнопку синей» без захода в Figma, он отредактирует код напрямую. Первый путь профессиональнее, Figma и код остаются синхронизированными.

Cursor и VS Code это IDE, классические среды разработки для программистов. Они требуют базовых технических знаний. Claude Code Desktop создан для неразработчиков: интуитивный интерфейс, меньше зависимости от терминала, чистый опыт. Все возможности Cursor есть и в Клоде, просто интерфейс доступнее.

Можно строить прямо в Клоде и получать сайт. Но Figma дает полный визуальный контроль до написания строчки кода: вы видите секции, иерархию, цвета и можете моментально всё обновить. При переносе в Клод результат становится в разы точнее. Кроме того, Figma позволяет показать дизайн клиенту для утверждения до вложений в разработку. Для маленьких проектов можно сразу в Клод, для профессиональных через Figma.

Коннектор (Customize -> Connectors -> Figma) дает базовый доступ: Клод может читать части файла и делать мелкие манипуляции. Он не погружается вглубь файла, не видит все переменные, не читает всю иерархию компонентов и не может писать и обновлять. Официальный MCP от Figma дает полный доступ: глубокое чтение, доступ к дизайн-системе, возможность выполнять действия. Если вы подходите к процессу серьезно, используйте MCP. Для разового эксперимента хватит коннектора.

Терминал не обязательно держать открытым, Claude Desktop управляет им в фоновом режиме после первичного подключения. Чтобы Клод не улетал в фантазии, используйте Plan Mode (кнопка внизу чата Клода). В нем он показывает план работы перед началом сборки, а вы его утверждаете. Еще один трюк: давайте четкие инструкции с точными значениями («правая колонка, ширина 320px, фон #FFFFFF») вместо расплывчатых («красивый заголовок»). Чем точнее промпт, тем точнее результат.

Зависит от типа агента. Общего агента Developer, работающего с любыми проектами Figma, стоит использовать во всех проектах. Для Copywriter лучше заводить отдельного агента под каждый проект, так как тон меняется между личным проектом и задачей для клиента. Метод Авивит: создать базового агента, копировать его в папку каждого проекта и слегка подстраивать под конкретную задачу.

Клод загружает только релевантных для конкретного запроса агентов, а не всех подряд. Неактивные агенты не расходуют токены. Тем не менее, если в папке находится 30 агентов, Клод может запутаться в выборе. Авивит рекомендует использовать до 5–7 агентов в каждой папке проекта. Остальных лучше держать в отдельных папках.

Клод умеет работать с тем и другим, но об этом нужно попросить. Для SEO: добавь метатеги по стандартам Google, sitemap.xml, robots.txt и структурированные данные. Для безопасности: подключи HTTPS через Vercel, убедись в отсутствии секретов в коде, настрой заголовки CSP. Полезные навыки для установки: Israeli Privacy Shield для конфиденциальности и Israeli Accessibility Compliance для доступности. Оба они упоминались в руководстве по Vibe Coding.

Это зависит от настроек. При создании нового репозитория на GitHub можно выбрать Public (открытый для всех) или Private (только для вас и приглашенных пользователей). По умолчанию в бесплатном аккаунте репозиторий может быть общедоступным. При общении с Клодом всегда просите создать личный репозиторий или Private repository. Если он случайно получился общедоступным, перейдите в GitHub → Settings → General → Danger Zone → Change visibility.

Есть три варианта. Первый: сказать Клоду обновить текст в Hero до значения X, после чего он обновит код и выполнит повторный деплой на Vercel. Это быстро для точечных правок. Второй: сохранение контента в отдельном файле JSON или MD внутри проекта, чтобы редактировать его напрямую без изменения самого кода. Третий: подключение внешней CMS (Notion, Airtable, Sanity), которую вы обновляете самостоятельно, а Клод строит инфраструктуру для автоматической подгрузки данных. Первый вариант самый простой, а третий самый профессиональный.

В принципе, да. Lovable, Bolt и Replit Agent являются инструментами Vibe Coding, которые создают сайты на основе описания. Разница в том, что это закрытые решения с ограничениями по функционалу и необходимостью отдельной подписки. Claude Code работает с сайтами, автоматизацией, агентами и даже видеомонтажом в рамках одной подписки. Кроме того, Клод дает вам полный доступ к коду, вы являетесь его владельцем и можете перейти на любую другую платформу. В Lovable присутствует привязка к поставщику услуг.

Figma является профессиональным стандартом для дизайна цифровых продуктов: 16 лет на рынке, огромная экосистема и официальный MCP для Клода. Stitch AI представляет собой более новый инструмент для генерации дизайна из текста, который хорош для экспериментов, но менее подходит для сложных проектов. Если вы создаете продукт раз в десять лет, Stitch будет достаточно. Для серьезной работы выбирайте Figma.

Существует три пути. Первый: Клод строит дизайн-систему для вас, когда вы загружаете мудборд, понравившиеся сайты и брендовые изображения с запросом на создание дизайн-системы. Он формирует палитру, шрифты, отступы и иерархию. Второй: покупка готового шаблона в Figma Community с последующей адаптацией цветов и шрифтов под ваш вкус. Третий: использование скилла UI/UX Pro Max или Web Design Guidelines с 50 готовыми стилями и 161 палитрой цветов. Авивит ранее проводила полноценную встречу по созданию дизайн-систем, запись доступна в клубной системе.

Да. Примеры из сообщества: первый, когда Клод создает сайт и отправляет уведомление в Slack; второй, когда изменения в Figma синхронизируются Клодом, отправляются в GitHub и автоматически публикуются на Vercel; третий, когда Клод создает сайт, загружает скриншоты на Drive и отправляет клиенту email со ссылкой. Все это реализуется через Make.com или дополнительные MCP, которые можно подключить к Клоду.

🚀 Следующий шаг: полный воркшоп по Claude Code

Часто задаваемые вопросы

Заменит ли Claude Design Фигму?

Вряд ли в ближайшее время. Claude Design представляет собой интерфейс проектирования прямо на сайте Claude (не в десктопном приложении). Он красив, работает быстро и умеет создавать базовый дизайн, но имеет серьезные ограничения. Токены для него расходуются отдельно от Claude Code, стоят дороже и заканчиваются очень быстро. Авивит столкнулась с тратой 300 долларов на одном аккаунте. Тот, кто работает с Claude Code на компьютере, может добиться аналогичных результатов без дополнительных затрат. Figma продолжает оставаться профессиональным стандартом для сложного дизайна.

Я не дизайнер. Подходит ли мне это руководство?

Да, но с одним отличием. Вместо самостоятельного создания дизайна в Figma вы заходите в Figma Community, скачиваете готовый шаблон (портфолио, дашборд, лендинг), меняете тексты с картинками и подключаете к Клоду. Авивит также предлагает попросить Клода построить дизайн-систему совместно. Вы передаете ему изображения, мудборд и идеи, а Клод генерирует базу.

В чем разница между субагентом и навыком?

Навык представляет собой конкретное умение, такое как редактирование видео, написание текстов на иврите или проверка доступности. Клод задействует его при необходимости. Субагент является сущностью с полноценным интеллектом, способной выполнять последовательности действий, принимать решения и задействовать другие навыки. В связке Figma и кода субагент разработчика может одновременно использовать навыки оптимизации CSS, обеспечения доступности и цветовых схем OKLCH. Новичкам лучше использовать навыки, а более опытным пользователям подходят агенты.

Обязательно ли создавать агентов для получения профессиональных результатов?

Авивит проводила тестирование без агентов, и результаты оказались хуже. Агенты дают суперспособности: каждый из них обучен конкретной задаче, знает ваши требования к мыслительному процессу и работает слаженно с остальными. Первоначальные инвестиции времени в 2–3 часа на создание агента окупаются тем, что впоследствии он работает на вас вечно.

У меня не получилось подключение. Что делать?

Действуйте по шагам: первое, убедитесь в наличии платной подписки на Figma; второе, проверьте установку Node.js, введя команду node -v в терминале для получения номера версии; третье, убедитесь в действительности токена, создав новый в случае истечения 90-дневного срока; четвертое, сделайте скриншот ошибки терминала и отправьте его в чат с Клодом, так как он умеет распознавать 95% неполадок.

Что делать при наличии работающего сайта, если клиент просит правки: каждый раз начинать сначала?

Нет. Есть два пути: первый, редактировать дизайн напрямую в Figma и задействовать агента Design Sync, чтобы Клод синхронизировал изменения с кодом; второй, просто сказать Клоду сделать главную кнопку синей без обращения к Figma, и он изменит код напрямую. Первый путь является более профессиональным, так как Figma и код остаются в синхронном состоянии.

В чем разница между этим подключением и Cursor или VS Code?

Cursor и VS Code представляют собой традиционные среды разработки для программистов, требующие базовых технических знаний. Приложение Claude Code Desktop создано для пользователей, не являющихся разработчиками, и предлагает интуитивный интерфейс, меньшую зависимость от терминала и более чистый опыт. При этом все возможности Cursor доступны в Клоде, но интерфейс здесь гораздо доступнее.

Зачем строить в Figma, а не сразу в Клоде?

Можно строить и сразу в Клоде, получая готовый сайт. Однако Figma дает полный визуальный контроль до написания строчки кода: вы видите секции, иерархию, цвета и можете мгновенно вносить правки. При последующем переносе к Клоду результат получается в разы точнее. Кроме того, Figma позволяет поделиться дизайном с клиентом для утверждения до вложений в разработку. Для небольших проектов подходит вариант напрямую с Клодом, а для профессиональных лучше использовать Figma.

Почему обычного коннектора Клода для Figma недостаточно?

Коннектор через Customize, Connectors и Figma предоставляет лишь базовый доступ, позволяя Клоду читать части файла и выполнять минимальные манипуляции. Он не погружается в файл глубоко, не видит все переменные, не читает полную иерархию компонентов и не умеет писать или обновлять данные. Официальный MCP для Figma открывает полный доступ к глубокому чтению, дизайн-системе и выполнению действий. Для серьезного процесса необходим MCP, а для разового знакомства достаточно коннектора.

Должен ли терминал быть открытым постоянно? Как помешать Клоду проявлять излишнюю креативность?

Терминал не должен быть открыт постоянно, так как Claude Desktop управляет им в фоновом режиме после первичной настройки. Чтобы Клод не уходил в слишком бурную фантазию, используется Plan Mode с кнопкой в нижней части интерфейса. В этом режиме он показывает план работы перед началом создания, а вы его утверждаете. Еще один трюк заключается в предоставлении четких инструкций с точными значениями вроде правой колонки шириной 320 пикселей и белым фоном вместо расплывчатых формулировок вроде красивого заголовка. Чем точнее промпт, тем точнее результат.

Требует ли каждый проект собственного агента или можно использовать одного агента для нескольких проектов?

Это зависит от типа агента. Общего агента-разработчика, работающего с любыми проектами Figma, вполне стоит использовать совместно. Для агента-копирайтера лучше завести отдельного специалиста под каждый проект, так как тон общения меняется между личным сайтом и клиентским заказом. Метод Авивит заключается в создании базового агента с последующим копированием в папку каждого проекта и внесением небольших правок под конкретную задачу.

Не приводит ли передача Клоду всех агентов к большему расходу токенов?

Клод загружает только релевантных для конкретного запроса агентов, а не всех подряд. Неактивные агенты не расходуют токены. Тем не менее, если в папке находится 30 агентов, Клод может запутаться в выборе. Авивит рекомендует использовать до 5–7 агентов в каждой папке проекта. Остальных лучше держать в отдельных папках.

Как обстоят дела с проверкой безопасности и SEO для сайта, созданного Клодом?

Клод умеет работать с тем и другим, но об этом нужно попросить. Для SEO: добавь метатеги по стандартам Google, sitemap.xml, robots.txt и структурированные данные. Для безопасности: подключи HTTPS через Vercel, убедись в отсутствии секретов в коде, настрой заголовки CSP. Полезные навыки для установки: Israeli Privacy Shield для конфиденциальности и Israeli Accessibility Compliance для доступности. Оба они упоминались в руководстве по Vibe Coding.

Открыты ли мои файлы на GitHub для всех?

Это зависит от настроек. При создании нового репозитория на GitHub можно выбрать Public (открытый для всех) или Private (только для вас и приглашенных пользователей). По умолчанию в бесплатном аккаунте репозиторий может быть общедоступным. При общении с Клодом всегда просите создать личный репозиторий или Private repository. Если он случайно получился общедоступным, перейдите в GitHub → Settings → General → Danger Zone → Change visibility.

Что делать при необходимости обновить контент на работающем сайте при отсутствии системы управления контентом?

Есть три варианта. Первый: сказать Клоду обновить текст в Hero до значения X, после чего он обновит код и выполнит повторный деплой на Vercel. Это быстро для точечных правок. Второй: сохранение контента в отдельном файле JSON или MD внутри проекта, чтобы редактировать его напрямую без изменения самого кода. Третий: подключение внешней CMS (Notion, Airtable, Sanity), которую вы обновляете самостоятельно, а Клод строит инфраструктуру для автоматической подгрузки данных. Первый вариант самый простой, а третий самый профессиональный.

Заменяет ли это Lovable / Bolt / Replit?

В принципе · да. Lovable, Bolt, Replit Agent · все они инструменты Vibe Coding, создающие сайты по описанию. Разница · они закрытые инструменты, вы ограничены их возможностями и у них отдельные подписки. Claude Code · работает и с сайтами, и с автоматизациями, и с агентами, и с монтажом видео · одна подписка. Кроме того · Claude дает вам доступ к самому коду, вы владельцы, можете перейти на любую платформу. В Lovable · есть привязка к поставщику.

Figma против Stitch AI · что лучше?

Figma · это профессиональный стандарт для дизайна цифровых продуктов, 16 лет на рынке, огромная экосистема, официальный MCP для Claude. Stitch AI · это более новый инструмент, создает дизайн по тексту, неплох для экспериментов, но менее профессионален для сложных проектов. Если вы создаете что-то раз в десять лет · Stitch подойдет. Если вы создаете продукты серьезно · Figma.

Мы предприниматели без опыта в дизайне · как создать дизайн-систему?

Три пути · 1) Claude строит ее для вас · загружаете ему мудборд, понравившиеся сайты, изображения, представляющие бренд, и говорите «создай мне дизайн-систему». Он создает палитру, шрифты, отступы, иерархию. 2) Покупаете готовую тему в Figma Community · редактируете цвета и шрифты под свой вкус. 3) Используете навык UI/UX Pro Max или Web Design Guidelines · 50 стилей, 161 готовая цветовая палитра. Авивит ранее представляла целую встречу по созданию дизайн-системы · загружено в систему клуба.

Можно ли подключить этот процесс к другим автоматизациям?

Да. Примеры из сообщества · 1) Claude создает сайт → отправляет обновление в Slack. 2) Изменение в Figma → Claude синхронизирует → отправляет в GitHub → Vercel развертывает автоматически. 3) Claude создает сайт → загружает скриншоты на Drive → отправляет клиенту письмо со ссылкой. Все через Make.com или через дополнительные MCP, которые можно подключить к Claude.