Piny

Работа с современными веб-фреймворками и CSS с утилитарным подходом, такими как Tailwind CSS, – это мощно, но постоянное переключение между кодом, документацией и предварительным просмотром в браузере для настройки стилей может прервать ваш рабочий процесс. Piny привносит преимущества визуального редактора прямо в вашу привычную среду разработки, позволяя стилизовать компоненты и перемещаться по проекту, не покидая IDE. Он работает путем непосредственного редактирования кода, поддерживая прозрачный и неабстрагированный рабочий процесс.

Основные возможности

• 🖱️ Визуальное стилизование элементов: Кликните на любой элемент в окне предварительного просмотра кода и настройте его классы Tailwind с помощью интуитивно понятных визуальных элементов управления. Наблюдайте за мгновенным отражением изменений как в предварительном просмотре, так и в вашем коде.

• 🔍 Инспектирование и управление классами Tailwind: Просматривайте и редактируйте сложные стили Tailwind для любого элемента, аккуратно организованные в редактируемой древовидной структуре, отображающей классы и состояния.

• ✏️ Редактирование классов Tailwind где угодно: Изменяйте классы Tailwind непосредственно внутри строковых литералов, переменных и даже в коде за пределами стандартных структур компонентов React или Astro.

• ↔️ Навигация между компонентами: Быстро переходите из предварительного просмотра к соответствующему компоненту в вашем коде. Вы можете связать маршруты с компонентами, чтобы предварительный просмотр всегда показывал релевантный контент.

• 🤖 Создание UI с помощью AI-ассистированного перетаскивания: Собирайте пользовательский интерфейс быстрее, используя интеллектуальную функцию перетаскивания. Piny интегрируется с вашим собственным ключом AI API-провайдера и работает вместе с предпочитаемым вами AI-ассистентом по кодированию.

• 👁️ Визуальный выбор элементов (Pro): Выбирайте элементы непосредственно в режиме предварительного просмотра, чтобы выделить их в коде и получить доступ к элементам управления визуальным стилем.

• 🛠️ Редактирование нескольких элементов (Pro): Выбирайте несколько элементов одновременно, используя стандартные клавиши-модификаторы (CMD/CTRL, SHIFT), и применяйте стили или просматривайте классы по всей выделенной области.

• 🧭 Изучение всего проекта (Pro): Получите общее представление и легко перемещайтесь по компонентам во всем проекте прямо из интерфейса Piny.

• 🎨 Импорт пользовательской темы Tailwind (Pro): Настройте визуальные элементы управления Piny в соответствии с конкретной дизайн-системой вашего проекта, импортировав конфигурацию Tailwind, включая пользовательские цвета, шрифты и интервалы.

Примеры использования

1. Улучшение внешнего вида компонентов: Вы создаете новый компонент кнопки и вам нужно усовершенствовать его отступы, радиус границы и состояния при наведении. Вместо того чтобы вручную добавлять px-4 py-2 rounded-md hover:bg-blue-700 и постоянно проверять браузер, вы используете визуальные элементы управления Piny, чтобы настроить эти свойства непосредственно на кнопке в предварительном просмотре. Piny мгновенно обновляет код, а горячая перезагрузка показывает результат, избавляя вас от повторяющегося ввода и переключения контекста.

2. Отладка сложных макетов: Вы столкнулись с проблемой интервалов вложенной структуры макета, использующей сложные классы flexbox и grid. С помощью Tailwind Class Inspector вы выбираете проблемный элемент в предварительном просмотре (с функцией Pro) или в коде, изучаете дерево примененных классов, быстро определяете конфликтующие утилиты margin или padding и редактируете их непосредственно в инспекторе для решения проблемы макета.

3. Быстрое прототипирование и сборка: Вам нужно быстро создать макет нового раздела страницы с использованием существующих компонентов и добавлением новых элементов. Используя AI-ассистированное перетаскивание, вы добавляете соответствующие компоненты, располагаете их визуально, а затем используете визуальные элементы управления Piny для точной настройки интервалов и выравнивания, не записывая повторяющиеся классы утилит вручную. Вы также можете использовать Component Navigation, чтобы быстро перейти к одному из добавленных компонентов, если ему требуются незначительные структурные корректировки.

Заключение

Piny органично интегрирует визуальное редактирование в ваш рабочий процесс разработки, запускаясь прямо в вашей IDE. Позволяя визуально стилизовать проекты и перемещаться по ним, сохраняя при этом привязку изменений непосредственно к коду, Piny помогает вам работать быстрее и интуитивно понятнее с Tailwind CSS, React, Next.js и Astro. Он устраняет необходимость в отдельных инструментах или облачных сервисах, гарантируя, что вы сохраните полный контроль над своим проектом. Начните с мощных бесплатных функций и перейдите на Pro, если вам нужны расширенные возможности навигации и редактирования нескольких элементов.

FAQ

• Действительно ли Piny Free является бесплатным? Да, Piny Free — это действительно бесплатная версия без ограничений по времени, не требующая учетной записи или сбора данных. Он предоставляет основные функции визуального редактирования для выполнения общих задач. Версия Pro добавляет расширенные возможности.

• Почему предлагается скидка на ранний доступ? Скидка на ранний доступ предлагается для вознаграждения первых пользователей за их доверие и для сбора ценных отзывов, которые помогают улучшить Piny на основе реального использования.

• Сохраняется ли скидка? Да, если вы совершите покупку в период раннего доступа, вы зафиксируете эту цену со скидкой на время действия вашей подписки, даже после введения обычной цены.

• Как работает Visual Select? Visual Select сопоставляет элементы в режиме предварительного просмотра с соответствующими местоположениями в коде с использованием передовых методов сопоставления DOM с JSX. Для этого требуется небольшой скрипт в макете вашего проекта, который активен только в режиме разработки.