Prompt-Katalog
Praxiserprobte Prompts für Vibe-Coding und Agenten
UI/UX-Spezifikationen, Bento-Grids, Design-System-Tokens, Tailwind-Komponenten und Linear-/Apple-Ästhetik.
Themenbereich wählen:3 Prompts verfügbar
4:3Claude 3.7
#landing
Створи конверсійний перший екран (Hero Section) веб-сервісу. ### Дані про продукт: - Продукт / Сервіс: {{product_name}} - Головна ціннісна пропозиція (UVP): {{uvp_statement}} - Основна дія (Primary CTA): {{cta_action}} ### Архітектура блоку: 1. Верхній бейдж: «Що нового» із делікатною анімацією пульсації. 2. Головний заголовок (H1): масштабний, з градієнтним підсвічуванням ключових слів. 3. Підзаголовок: 2-3 речення з акцентом на біль клієнта та вирішення. 4. Група дій: головна контрастна кнопка з ефектом scale(0.96) при натисканні + другорядна прозора кнопка перегляду демо. 5. Соціальний доказ (Social Proof): аватари задоволених клієнтів, зірочки рейтингу 4.9/5 та лічильник користувачів. 6. Фоновий візуальний елемент: 3D скляна картка (frosted glass) з абстрактним прев'ю інтерфейсу.
3:2Claude 3.7
#bento
Ти — провідний UI/UX дизайнер та фронтенд-інженер. Створи головний екран веб-дашборду у стилі Bento Grid. ### Параметри продукту: - Тематика / Ніша: {{saas_niche}} - Цільова аудиторія: {{target_audience}} - Ключові метрики для відображення: {{key_metrics}} ### Естетичні вимоги: 1. Стиль: сучасний темний мінімалізм у дусі Linear, Vercel та Raycast. 2. Палітра: глибоке вугільне тло (#09090b), напівпрозорі картки з 1px обводкою (border-white/10), делікатні неонові акценти. 3. Компонування: асиметрична сітка Bento Grid (2 великі картки аналітики, 1 висока вертикальна стрічка подій, 2 компактні віджети швидких дій). 4. Стек реалізації: React, Tailwind CSS v4, Radix UI primitives, Lucide icons, Framer Motion. 5. Інтерактив: стани hover із легким підсвічуванням градієнта курсору, плавні переходи (transition-all duration-200). Надай готовий самодостатній код компонента без пропущених блоків.
UI/UX & Design1 Parameter
Design System & UI
v0 / FigmaКомплексна специфікація кольорової гами, типографіки, відступів та радіусів для розробки дизайн-системи.
Ти — Design System Architect. Розроби повну системну специфікацію дизайн-токенів для проєкту: {{project_name}}.
### Вимоги до специфікації:
1. **Колірна палітра**: OKLCH значення для нейтральної шкали (Surface 50-950), первинного брендового акценту та семантичних статусів (Success, Warning, Destructive, Info).
2. **Типографічна шкала**: гарнітура, розміри font-size, line-height, letter-spacing для рівнів Display, H1-H4, Body-sm/md/lg, Caption.
3. **Компонентні токени**: радіуси заокруглення (Border Radius sm: 6px, md: 10px, lg: 16px, xl: 24px, full), рівні тіней (Elevation 1-4), фокусні кільця (Focus rings WCAG AAA).
4. **Формат виводу**: експортуй токени у форматі JSON (W3C Design Tokens Community Group standard) та приклад конфігурації CSS Custom Properties (`:root { ... }`).
Claude 3.7GPT-4o
Öffnen