👨💻 Фронтенд с AI: что можно делегировать агентам
5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике.
Участники конференции узнают:
• Как находить prompt injection и противостоять таким атакам;
• Какие подходы помогают повысить доверие к результатам агентской разработки;
• Как проводить ревью кода, созданного AI-агентами;
• Как AI помогает упростить починку багов.
В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM.
Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте.
🔗 Программа и билеты: https://podlodka.io/fecrew
5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике.
Участники конференции узнают:
• Как находить prompt injection и противостоять таким атакам;
• Какие подходы помогают повысить доверие к результатам агентской разработки;
• Как проводить ревью кода, созданного AI-агентами;
• Как AI помогает упростить починку багов.
В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM.
Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте.
🔗 Программа и билеты: https://podlodka.io/fecrew
❤3🥱2👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙
.
https://codepen.io/jh3y/pen/abPgrGR
.
pop { view-timeline-name: --pop;}img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%;}.skateboarder { --x: 0; --y: -45%;}@ keyframes slide { to { translate: var(--x) var(--y); }}https://codepen.io/jh3y/pen/abPgrGR
👍8🔥6❤2
🔥 Claude Code теперь можно менять изнутри
Anthropic представила Mods: небольшие функции на TypeScript, которые вмешиваются в работу Claude Code. Мод может изменить промпт до отправки модели, заблокировать или повторить вызов инструмента, скрыть секрет из ответа и добавить элементы интерфейса. Работает в CLI и настольном приложении.
Моды распространяются через плагины. По сути, разработчик может настроить поведение самого агента под свой процесс, а не только давать ему инструкции. Устанавливать стоит из доверенных источников: мод выполняется с тем же доступом к компьютеру, что и Claude Code.
https://claude.com/blog/claude-code-mods
Anthropic представила Mods: небольшие функции на TypeScript, которые вмешиваются в работу Claude Code. Мод может изменить промпт до отправки модели, заблокировать или повторить вызов инструмента, скрыть секрет из ответа и добавить элементы интерфейса. Работает в CLI и настольном приложении.
Моды распространяются через плагины. По сути, разработчик может настроить поведение самого агента под свой процесс, а не только давать ему инструкции. Устанавливать стоит из доверенных источников: мод выполняется с тем же доступом к компьютеру, что и Claude Code.
https://claude.com/blog/claude-code-mods
❤11👍3🤣2
Media is too big
VIEW IN TELEGRAM
Circular Progress Bar
Это элемент веб-дизайна, который используется для отображения процесса выполнения задачи или процентного выполнения определенной операции. Этот элемент представляет собой круговую диаграмму, которая заполняется цветами, чтобы показать, сколько уже выполнено.
Примеры использования такой круговой диаграммы могут включать отображение процента выполнения загрузки файла, уровень заряда батареи или прогресс выполнения определенной задачи на веб-сайте.
Это стильное и интуитивно понятное решение для визуализации информации о ходе выполнения задачи.
🌐Ссылка на видео
Это элемент веб-дизайна, который используется для отображения процесса выполнения задачи или процентного выполнения определенной операции. Этот элемент представляет собой круговую диаграмму, которая заполняется цветами, чтобы показать, сколько уже выполнено.
Примеры использования такой круговой диаграммы могут включать отображение процента выполнения загрузки файла, уровень заряда батареи или прогресс выполнения определенной задачи на веб-сайте.
Это стильное и интуитивно понятное решение для визуализации информации о ходе выполнения задачи.
🌐Ссылка на видео
❤6👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Neumorphic Liquid Slider
Создано без использования библиотек. В JS устанавливаются значения и запускаются анимации.
🌐Ссылка на код
Создано без использования библиотек. В JS устанавливаются значения и запускаются анимации.
🌐Ссылка на код
👍9❤5🔥3
Forwarded from Machine learning Interview
This media is not supported in your browser
VIEW IN TELEGRAM
Опенсорс фреймворк от CopilotKit для Intelligent UI, и он уже в топ-5 трендов GitHub 🔥
Идея в том, что агент отвечает на запрос не текстом, а живым интерфейсом: интерактивными графиками, 3D-сценами, формами, симуляциями и визуализациями алгоритмов. Всё рендерится в песочнице прямо в чате.
Под капотом Next.js 16 с React 19, бэкенд на LangChain Deep Agents, который подгружает визуализационные скиллы по требованию, и отдельный MCP-сервер. Через него дизайн-систему и сборщик HTML можно подключить к Claude Desktop, Claude Code и Cursor. Лицензия MIT, запускается командами make setup и make dev.
В анонсе пишут про работу с любым LLM и любым агентным фреймворком. В README по умолчанию стоит Claude, для OpenAI достаточно ключа, а для остальных провайдеров нужно править модель в коде. Слабые модели, по словам авторов, часто ломают вёрстку.
Авторы уверяют, что к 2027 году такой агентный слой будет в каждом приложении. Спорно, но направление понятно: интерфейс всё чаще генерируется под задачу, а не рисуется заранее.
Источник: https://github.com/CopilotKit/OpenIntelligentUI
@machinelearning_interview
#ui
Идея в том, что агент отвечает на запрос не текстом, а живым интерфейсом: интерактивными графиками, 3D-сценами, формами, симуляциями и визуализациями алгоритмов. Всё рендерится в песочнице прямо в чате.
Под капотом Next.js 16 с React 19, бэкенд на LangChain Deep Agents, который подгружает визуализационные скиллы по требованию, и отдельный MCP-сервер. Через него дизайн-систему и сборщик HTML можно подключить к Claude Desktop, Claude Code и Cursor. Лицензия MIT, запускается командами make setup и make dev.
В анонсе пишут про работу с любым LLM и любым агентным фреймворком. В README по умолчанию стоит Claude, для OpenAI достаточно ключа, а для остальных провайдеров нужно править модель в коде. Слабые модели, по словам авторов, часто ломают вёрстку.
Авторы уверяют, что к 2027 году такой агентный слой будет в каждом приложении. Спорно, но направление понятно: интерфейс всё чаще генерируется под задачу, а не рисуется заранее.
Источник: https://github.com/CopilotKit/OpenIntelligentUI
@machinelearning_interview
#ui
👍9❤4🔥2
От скриншота до интерфейса: GitHub-проекты для генерации UI и дальнейшей разработки.
1. screenshot-to-code
Загружаете скриншот – получаете код интерфейса. Поддерживает HTML, Tailwind, React и Vue.
https://github.com/abi/screenshot-to-code
2. OpenUI
Описываете интерфейс словами, смотрите результат и уточняете его в диалоге. Подходит для быстрого прототипирования.
https://github.com/wandb/openui
3. shadcn/ui
Готовые настраиваемые компоненты для сборки интерфейсов. В исходной подборке ошибочно назван «клоном v0»: сам репозиторий не преобразует скриншоты в код.
https://github.com/shadcn-ui/ui
4. OpenHands
Среда для работы с ИИ-агентами над проектом: полезна на этапе реализации и доработки приложения.
https://github.com/OpenHands/OpenHands
1. screenshot-to-code
Загружаете скриншот – получаете код интерфейса. Поддерживает HTML, Tailwind, React и Vue.
https://github.com/abi/screenshot-to-code
2. OpenUI
Описываете интерфейс словами, смотрите результат и уточняете его в диалоге. Подходит для быстрого прототипирования.
https://github.com/wandb/openui
3. shadcn/ui
Готовые настраиваемые компоненты для сборки интерфейсов. В исходной подборке ошибочно назван «клоном v0»: сам репозиторий не преобразует скриншоты в код.
https://github.com/shadcn-ui/ui
4. OpenHands
Среда для работы с ИИ-агентами над проектом: полезна на этапе реализации и доработки приложения.
https://github.com/OpenHands/OpenHands
❤7👍1