Конструктор промптов для интерфейса
Создайте визуальное направление с живой типографикой, цветом, расстоянием и контролем радиуса. Копировать точный UI промпт или скачать CSS переменных.
Отрегулируйте детали. Увидеть их вживую.
Интерфейс Preview
ПРЕВИДЕНИЕОсвободите место для
Что-то новое.
Мастерская по керамике. Хорошая компания, немного глины и медленная суббота.
Студийная сессия
2 часа · 8 мест
Иллюстративный предварительный просмотр. Ваш строитель реализует конечный интерфейс.
Ваше дизайнерское направление
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
Текст экспорта остаётся на английском; введённые данные сохраняются без изменений.
Не подписывайся. Никаких кредитов. Этот инструмент собирает ваш вывод в вашем браузере.
От идеи к чему-то полезному.
- 01
Начните с предустановленного, а затем отрегулируйте детали.
- 02
Проверьте свой выбор в предварительном просмотре живого интерфейса.
- 03
Копируйте дизайн кратко или скачать свой CSS переменных.
Небольшой контекст.
Превратите визуальные предпочтения в практическую передачу Lovable, Bolt, v0или вашего агента по кодированию. Предварительный просмотр и промпт Используйте одни и те же настройки, поэтому выбранные вами интервалы, тип и цвета остаются неизменными. Этот инструмент собирает инструкции по вашему выбору; он не анализирует и не генерирует проекты с ИИ.
Хорошие вопросы.
Могу ли я использовать промпт В любом конструкторе приложений?
Да. Выход описывает свойства стандартного интерфейса и работает как направление проектирования для Lovable, Bolt, v0и помощников по кодированию. Ваш строитель все еще решает, как их реализовать.
Что входит в состав CSS скачать?
Небольшой набор из CSS пользовательские свойства для вашего цвета акцента, фона, текста, шрифта, расстояния, радиуса и тени. Сопоставьте их с существующими дизайнерскими токенами, прежде чем использовать их в проекте.
Проверяет ли предварительный просмотр доступность?
Инструмент сообщает о контрасте между вашим акцентом и текстом кнопки. Это узкая проверка цвета, а не полный аудит доступности. Тестируйте конечный интерфейс с клавиатурой и вспомогательными технологиями.