Дизайн-инженеры | AI-ориентированный дизайн на базе production-кода!

Claude Code меняет подход к взаимодействию UX-дизайнеров, продуктовых дизайнеров и команд, занимающихся дизайн-системами, с разработчиками. В этом подробном руководстве по Claude Code для дизайнеров вы узнаете, как редактировать реальный рабочий код, работать в репозитории GitHub, использовать Storybook, генерировать интерфейсы с помощью компонентов Material UI, создавать запросы на слияние (Pull Requests) и сотрудничать с инженерами без использования терминала. Если вы когда-либо задавались вопросом, как дизайнеры могут работать напрямую с рабочим кодом, соблюдая при этом корпоративную дизайн-систему, этот комплексный рабочий процесс демонстрирует, как именно взаимодействуют современные команды, использующие искусственный интеллект. В этом руководстве ко мне присоединился ведущий инженер-программист и архитектор дизайн-систем Сэм Рокуэлл. Вместе мы пройдем весь путь от GitHub до производственной среды. *Ресурсы* 🔗 Стартовый репозиторий: https://github.com/SRochas/mui-wrapper 🔗 Substack Сэма Рокуэлла: https://samrockwell.substack.com/ Что вы узнаете ✅ Что такое GitHub на самом деле (объяснение для дизайнеров) ✅ Storybook в простом объяснении ✅ Клонирование вашего первого производственного репозитория ✅ Подключение Claude Code к GitHub ✅ Запуск проекта React локально ✅ Создание реальной функции с помощью ИИ Claude Code ✅ Разработка с использованием компонентов Material UI Design System ✅ Проверка кода, сгенерированного ИИ ✅ Создание вашего первого запроса на слияние (Pull Request) ✅ Понимание процесса проверки разработчиками ✅ Как разработчики утверждают и объединяют вашу работу ✅ Как ИИ навсегда меняет разработку дизайна Независимо от того, являетесь ли вы: • UX-дизайнером Дизайнер • UI-дизайнер • Продуктовый дизайнер • Дизайнер дизайн-систем • Инженер-дизайнер • Фронтенд-дизайнер • Креативный технолог • Руководитель продуктовой команды Этот рабочий процесс демонстрирует, как дизайнеры могут безопасно вносить непосредственный вклад в производственный код, сотрудничая с инженерными командами с использованием ИИ. Если вы хотите, чтобы мы продолжили эту серию статей о проектировании и разработке, сообщите нам, какие темы вы хотели бы увидеть в следующих выпусках. Подписывайтесь на еженедельные обучающие видео по следующим темам: • Claude Code • Figma • Системы проектирования • Рабочие процессы проектирования с использованием ИИ • Разработка дизайна • ИИ для дизайнеров • Корпоративный дизайн продуктов • Готовые к производству рабочие процессы ИИ ⏱️ Разделы 00:00 Дизайнеры могут редактировать производственный код 01:02 Знакомство с Сэмом Рокуэллом 2:33 Стартовый репозиторий, доступный для клонирования 3:39 GitHub против Storybook: объяснение 6:53 Клонирование вашего первого репозитория 8:34 Подключение Claude Code 10:11 Запуск Storybook 11:33 Запуск стартового веб-сайта 13:09 Поиск с помощью Claude и создание страницы с ценами 15:26 Проверка компонентов Material UI 16:41 Создание вашего первого запроса на слияние (Pull Request) 18:17 Загрузка и аутентификация Github CLI для новичков 20:15 Обзор запроса на слияние от разработчика 21:46 Слияние в производство #ClaudeCode #Проектирование #ДизайнСистемы #GitHub #ПродуктовыйДизайн #UXДизайн #AIДизайн ------------------------------------------------------------------------------- 🔗 *Уроки по Claude* Обновленная настройка Claude + Figma MCP:    • Claude + Figma MCP — Updated Setup for Des...   Первое видео по настройке после релиза:    • Figma + Claude Code MCP Server Setup for D...   Подключение дизайн-системы к Claude:    • Connect Claude with Figma Design System | ...   Создание дизайн-системы с помощью Claude:    • How to Build a Design System with Claude +...   Claude Design:    • Claude Design Tutorial for Designers | Fir...   Claude Cowork:    • Claude Cowork for Designers — Full Beginne...   Навыки Figma:    • Figma MCP Skills in Claude | Deep Dive for...   Навыки Claude:    • Claude Skills for Designers | Create Your ...   Создайте свое портфолио из Figma с помощью Claude AI:    • Figma MCP + Claude Code Tutorial | Publish...   ------------------------------------------------------------------------------- 👩🏻‍💻 Я Нехмат — лидер в области дизайна, профессор и ваш гид по эпохе ИИ. Я помогаю дизайнерам осваивать такие инструменты, как Claude Design, Figma MCP и рабочие процессы дизайна с использованием ИИ, с ясностью и практическим применением. 🎯 Новые видео, как только вам это понадобится: обновления Figma, изменения в отрасли, инструменты ИИ и развитие карьеры 💕 Подпишитесь, чтобы получать последние новости и информацию об изменениях в нашей отрасли 👉 Присоединяйтесь к моему сообществу, чтобы получить первый доступ, более прямые рекомендации и консультации в режиме реального времени по вашей работе 🔔 Включите ВСЕ уведомления, чтобы не пропустить последние релизы и обучающие материалы 🔥 Распространите информацию об этом видео, чтобы оно попало к тем, кто его ищет ➡️ LinkedIn:   / nehmatgereige   ❎ X: https://x.com/33Nehmat Ⓜ️ Medium:   / nehmat.gereige   🌈 Figma Creations: https://www.figma.com/@nehmatgereige 🌸 БЕСПЛАТНЫЕ профессиональные курсы 🌸 🤖 Новый рабочий процесс ИИ-дизайна — Claude A...