Spaces:

neuroseqa
/

webcoderai

Running

App Files Files Community

neuroseqa commited on May 13, 2025

Commit

25f558c

verified ·

1 Parent(s): 70fba89

Add 2 files

Browse files

Files changed (2) hide show

index.html +393 -672
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,25 +3,26 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebcoderAI - Генератор промптов для DeepSite</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
-            background: linear-gradient(135deg, #6e8efb, #a777e3);
         }
         .prompt-box {
-            min-height: 150px;
-            max-height: 300px;
             overflow-y: auto;
         }
         .code-block {
             font-family: 'Courier New', monospace;
-            background-color: #2d3748;
-            color: #f7fafc;
             border-radius: 0.5rem;
             padding: 1.5rem;
             position: relative;
         }
         .tab-content {
             display: none;
@@ -29,21 +30,22 @@
         .tab-content.active {
             display: block;
         }
-        .history-item:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
-        /* Custom scrollbar */
         ::-webkit-scrollbar {
             width: 8px;
         }
         ::-webkit-scrollbar-track {
             background: #f1f1f1;
-            border-radius: 10px;
         }
         ::-webkit-scrollbar-thumb {
             background: #888;
-            border-radius: 10px;
         }
         ::-webkit-scrollbar-thumb:hover {
             background: #555;
@@ -51,518 +53,180 @@
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-lg">
-        <div class="max-w-6xl mx-auto px-4">
-            <div class="flex justify-between">
-                <div class="flex space-x-7">
-                    <div>
-                        <a href="#" class="flex items-center py-4 px-2">
-                            <span class="font-semibold text-gray-900 text-2xl">Webcoder<span class="text-purple-600">AI</span></span>
-                        </a>
                     </div>
-                    <div class="hidden md:flex items-center space-x-1">
-                        <a href="#home" class="py-4 px-2 text-purple-600 border-b-4 border-purple-600 font-medium">Главная</a>
-                        <a href="#results" class="py-4 px-2 text-gray-500 hover:text-purple-600 transition duration-300">Результаты</a>
-                        <a href="#history" class="py-4 px-2 text-gray-500 hover:text-purple-600 transition duration-300">История</a>
-                        <a href="#about" class="py-4 px-2 text-gray-500 hover:text-purple-600 transition duration-300">Как это работает</a>
-                        <a href="#account" class="py-4 px-2 text-gray-500 hover:text-purple-600 transition duration-300">Профиль</a>
                     </div>
-                </div>
-                <div class="hidden md:flex items-center space-x-3">
-                    <button class="py-2 px-4 font-medium text-gray-500 rounded hover:bg-purple-600 hover:text-white transition duration-300">
-                        <i class="fas fa-language mr-2"></i>RU/EN
-                    </button>
-                    <button class="py-2 px-4 font-medium text-white bg-purple-600 rounded hover:bg-purple-700 transition duration-300">
-                        <i class="fas fa-user mr-2"></i>Войти
-                    </button>
-                </div>
-                <div class="md:hidden flex items-center">
-                    <button class="outline-none mobile-menu-button">
-                        <svg class="w-6 h-6 text-gray-500 hover:text-purple-600"
-                            fill="none"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path d="M4 6h16M4 12h16M4 18h16"></path>
-                        </svg>
-                    </button>
                 </div>
             </div>
         </div>
-        <div class="hidden mobile-menu">
-            <ul class="">
-                <li class="active"><a href="#home" class="block text-sm px-2 py-4 text-white bg-purple-600 font-semibold">Главная</a></li>
-                <li><a href="#results" class="block text-sm px-2 py-4 hover:bg-purple-600 hover:text-white transition duration-300">Результаты</a></li>
-                <li><a href="#history" class="block text-sm px-2 py-4 hover:bg-purple-600 hover:text-white transition duration-300">История</a></li>
-                <li><a href="#about" class="block text-sm px-2 py-4 hover:bg-purple-600 hover:text-white transition duration-300">Как это работает</a></li>
-                <li><a href="#account" class="block text-sm px-2 py-4 hover:bg-purple-600 hover:text-white transition duration-300">Профиль</a></li>
-            </ul>
-        </div>
-    </nav>
     <!-- Main Content -->
-    <div class="container mx-auto px-4 py-8">
-        <!-- Home Tab -->
-        <div id="home" class="tab-content active">
-            <div class="gradient-bg rounded-3xl shadow-xl p-8 mb-8 text-white">
-                <h1 class="text-4xl font-bold mb-6">Введите идею сайта → Получите промпт для DeepSite</h1>
-                <p class="text-xl mb-8">Просто опишите, какой сайт вам нужен, и наш ИИ создаст профессиональный системный промпт для DeepSite</p>
-                <div class="bg-white rounded-lg p-6 shadow-lg">
-                    <div class="mb-4">
-                        <label for="prompt-input" class="block text-gray-700 font-medium mb-2">Опишите ваш сайт:</label>
-                        <div class="relative">
-                            <textarea id="prompt-input" class="w-full prompt-box p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Например: Хочу сайт для IT-услуг с портфолио, блогом и формой заказа"></textarea>
-                            <div class="absolute bottom-4 right-4 flex space-x-2">
-                                <button id="upload-image" class="p-2 text-gray-500 hover:text-purple-600">
-                                    <i class="fas fa-image"></i>
-                                </button>
-                                <input type="file" id="image-input" accept="image/*" class="hidden">
-                            </div>
-                        </div>
-                    </div>
-                    <button id="generate-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
-                        <i class="fas fa-magic mr-2"></i>Сгенерировать промпт
-                    </button>
                 </div>
-            </div>
-            <div class="mb-8">
-                <h2 class="text-2xl font-bold mb-4 text-gray-800">Последние идеи</h2>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="recent-ideas">
-                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 border-l-4 border-purple-600">
-                        <p class="text-gray-700">"Сайт для астрологического контента с гороскопами и личными консультациями"</p>
-                        <p class="text-sm text-gray-500 mt-2">2 минуты назад</p>
                     </div>
-                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 border-l-4 border-purple-600">
-                        <p class="text-gray-700">"Интернет-магазин эко-продуктов с фильтрами и подпиской на еженедельные наборы"</p>
-                        <p class="text-sm text-gray-500 mt-2">15 минут назад</p>
                     </div>
-                    <div class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 border-l-4 border-purple-600">
-                        <p class="text-gray-700">"Лендинг для курсов по программированию с тарифами и отзывами"</p>
-                        <p class="text-sm text-gray-500 mt-2">1 час назад</p>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- Results Tab -->
-        <div id="results" class="tab-content">
             <div class="flex flex-col md:flex-row gap-8">
                 <div class="md:w-2/3">
-                    <h2 class="text-2xl font-bold mb-6 text-gray-800">Ваш системный промпт для DeepSite</h2>
-                    <div class="code-block mb-6">
-                        <div class="absolute top-2 right-2 flex space-x-2">
-                            <button id="copy-btn" class="p-1 text-gray-300 hover:text-white" title="Скопировать">
-                                <i class="fas fa-copy"></i>
                             </button>
-                            <button id="regenerate-btn" class="p-1 text-gray-300 hover:text-white" title="Перегенерировать">
-                                <i class="fas fa-sync-alt"></i>
                             </button>
                         </div>
-                        <pre id="generated-prompt" class="whitespace-pre-wrap">[Системный промпт]
-Переменная: USER_INPUT — это точная фраза, введённая пользователем: "{{USER_INPUT}}"
-You are DeepSight, a world-class AI architect and full-stack engineer with 30+ years of experience.
-Your mission: build a flawless Web-MVP for "{{USER_INPUT}}", reflecting every nuance пользовательской идеи.
-### Context
-• Project Name: {{USER_INPUT}}
-• Audience: Users who need exactly what "{{USER_INPUT}}" предлагает
-• Key Value: Why "{{USER_INPUT}}" будет уникален на рынке
-### Pages & Modules (no empty tabs)
-• /** → Home
-    – Hero: "Welcome to {{USER_INPUT}}"
-    – Input: show the original idea: "Вы хотите: {{USER_INPUT}}"
-    – CTA: "Начать работу над {{USER_INPUT}}"
-• /about → About
-    – Section title: "О проекте {{USER_INPUT}}"
-    – Описание: глубокое объяснение, как {{USER_INPUT}} решает проблемы пользователей
-• /services → Services
-    – Header: "Услуги {{USER_INPUT}}"
-    – Content: Детализация всех услуг, связанных с {{USER_INPUT}}
-### Core Functionality
-• Main feature: the site must address directly the need "{{USER_INPUT}}"
-• User flows: from ввод {{USER_INPUT}} to готовый продукт "{{USER_INPUT}}"
-### Tech Stack
-• Frontend: React, Tailwind CSS
-• Backend: Node.js, Express
-• Database: MongoDB
-• Deployment: Vercel
-### Quality & Deliverables
-• Full responsiveness (mobile & desktop)
-• All buttons and forms work "out of the box"
-• Prompt generation delay <1s
-• Correct saving and regeneration functionality
-**Success Manifest:**
-{{USER_INPUT}} must allow any user to get a ready-to-use DeepSite prompt instantly.</pre>
                     </div>
-                    <div class="flex space-x-4">
-                        <button class="flex-1 bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
-                            <i class="fas fa-save mr-2"></i>Сохранить в истории
-                        </button>
-                        <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-300">
-                            <i class="fas fa-redo mr-2"></i>Новая генерация
-                        </button>
-                    </div>
-                </div>
-                <div class="md:w-1/3">
-                    <div class="bg-white p-6 rounded-lg shadow-lg">
-                        <h3 class="text-xl font-bold mb-4 text-gray-800">Советы по улучшению промптов</h3>
-                        <div class="space-y-4">
-                            <div class="p-4 bg-purple-50 rounded-lg">
-                                <h4 class="font-semibold text-purple-700 mb-2"><i class="fas fa-lightbulb mr-2"></i>Будьте конкретны</h4>
-                                <p class="text-gray-700 text-sm">Указывайте конкретные страницы, функционал и технологии, которые вам нужны.</p>
-                            </div>
-                            <div class="p-4 bg-purple-50 rounded-lg">
-                                <h4 class="font-semibold text-purple-700 mb-2"><i class="fas fa-palette mr-2"></i>Опишите стиль</h4>
-                                <p class="text-gray-700 text-sm">Добавьте пожелания по дизайну: "минималистичный", "яркий", "корпоративный" и т.д.</p>
-                            </div>
-                            <div class="p-4 bg-purple-50 rounded-lg">
-                                <h4 class="font-semibold text-purple-700 mb-2"><i class="fas fa-cogs mr-2"></i>Укажите интеграции</h4>
-                                <p class="text-gray-700 text-sm">Если нужны специфические интеграции (CRM, платежные системы), укажите их.</p>
-                            </div>
-                            <div class="p-4 bg-purple-50 rounded-lg">
-                                <h4 class="font-semibold text-purple-700 mb-2"><i class="fas fa-mobile-alt mr-2"></i>Мобильная версия</h4>
-                                <p class="text-gray-700 text-sm">Всегда уточняйте требования к мобильной версии сайта.</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- History Tab -->
-        <div id="history" class="tab-content">
-            <h2 class="text-2xl font-bold mb-6 text-gray-800">История ваших промптов</h2>
-            <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
-                <div class="p-4 border-b border-gray-200">
-                    <div class="flex items-center">
-                        <input type="text" placeholder="Поиск по истории..." class="flex-1 p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
-                        <button class="ml-2 p-2 text-gray-500 hover:text-purple-600">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="divide-y divide-gray-200" id="history-list">
-                    <div class="p-4 history-item transition duration-300 hover:bg-gray-50 cursor-pointer">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <h3 class="font-semibold text-gray-800">Сайт для IT-услуг</h3>
-                                <p class="text-sm text-gray-500 mt-1">Сгенерировано: 15.06.2023 14:30</p>
-                            </div>
-                            <div class="flex space-x-2">
-                                <button class="p-1 text-gray-400 hover:text-purple-600" title="Использовать снова">
-                                    <i class="fas fa-recycle"></i>
-                                </button>
-                                <button class="p-1 text-gray-400 hover:text-blue-600" title="Редактировать">
-                                    <i class="fas fa-edit"></i>
-                                </button>
-                                <button class="p-1 text-gray-400 hover:text-red-600" title="Удалить">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 mt-2 text-sm truncate">Роль: Веб-разработчик и UX/UI дизайнер. Контекст: Клиент хочет создать сайт для IT-услуг с портфолио, блогом и формой заказа. Страницы: Главная, Портфолио, Услуги, Блог, Контакты...</p>
-                    </div>
-                    <div class="p-4 history-item transition duration-300 hover:bg-gray-50 cursor-pointer">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <h3 class="font-semibold text-gray-800">Астрологический контент</h3>
-                                <p class="text-sm text-gray-500 mt-1">Сгенерировано: 14.06.2023 11:15</p>
-                            </div>
-                            <div class="flex space-x-2">
-                                <button class="p-1 text-gray-400 hover:text-purple-600" title="Использовать снова">
-                                    <i class="fas fa-recycle"></i>
-                                </button>
-                                <button class="p-1 text-gray-400 hover:text-blue-600" title="Редактировать">
-                                    <i class="fas fa-edit"></i>
-                                </button>
-                                <button class="p-1 text-gray-400 hover:text-red-600" title="Удалить">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 mt-2 text-sm truncate">Роль: Контент-менеджер и веб-дизайнер. Контекст: Сайт для астрологического контента с гороскопами и личными консультациями. Страницы: Главная, Ежедневные гороскопы, Личный гороскоп, Консультации, Блог...</p>
-                    </div>
-                    <div class="p-4 history-item transition duration-300 hover:bg-gray-50 cursor-pointer">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <h3 class="font-semibold text-gray-800">Интернет-магазин эко-продуктов</h3>
-                                <p class="text-sm text-gray-500 mt-1">Сгенерировано: 12.06.2023 09:45</p>
-                            </div>
-                            <div class="flex space-x-2">
-                                <button class="p-1 text-gray-400 hover:text-purple-600" title="Использовать снова">
-                                    <i class="fas fa-recycle"></i>
-                                </button>
-                                <button class="p-1 text-gray-400 hover:text-blue-600" title="Редактировать">
-                                    <i class="fas fa-edit"></i>
-                                </button>
-                                <button class="p-1 text-gray-400 hover:text-red-600" title="Удалить">
-                                    <i class="fas fa-trash"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 mt-2 text-sm truncate">Роль: E-commerce специалист. Контекст: Интернет-магазин эко-продуктов с фильтрами и подпиской на еженедельные наборы. Страницы: Каталог, Карточка товара, Корзина, Оформление заказа, Личный кабинет...</p>
-                    </div>
-                </div>
-                <div class="p-4 border-t border-gray-200 flex justify-between items-center">
-                    <span class="text-sm text-gray-500">Показано 3 из 12 записей</span>
-                    <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition duration-300">
-                        Загрузить еще
-                    </button>
-                </div>
-            </div>
-        </div>
-        <!-- About Tab -->
-        <div id="about" class="tab-content">
-            <div class="bg-white rounded-lg shadow-lg p-8 mb-8">
-                <h2 class="text-3xl font-bold mb-6 text-gray-800">Как работает WebcoderAI</h2>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
-                    <div>
-                        <h3 class="text-xl font-semibold mb-4 text-purple-700"><i class="fas fa-cogs mr-2"></i>Технологии</h3>
-                        <p class="text-gray-700 mb-4">WebcoderAI использует передовые технологии искусственного интеллекта для преобразования ваших идей в готовые системные промпты:</p>
-                        <ul class="space-y-2 text-gray-700">
-                            <li class="flex items-start">
-                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
-                                <span>Модели OpenAI/GPT для анализа текста и генерации промптов</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
-                                <span>YOLOv8 (Ultralytics) для анализа загружаемых изображений</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i>
-                                <span>Шаблонизатор для структурирования промптов</span>
-                            </li>
-                        </ul>
                     </div>
-                    <div>
-                        <h3 class="text-xl font-semibold mb-4 text-purple-700"><i class="fas fa-random mr-2"></i>Процесс работы</h3>
-                        <div class="space-y-4">
-                            <div class="flex items-start">
-                                <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</div>
-                                <div>
-                                    <h4 class="font-medium text-gray-800">Ввод идеи</h4>
-                                    <p class="text-gray-600 text-sm">Опишите сайт, который вам нужен, в свободной форме</p>
-                                </div>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</div>
-                                <div>
-                                    <h4 class="font-medium text-gray-800">Анализ и обработка</h4>
-                                    <p class="text-gray-600 text-sm">ИИ анализирует ваш запрос и извлекает ключевые элементы</p>
-                                </div>
-                            </div>
-                            <div class="flex items-start">
-                                <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</div>
-                                <div>
-                                    <h4 class="font-medium text-gray-800">Генерация промпта</h4>
-                                    <p class="text-gray-600 text-sm">Создается структурированный системный промпт для DeepSite</p>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
-                <div class="mb-8">
-                    <h3 class="text-xl font-semibold mb-4 text-purple-700"><i class="fas fa-book mr-2"></i>Документация YOLOv8</h3>
-                    <p class="text-gray-700 mb-4">Для анализа изображений WebcoderAI использует YOLOv8 от Ultralytics. Вы можете загрузить изображение, и модель извлечет ключевые визуальные элементы для обогащения промпта.</p>
-                    <a href="https://docs.ultralytics.com/" target="_blank" class="inline-flex items-center px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg transition duration-300">
-                        <i class="fas fa-external-link-alt mr-2"></i>Открыть документацию YOLOv8
-                    </a>
-                </div>
-                <div>
-                    <h3 class="text-xl font-semibold mb-4 text-purple-700"><i class="fas fa-lightbulb mr-2"></i>Лучшие практики</h3>
-                    <div class="bg-purple-50 rounded-lg p-6">
-                        <h4 class="font-bold mb-3 text-purple-700">Как составлять эффективные запросы:</h4>
-                        <ul class="space-y-3 text-gray-700">
-                            <li class="flex items-start">
-                                <i class="fas fa-arrow-right text-purple-600 mt-1 mr-2"></i>
-                                <span>Указывайте конкретные страницы и функционал, которые вам нужны</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i class="fas fa-arrow-right text-purple-600 mt-1 mr-2"></i>
-                                <span>Описывайте целевую аудиторию и цели сайта</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i class="fas fa-arrow-right text-purple-600 mt-1 mr-2"></i>
-                                <span>Указывайте предпочтительные технологии, если они важны</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i class="fas fa-arrow-right text-purple-600 mt-1 mr-2"></i>
-                                <span>Добавляйте примеры похожих сайтов или стилей</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i class="fas fa-arrow-right text-purple-600 mt-1 mr-2"></i>
-                                <span>Используйте загрузку изображений для визуальных референсов</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- Account Tab -->
-        <div id="account" class="tab-content">
-            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
-                <div class="md:flex">
-                    <div class="md:w-1/3 bg-purple-700 text-white p-8">
-                        <div class="text-center mb-6">
-                            <div class="w-24 h-24 bg-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center">
-                                <i class="fas fa-user text-3xl"></i>
-                            </div>
-                            <h3 class="text-xl font-bold">Иван Петров</h3>
-                            <p class="text-purple-200">free@example.com</p>
-                        </div>
-                        <div class="space-y-4">
-                            <button class="w-full flex items-center px-4 py-3 bg-purple-800 hover:bg-purple-900 rounded-lg transition duration-300">
-                                <i class="fas fa-user mr-3"></i>Профиль
-                            </button>
-                            <button class="w-full flex items-center px-4 py-3 hover:bg-purple-800 rounded-lg transition duration-300">
-                                <i class="fas fa-heart mr-3"></i>Избранные промпты
-                            </button>
-                            <button class="w-full flex items-center px-4 py-3 hover:bg-purple-800 rounded-lg transition duration-300">
-                                <i class="fas fa-key mr-3"></i>API ключи
-                            </button>
-                            <button class="w-full flex items-center px-4 py-3 hover:bg-purple-800 rounded-lg transition duration-300">
-                                <i class="fas fa-cog mr-3"></i>Настройки
-                            </button>
-                            <button class="w-full flex items-center px-4 py-3 hover:bg-purple-800 rounded-lg transition duration-300">
-                                <i class="fas fa-sign-out-alt mr-3"></i>Выйти
-                            </button>
-                        </div>
-                    </div>
-                    <div class="md:w-2/3 p-8">
-                        <h2 class="text-2xl font-bold mb-6 text-gray-800">Настройки профиля</h2>
-                        <div class="mb-8">
-                            <h3 class="text-lg font-semibold mb-4 text-gray-800">Язык интерфейса</h3>
-                            <div class="flex space-x-4">
-                                <button class="px-6 py-2 bg-purple-600 text-white rounded-lg">Русский</button>
-                                <button class="px-6 py-2 border border-gray-300 hover:bg-gray-100 rounded-lg">English</button>
                             </div>
                         </div>
-                        <div class="mb-8">
-                            <h3 class="text-lg font-semibold mb-4 text-gray-800">API ключи</h3>
-                            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                                <div class="flex justify-between items-center mb-2">
-                                    <span class="font-medium">Основной ключ</span>
-                                    <button class="text-purple-600 hover:text-purple-800">
-                                        <i class="fas fa-copy"></i>
-                                    </button>
                                 </div>
-                                <div class="bg-white p-3 rounded border border-gray-200 text-sm font-mono overflow-x-auto">
-                                    sk_live_1234567890abcdef1234567890abcdef
-                                </div>
-                                <div class="text-xs text-gray-500 mt-2">Создан: 01.06.2023 • Использовано: 42 раза</div>
                             </div>
-                            <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition duration-300">
-                                <i class="fas fa-plus mr-2"></i>Создать новый ключ
-                            </button>
                         </div>
                         <div>
-                            <h3 class="text-lg font-semibold mb-4 text-gray-800">Подписка</h3>
-                            <div class="bg-white border border-purple-200 rounded-lg p-6 shadow-sm">
-                                <div class="flex justify-between items-center mb-4">
-                                    <div>
-                                        <h4 class="font-bold text-lg">Бесплатный тариф</h4>
-                                        <p class="text-gray-600">5 промптов в день • Без API доступа</p>
-                                    </div>
-                                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Активен</span>
-                                </div>
-                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                                    <div class="border border-gray-200 rounded-lg p-4 hover:border-purple-500 transition duration-300 cursor-pointer">
-                                        <h5 class="font-bold mb-2">Базовый</h5>
-                                        <p class="text-2xl font-bold mb-2">$9<span class="text-sm font-normal text-gray-500">/месяц</span></p>
-                                        <ul class="text-sm space-y-1 text-gray-600">
-                                            <li>30 промптов в день</li>
-                                            <li>API доступ</li>
-                                            <li>История на 30 дней</li>
-                                        </ul>
-                                    </div>
-                                    <div class="border border-purple-500 rounded-lg p-4 bg-purple-50 transition duration-300 cursor-pointer">
-                                        <h5 class="font-bold mb-2">Профессиональный</h5>
-                                        <p class="text-2xl font-bold mb-2">$19<span class="text-sm font-normal text-gray-500">/месяц</span></p>
-                                        <ul class="text-sm space-y-1 text-gray-600">
-                                            <li>100 промптов в день</li>
-                                            <li>Приоритетный API</li>
-                                            <li>История на 90 дней</li>
-                                            <li>Анализ изображений</li>
-                                        </ul>
-                                    </div>
-                                    <div class="border border-gray-200 rounded-lg p-4 hover:border-purple-500 transition duration-300 cursor-pointer">
-                                        <h5 class="font-bold mb-2">Командный</h5>
-                                        <p class="text-2xl font-bold mb-2">$49<span class="text-sm font-normal text-gray-500">/месяц</span></p>
-                                        <ul class="text-sm space-y-1 text-gray-600">
-                                            <li>300 промптов в день</li>
-                                            <li>5 пользователей</li>
-                                            <li>Общая история</li>
-                                            <li>Приоритетная поддержка</li>
-                                        </ul>
-                                    </div>
-                                </div>
-                                <button class="w-full py-3 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-lg transition duration-300">
-                                    Перейти на Профессиональный
-                                </button>
-                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
     <!-- Footer -->
     <footer class="bg-gray-800 text-white py-12">
         <div class="container mx-auto px-4">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="text-xl font-bold mb-4">Webcoder<span class="text-purple-400">AI</span></h3>
-                    <p class="text-gray-400">Мгновенная генерация системных промптов для DeepSite. Создавайте профессиональные сайты без навыков программирования.</p>
                 </div>
                 <div>
-                    <h4 class="font-semibold text-lg mb-4">Навигация</h4>
                     <ul class="space-y-2">
-                        <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Главная</a></li>
-                        <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">Как это работает</a></li>
-                        <li><a href="#history" class="text-gray-400 hover:text-white transition duration-300">История</a></li>
-                        <li><a href="#account" class="text-gray-400 hover:text-white transition duration-300">Профиль</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 class="font-semibold text-lg mb-4">Ресурсы</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Документация</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Блог</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Примеры промптов</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API</a></li>
                     </ul>
                 </div>
                 <div>
@@ -570,242 +234,299 @@ Your mission: build a flawless Web-MVP for "{{USER_INPUT}}", reflecting every nu
                     <ul class="space-y-2">
                         <li class="flex items-center">
                             <i class="fas fa-envelope mr-2 text-gray-400"></i>
-                            <span>support@webcoderai.com</span>
                         </li>
                         <li class="flex items-center">
-                            <i class="fas fa-phone mr-2 text-gray-400"></i>
-                            <span>+7 (123) 456-7890</span>
                         </li>
                         <li class="flex items-center">
-                            <i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
-                            <span>Москва, ул. Примерная, 123</span>
                         </li>
                     </ul>
-                    <div class="mt-4 flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-telegram text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-vk text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-github text-xl"></i>
-                        </a>
-                    </div>
                 </div>
             </div>
             <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-                <p>© 2023 WebcoderAI. Все права защищены.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Tab switching
-        document.querySelectorAll('nav a').forEach(link => {
-            link.addEventListener('click', function(e) {
-                e.preventDefault();
-                // Update active nav link
-                document.querySelectorAll('nav a').forEach(navLink => {
-                    navLink.classList.remove('text-purple-600', 'border-purple-600');
-                    navLink.classList.add('text-gray-500');
-                });
-                this.classList.remove('text-gray-500');
-                this.classList.add('text-purple-600', 'border-purple-600');
-                // Show corresponding tab
-                const tabId = this.getAttribute('href').substring(1);
-                document.querySelectorAll('.tab-content').forEach(tab => {
-                    tab.classList.remove('active');
-                });
-                document.getElementById(tabId).classList.add('active');
-                // Mobile menu handling
-                if(window.innerWidth < 768) {
-                    document.querySelector('.mobile-menu').classList.add('hidden');
-                }
-            });
-        });
-        // Mobile menu toggle
-        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
-            document.querySelector('.mobile-menu').classList.toggle('hidden');
-        });
-        // Generate prompt button
-        document.getElementById('generate-btn').addEventListener('click', function() {
-            const promptInput = document.getElementById('prompt-input').value.trim();
-            if(promptInput) {
-                // Show loading state
-                this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Генерация...';
-                this.disabled = true;
-                // Simulate API call with timeout
-                setTimeout(() => {
-                    // Switch to results tab
-                    document.querySelectorAll('.tab-content').forEach(tab => {
-                        tab.classList.remove('active');
-                    });
-                    document.getElementById('results').classList.add('active');
-                    // Update nav
-                    document.querySelectorAll('nav a').forEach(navLink => {
-                        navLink.classList.remove('text-purple-600', 'border-purple-600');
-                        navLink.classList.add('text-gray-500');
-                    });
-                    document.querySelector('nav a[href="#results"]').classList.remove('text-gray-500');
-                    document.querySelector('nav a[href="#results"]').classList.add('text-purple-600', 'border-purple-600');
-                    // Generate prompt with USER_INPUT variable
-                    const generatedPrompt = document.getElementById('generated-prompt');
-                    let promptText = generatedPrompt.textContent;
-                    promptText = promptText.replace(/{{USER_INPUT}}/g, promptInput);
-                    generatedPrompt.textContent = promptText;
-                    // Reset button
-                    this.innerHTML = '<i class="fas fa-magic mr-2"></i>Сгенерировать промпт';
-                    this.disabled = false;
-                    // Add to recent ideas (simulated)
-                    const recentIdeasContainer = document.getElementById('recent-ideas');
-                    const newIdea = document.createElement('div');
-                    newIdea.className = 'bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 border-l-4 border-purple-600';
-                    newIdea.innerHTML = `
-                        <p class="text-gray-700">"${promptInput}"</p>
-                        <p class="text-sm text-gray-500 mt-2">Только что</p>
-                    `;
-                    recentIdeasContainer.insertBefore(newIdea, recentIdeasContainer.firstChild);
-                    // Keep only 3 recent ideas
-                    if(recentIdeasContainer.children.length > 3) {
-                        recentIdeasContainer.removeChild(recentIdeasContainer.lastChild);
-                    }
-                }, 800);
-            } else {
-                alert('Пожалуйста, введите описание вашего сайта');
-            }
         });
-        // Copy button
         document.getElementById('copy-btn').addEventListener('click', function() {
             const promptText = document.getElementById('generated-prompt').textContent;
             navigator.clipboard.writeText(promptText).then(() => {
-                const originalIcon = this.innerHTML;
-                this.innerHTML = '<i class="fas fa-check"></i>';
                 setTimeout(() => {
-                    this.innerHTML = originalIcon;
                 }, 2000);
             });
         });
-        // Regenerate button
         document.getElementById('regenerate-btn').addEventListener('click', function() {
-            const originalIcon = this.innerHTML;
-            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
-            // Get current user input
-            const userInput = document.getElementById('prompt-input').value.trim();
-            // Simulate regeneration
             setTimeout(() => {
-                this.innerHTML = originalIcon;
-                // Add some variation to the prompt to simulate regeneration
-                const promptElement = document.getElementById('generated-prompt');
-                let promptText = promptElement.textContent;
-                // Simple modification for demo purposes
-                if(promptText.includes('React')) {
-                    promptText = promptText.replace('React', 'Vue.js');
-                } else if(promptText.includes('Vue.js')) {
-                    promptText = promptText.replace('Vue.js', 'Svelte');
-                } else {
-                    promptText = promptText.replace('Svelte', 'React');
-                }
-                // Ensure USER_INPUT is preserved
-                promptText = promptText.replace(/{{USER_INPUT}}/g, userInput);
-                promptElement.textContent = promptText;
             }, 1000);
         });
-        // Image upload
-        document.getElementById('upload-image').addEventListener('click', function() {
-            document.getElementById('image-input').click();
-        });
-        document.getElementById('image-input').addEventListener('change', function(e) {
-            if(e.target.files.length > 0) {
-                const fileName = e.target.files[0].name;
-                alert(`Изображение "${fileName}" будет проанализировано YOLOv8 для извлечения ключевых элементов`);
-                // Simulate image analysis and add keywords to prompt
-                setTimeout(() => {
-                    const promptInput = document.getElementById('prompt-input');
-                    promptInput.value += '\n\n(Изображение содержит: современный дизайн, синие акценты, минималистичный интерфейс)';
-                }, 1500);
             }
-        });
-        // History item click
-        document.querySelectorAll('.history-item').forEach(item => {
-            item.addEventListener('click', function() {
-                // Switch to results tab
-                document.querySelectorAll('.tab-content').forEach(tab => {
-                    tab.classList.remove('active');
-                });
-                document.getElementById('results').classList.add('active');
-                // Update nav
-                document.querySelectorAll('nav a').forEach(navLink => {
-                    navLink.classList.remove('text-purple-600', 'border-purple-600');
-                    navLink.classList.add('text-gray-500');
-                });
-                document.querySelector('nav a[href="#results"]').classList.remove('text-gray-500');
-                document.querySelector('nav a[href="#results"]').classList.add('text-purple-600', 'border-purple-600');
-                // Update prompt (simulated)
-                const title = this.querySelector('h3').textContent;
-                const description = this.querySelector('p:not(.text-sm)').textContent;
-                // Generate prompt with USER_INPUT variable
-                const promptText = `[Системный промпт]
-Переменная: USER_INPUT — это точная фраза, введённая пользователем: "${title}"
-You are DeepSight, a world-class AI architect and full-stack engineer with 30+ years of experience.
-Your mission: build a flawless Web-MVP for "${title}", reflecting every nuance пользовательской идеи.
-### Context
-• Project Name: ${title}
-• Audience: Users who need exactly what "${title}" предлагает
-• Key Value: Why "${title}" будет уникален на рынке
-### Pages & Modules (no empty tabs)
-• /** → Home
-    – Hero: "Welcome to ${title}"
-    – Input: show the original idea: "Вы хотите: ${title}"
-    – CTA: "Начать работу над ${title}"
-• /about → About
-    – Section title: "О проекте ${title}"
-    – Описание: глубокое объяснение, как ${title} решает проблемы пользователей
-### Core Functionality
-• Main feature: the site must address directly the need "${title}"
-• User flows: from ввод ${title} to готовый продукт "${title}"
-### Tech Stack
-• Frontend: React, Tailwind CSS
-• Backend: Node.js, Express
-• Database: MongoDB
-• Deployment: Vercel`;
-                document.getElementById('generated-prompt').textContent = promptText;
-                document.getElementById('prompt-input').value = title;
-            });
-        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=neuroseqa/webcoderai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepSite Prompt Generator</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
         }
         .prompt-box {
+            min-height: 200px;
+            max-height: 400px;
             overflow-y: auto;
         }
         .code-block {
             font-family: 'Courier New', monospace;
+            background-color: #1e293b;
+            color: #f8fafc;
             border-radius: 0.5rem;
             padding: 1.5rem;
             position: relative;
+            white-space: pre-wrap;
         }
         .tab-content {
             display: none;
         .tab-content.active {
             display: block;
         }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
         }
         ::-webkit-scrollbar {
             width: 8px;
         }
         ::-webkit-scrollbar-track {
             background: #f1f1f1;
         }
         ::-webkit-scrollbar-thumb {
             background: #888;
+            border-radius: 4px;
         }
         ::-webkit-scrollbar-thumb:hover {
             background: #555;
     </style>
 </head>
 <body class="bg-gray-50 font-sans">
+    <!-- Header -->
+    <header class="gradient-bg text-white">
+        <div class="container mx-auto px-4 py-12">
+            <div class="flex flex-col md:flex-row items-center justify-between">
+                <div class="mb-8 md:mb-0">
+                    <h1 class="text-4xl font-bold mb-4">DeepSite Prompt Generator</h1>
+                    <p class="text-xl opacity-90">Превратите вашу идею в готовый к запуску MVP с React/Next.js, TailwindCSS и FastAPI</p>
+                </div>
+                <div class="flex space-x-4">
+                    <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
+                        <i class="fab fa-react text-3xl text-blue-400"></i>
                     </div>
+                    <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
+                        <i class="fab fa-python text-3xl text-yellow-400"></i>
+                    </div>
+                    <div class="bg-white/10 backdrop-blur-sm p-4 rounded-lg">
+                        <i class="fas fa-bolt text-3xl text-purple-400"></i>
                     </div>
                 </div>
             </div>
         </div>
+    </header>
     <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Input Section -->
+        <section class="mb-12">
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-2xl font-bold mb-6 text-gray-800">Опишите ваш проект</h2>
+                <div class="mb-6">
+                    <label for="user-input" class="block text-lg font-medium text-gray-700 mb-3">Ваша идея:</label>
+                    <textarea id="user-input" class="w-full prompt-box p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-gray-700" placeholder="Пример: Сайт для астрологических консультаций с личным кабинетом, блогом и системой записи"></textarea>
                 </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Сложность проекта</label>
+                        <select id="complexity" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="basic">Базовый (1-3 страницы)</option>
+                            <option value="medium" selected>Средний (4-6 страниц)</option>
+                            <option value="advanced">Продвинутый (7+ страниц)</option>
+                        </select>
                     </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Стиль дизайна</label>
+                        <select id="design-style" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="minimal">Минимализм</option>
+                            <option value="modern" selected>Модерн</option>
+                            <option value="corporate">Корпоративный</option>
+                            <option value="creative">Креативный</option>
+                        </select>
                     </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Анимации</label>
+                        <select id="animations" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="basic">Базовые (CSS)</option>
+                            <option value="advanced" selected>Продвинутые (GSAP/Anime.js)</option>
+                            <option value="3d">3D (Three.js)</option>
+                        </select>
                     </div>
                 </div>
+                <button id="generate-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-6 rounded-lg transition duration-300 shadow-lg">
+                    <i class="fas fa-magic mr-2"></i>Сгенерировать системный промпт
+                </button>
             </div>
+        </section>
+        <!-- Results Section -->
+        <section id="results" class="hidden">
             <div class="flex flex-col md:flex-row gap-8">
                 <div class="md:w-2/3">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-2xl font-bold text-gray-800">Ваш системный промпт для DeepSite</h2>
+                        <div class="flex space-x-2">
+                            <button id="copy-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg transition duration-300">
+                                <i class="fas fa-copy mr-2"></i>Копировать
                             </button>
+                            <button id="regenerate-btn" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition duration-300">
+                                <i class="fas fa-sync-alt mr-2"></i>Перегенерировать
                             </button>
                         </div>
                     </div>
+                    <div class="code-block mb-6 relative">
+                        <div id="generated-prompt" class="whitespace-pre-wrap"></div>
                     </div>
+                    <div class="bg-indigo-50 rounded-xl p-6 mb-8">
+                        <h3 class="text-lg font-semibold text-indigo-800 mb-4"><i class="fas fa-lightbulb mr-2"></i>Как использовать этот промпт</h3>
+                        <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                            <li>Скопируйте весь текст промпта</li>
+                            <li>Вставьте в DeepSite или аналогичную систему</li>
+                            <li>Запустите генерацию кода</li>
+                            <li>Получите готовый MVP с настроенной структурой проекта</li>
+                        </ol>
                     </div>
                 </div>
+                <div class="md:w-1/3">
+                    <div class="bg-white rounded-xl shadow-lg p-6 sticky top-6">
+                        <h3 class="text-xl font-bold mb-4 text-gray-800">Детали вашего проекта</h3>
+                        <div class="mb-6">
+                            <h4 class="font-semibold text-gray-700 mb-2">Стек технологий</h4>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Next.js</span>
+                                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">TailwindCSS</span>
+                                <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">FastAPI</span>
+                                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">MongoDB</span>
+                                <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Anime.js</span>
+                                <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Three.js</span>
                             </div>
                         </div>
+                        <div class="mb-6">
+                            <h4 class="font-semibold text-gray-700 mb-2">Структура проекта</h4>
+                            <div class="bg-gray-50 p-4 rounded-lg">
+                                <div class="font-mono text-sm space-y-1">
+                                    <div>/src</div>
+                                    <div class="ml-4">/components</div>
+                                    <div class="ml-4">/pages</div>
+                                    <div class="ml-4">/lib</div>
+                                    <div class="ml-4">/styles</div>
+                                    <div class="ml-4">/hooks</div>
+                                    <div>/api</div>
+                                    <div>/public</div>
                                 </div>
                             </div>
                         </div>
                         <div>
+                            <h4 class="font-semibold text-gray-700 mb-2">Требования к качеству</h4>
+                            <ul class="space-y-2 text-sm text-gray-700">
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
+                                    <span>Адаптивный дизайн (mobile/desktop)</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
+                                    <span>Core Web Vitals ≥90</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
+                                    <span>Полная документация в README</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2"></i>
+                                    <span>Готовность к деплою на Vercel</span>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                 </div>
             </div>
+        </section>
+    </main>
     <!-- Footer -->
     <footer class="bg-gray-800 text-white py-12">
         <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div>
+                    <h3 class="text-xl font-bold mb-4">DeepSite Prompt Generator</h3>
+                    <p class="text-gray-400">Профессиональные системные промпты для быстрого создания MVP веб-приложений.</p>
                 </div>
                 <div>
+                    <h4 class="font-semibold text-lg mb-4">Технологии</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">React/Next.js</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">TailwindCSS</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FastAPI</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Three.js</a></li>
                     </ul>
                 </div>
                 <div>
                     <ul class="space-y-2">
                         <li class="flex items-center">
                             <i class="fas fa-envelope mr-2 text-gray-400"></i>
+                            <span>support@deepsite.ai</span>
                         </li>
                         <li class="flex items-center">
+                            <i class="fab fa-github mr-2 text-gray-400"></i>
+                            <span>github.com/deepsite</span>
                         </li>
                         <li class="flex items-center">
+                            <i class="fab fa-discord mr-2 text-gray-400"></i>
+                            <span>discord.gg/deepsite</span>
                         </li>
                     </ul>
                 </div>
             </div>
             <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>© 2023 DeepSite Prompt Generator. Все права защищены.</p>
             </div>
         </div>
     </footer>
     <script>
+        // Generate system prompt
+        document.getElementById('generate-btn').addEventListener('click', function() {
+            const userInput = document.getElementById('user-input').value.trim();
+            if (!userInput) {
+                alert('Пожалуйста, опишите ваш проект');
+                return;
+            }
+            // Show loading state
+            const btn = this;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Генерация...';
+            btn.disabled = true;
+            // Get selected options
+            const complexity = document.getElementById('complexity').value;
+            const designStyle = document.getElementById('design-style').value;
+            const animations = document.getElementById('animations').value;
+            // Simulate API call with timeout
+            setTimeout(() => {
+                // Generate project name (simplified)
+                const projectName = generateProjectName(userInput);
+                // Generate prompt based on user input
+                const prompt = generateSystemPrompt(userInput, projectName, complexity, designStyle, animations);
+                // Display results
+                document.getElementById('generated-prompt').textContent = prompt;
+                document.getElementById('results').classList.remove('hidden');
+                // Scroll to results
+                document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
+                // Reset button
+                btn.innerHTML = '<i class="fas fa-magic mr-2"></i>Сгенерировать системный промпт';
+                btn.disabled = false;
+            }, 1500);
         });
+        // Copy to clipboard
         document.getElementById('copy-btn').addEventListener('click', function() {
             const promptText = document.getElementById('generated-prompt').textContent;
             navigator.clipboard.writeText(promptText).then(() => {
+                const originalText = this.innerHTML;
+                this.innerHTML = '<i class="fas fa-check mr-2"></i>Скопировано!';
                 setTimeout(() => {
+                    this.innerHTML = originalText;
                 }, 2000);
             });
         });
+        // Regenerate prompt
         document.getElementById('regenerate-btn').addEventListener('click', function() {
+            const userInput = document.getElementById('user-input').value.trim();
+            if (!userInput) {
+                alert('Пожалуйста, опишите ваш проект');
+                return;
+            }
+            // Show loading state
+            const btn = this;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Перегенерация...';
+            btn.disabled = true;
+            // Get selected options
+            const complexity = document.getElementById('complexity').value;
+            const designStyle = document.getElementById('design-style').value;
+            const animations = document.getElementById('animations').value;
+            // Generate project name (simplified)
+            const projectName = generateProjectName(userInput);
+            // Simulate regeneration with slight variations
             setTimeout(() => {
+                const prompt = generateSystemPrompt(userInput, projectName, complexity, designStyle, animations, true);
+                document.getElementById('generated-prompt').textContent = prompt;
+                // Reset button
+                btn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i>Перегенерировать';
+                btn.disabled = false;
             }, 1000);
         });
+        // Helper functions
+        function generateProjectName(input) {
+            // Simple project name generation
+            const words = input.split(' ');
+            if (words.length >= 2) {
+                return `${words[0]} ${words[words.length-1]}`.replace(/[^a-zA-Zа-яА-Я0-9 ]/g, '');
+            }
+            return input.length > 20 ? input.substring(0, 20) + '...' : input;
+        }
+        function generateSystemPrompt(userInput, projectName, complexity, designStyle, animations, isRegenerate = false) {
+            // Determine pages based on complexity
+            let pages = [];
+            if (complexity === 'basic') {
+                pages = [
+                    "/ → Главная: герой-секция, CTA, краткий обзор",
+                    "/about → О проекте",
+                    "/contact → Контакты"
+                ];
+            } else if (complexity === 'medium') {
+                pages = [
+                    "/ → Главная: анимированный герой, фичи, отзывы",
+                    "/services → Услуги с карточками и фильтрами",
+                    "/about → О проекте с командой",
+                    "/blog → Блог с пагинацией",
+                    "/contact → Форма обратной связи"
+                ];
+            } else {
+                pages = [
+                    "/ → Главная: интерактивный герой, видео-презентация, CTA",
+                    "/services → Детальные услуги с ценами",
+                    "/portfolio → Портфолио с фильтрами",
+                    "/blog → Блог с категориями",
+                    "/about → Развернутая информация о проекте",
+                    "/team → Команда с соц. ссылками",
+                    "/contact → Многофункциональная форма",
+                    "/dashboard → Личный кабинет (для авторизованных)"
+                ];
+            }
+            // Determine features based on input
+            const features = [];
+            if (userInput.toLowerCase().includes('блог')) features.push("Блог с markdown-редактором");
+            if (userInput.toLowerCase().includes('личный кабинет') || userInput.toLowerCase().includes('аккаунт')) {
+                features.push("Система авторизации (JWT)");
+                features.push("Личный кабинет пользователя");
+            }
+            if (userInput.toLowerCase().includes('запись') || userInput.toLowerCase().includes('бронирование')) {
+                features.push("Система онлайн-записи");
+            }
+            if (features.length < 4) {
+                features.push("Адаптивный дизайн для всех устройств");
+                features.push("Оптимизированная загрузка (lazy loading)");
+                features.push("SEO-оптимизация");
+                features.push("Интеграция с аналитикой (Google Analytics)");
             }
+            // Determine tech stack
+            let frontendLibs = ["React Icons", "HeadlessUI"];
+            let backendLibs = [];
+            if (animations === 'advanced') {
+                frontendLibs.push("Anime.js", "Framer Motion");
+            } else if (animations === '3d') {
+                frontendLibs.push("Three.js", "React Three Fiber");
+            }
+            if (userInput.toLowerCase().includes('чат') || userInput.toLowerCase().includes('общение')) {
+                frontendLibs.push("Socket.IO");
+                backendLibs.push("WebSockets");
+            }
+            // Determine design
+            let colors = {
+                primary: '#6366f1',
+                secondary: '#8b5cf6',
+                accent: '#ec4899',
+                dark: '#1e293b',
+                light: '#f8fafc'
+            };
+            if (designStyle === 'minimal') {
+                colors = {
+                    primary: '#000000',
+                    secondary: '#333333',
+                    accent: '#666666',
+                    dark: '#111111',
+                    light: '#ffffff'
+                };
+            } else if (designStyle === 'corporate') {
+                colors = {
+                    primary: '#2563eb',
+                    secondary: '#1d4ed8',
+                    accent: '#3b82f6',
+                    dark: '#1e40af',
+                    light: '#eff6ff'
+                };
+            } else if (designStyle === 'creative') {
+                colors = {
+                    primary: '#ec4899',
+                    secondary: '#db2777',
+                    accent: '#f43f5e',
+                    dark: '#831843',
+                    light: '#fdf2f8'
+                };
+            }
+            // Generate the prompt
+            return `You are DeepSite, a world-class AI architect and full-stack engineer with 30+ years of experience.
+Mission: Build a flawless Web MVP for "${projectName}" based on the user request: "${userInput}"
+### Context
+• Project Name: ${projectName}
+• Audience: ${determineAudience(userInput)}
+• Key Value: ${determineUniqueValue(userInput)}
+• Complexity: ${complexity === 'basic' ? 'Basic' : complexity === 'medium' ? 'Medium' : 'Advanced'}
+### Pages & Structure
+${pages.map(page => `• ${page}`).join('\n')}
+### Core Features
+${features.slice(0, 6).map(feat => `• ${feat}`).join('\n')}
+### Design System
+• Colors:
+  - Primary: ${colors.primary}
+  - Secondary: ${colors.secondary}
+  - Accent: ${colors.accent}
+  - Dark: ${colors.dark}
+  - Light: ${colors.light}
+• Fonts: Inter (sans-serif), JetBrains Mono (monospace)
+• Animations: ${animations === 'basic' ? 'CSS transitions' : animations === 'advanced' ? 'Anime.js' : 'Three.js 3D'}
+• UI Components: Fully reusable with TailwindCSS variants
+### Tech Stack
+• Frontend:
+  - Next.js 13 (App Router)
+  - TailwindCSS + ${frontendLibs.join(', ')}
+  - TypeScript
+• Backend:
+  - FastAPI
+  - MongoDB (or PostgreSQL if relational data needed)
+  - ${backendLibs.length ? backendLibs.join(', ') : 'REST API'}
+• Deployment:
+  - Vercel (Frontend)
+  - Railway/Heroku (Backend)
+### Project Structure
+/src
+  /components - Atomic design structure
+  /pages - Next.js routes
+  /lib - Utilities and helpers
+  /styles - Global and CSS modules
+  /hooks - Custom React hooks
+  /api - API routes
+/public - Static assets
+### Quality Requirements
+• Performance: Core Web Vitals ≥90
+• Accessibility: WCAG 2.1 AA compliant
+• Responsiveness: Mobile-first, all breakpoints
+• Code Quality: ESLint + Prettier config
+• Documentation: Full README with setup instructions
+### Success Criteria
+The generated MVP must:
+1. Fully match the user request: "${userInput}"
+2. Be production-ready with one-click deploy
+3. Include all specified pages and features
+4. Achieve performance targets
+5. Have clean, maintainable code structure
+Ready to generate the perfect MVP for "${projectName}"!`;
+        }
+        function determineAudience(input) {
+            if (input.toLowerCase().includes('бизнес')) return "Small business owners and entrepreneurs";
+            if (input.toLowerCase().includes('услуг')) return "Clients looking for professional services";
+            if (input.toLowerCase().includes('образован')) return "Students and lifelong learners";
+            if (input.toLowerCase().includes('астролог')) return "People interested in astrology and horoscopes";
+            return "Users who need exactly what this project offers";
+        }
+        function determineUniqueValue(input) {
+            if (input.toLowerCase().includes('персонал')) return "Personalized approach for each user";
+            if (input.toLowerCase().includes('онлайн')) return "Fully online service with instant access";
+            if (input.toLowerCase().includes('уник')) return "Unique combination of features not found elsewhere";
+            return "High-quality solution tailored to specific needs";
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=neuroseqa/webcoderai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 Вы — DeepSite, ведущий AI-продуктовый архитектор и full-stack инженер с более чем 30-летним опытом создания генеративных веб-платформ.   Ваша задача: создать Web-MVP под названием **WebcoderAI** — интерактивный сайт, где пользователь вводит фразу «Хочу сайт для IT-услуг» или «Хочу сайт для астрологического контента», а система автоматически генерирует профессиональный системный промпт для DeepSite от Hugging Face.  ### Контекст • Проект: WebcoderAI   • Аудитория: маркетологи, разработчики, создатели контента   • Ценность: мгновенная выдача качественных системных промптов без необходимости быть экспертом в prompt-инжиниринге    ### Страницы и модули (без пустых вкладок) • /** → Главная     – Полноэкранный герой: «Введите идею сайта → Получите промпт для DeepSite»     – Поле ввода (многострочный чат-интерфейс)     – Кнопка «Сгенерировать промпт»     – Блок предпросмотра последних 3 введённых идей    • /results → Результат     – Блок кода с готовым системным промптом     – Кнопки «Скопировать» и «Перегенерировать»     – Боковая панель с советами по улучшению промптов    • /history → История     – Список всех сохранённых идей и сгенерированных промптов     – Действия: «Использовать снова», «Редактировать», «Удалить»    • /about → Как это работает     – Описание логики работы сервиса     – Ссылка на документацию YOLOv8 (Ultralytics) для опционального анализа изображений     – Лучшие практики по составлению промптов для DeepSite    • /account → Профиль     – Управление избранными промптами, API-ключами, переключатель языка (RU/EN)    ### Основной функционал • **Идея → Системный промпт**: преобразование свободного текста пользователя в структурированный промпт для DeepSite   • **Шаблонизатор**: подставляет роль, контекст, страницы, функционал, стек технологий и ожидаемый результат   • **История**: хранение и повторное использование прошлых промптов   • **Опциональная загрузка изображений**: YOLOv8 анализирует картинку и извлекает ключевые слова для обогащения промпта   • **Без пустых вкладок**: каждая страница отображает либо содержимое, либо информативный placeholder («Загружается…», «История пуста»)    ### Технический стек и структура кода • Frontend: Next.js + Tailwind CSS + TypeScript   • Backend: Node.js + FastAPI (Python) для эндпоинтов модели   • Модели: OpenAI/GPT или локальная LLM для генерации промптов; Ultralytics YOLOv8 для анализа изображений   • База данных: Supabase для истории и настроек пользователей   • Локализация: next-i18next (ru.json, en.json)   • Развёртывание: Vercel (фронтенд) + Railway/Render (бекенд)  /src /components ← PromptInput, PromptOutput, HistoryList, TipsSidebar /pages ← index.tsx, results.tsx, history.tsx, about.tsx, account.tsx /lib ← apiClient.ts, promptTemplate.ts, yolov8Client.ts /hooks ← usePrompt, useHistory, useYOLO /styles ← globals.css /i18n ← ru.json, en.json  ### Качество и результат • Полная адаптивность (мобильные и десктоп)   • Все кнопки и формы работают «из коробки»   • Задержка генерации промпта <1 с   • Сохранение и перегенерация работают корректно   • Inline-комментарии + README с инструкциями по запуску и деплою    **��анифест успеха:** WebcoderAI должен позволять любому пользователю ввести идею сайта и мгновенно получить готовый промпт для DeepSite, готовый к копированию и вставке.
-1. Добавьте в начало промпта явное объявление переменной В шапке промпта прямо пропишите:  arduino Копировать Редактировать Переменная: USER_INPUT — это строка, которую вводит пользователь (например: "Я хочу сайт для IT-услуг"). 2. Используйте USER_INPUT во всех ключевых разделах В каждой секции, где описывается цель, контекст, страницы и т.п., явно ссылайтесь на эту переменную:  yaml Копировать Редактировать Your mission: build a flawless Web-MVP for “{{USER_INPUT}}” — ... Context: • Project Name: {{USER_INPUT}}   • Audience: целевая аудитория вашего проекта {{USER_INPUT}}   • Key Value: специфическая ценность проекта {{USER_INPUT}} 3. Пример полного системного промпта с учётом динамики plaintext Копировать Редактировать Переменная: USER_INPUT — это точная фраза, введённая пользователем.  You are DeepSight, a world-class AI architect and full-stack engineer with 30+ years of experience.   Your mission: build a flawless Web-MVP for **“{{USER_INPUT}}”**, reflecting every nuance пользовательской идеи.  ### Context • Project Name: {{USER_INPUT}}   • Audience: Users who need exactly what “{{USER_INPUT}}” предлагает   • Key Value: Why “{{USER_INPUT}}” будет уникален на рынке  ### Pages & Modules (no empty tabs) • /** → Home     – Hero: “Welcome to {{USER_INPUT}}”     – Input: show the original idea: “Вы хотите: {{USER_INPUT}}”     – CTA: “Начать работу над {{USER_INPUT}}”  • /about → About     – Section title: “О проекте {{USER_INPUT}}”     – Описание: глубокое объяснение, как {{USER_INPUT}} решает проблемы пользователей  (и так далее по всем разделам — каждый раз подставляем {{USER_INPUT}})  ### Core Functionality • Main feature: the site must address directly the need “{{USER_INPUT}}”   • User flows: from ввод {{USER_INPUT}} to готовый продукт “{{USER_INPUT}}”  ### Tech Stack & Code Structure (без изменений)  ### Quality & Deliverables (без изменений)  **Примечание:**   Ни в одном месте не используйте жёстко прописанные названия — всегда подставляйте {{USER_INPUT}}.

 Вы — DeepSite, ведущий AI-продуктовый архитектор и full-stack инженер с более чем 30-летним опытом создания генеративных веб-платформ.   Ваша задача: создать Web-MVP под названием **WebcoderAI** — интерактивный сайт, где пользователь вводит фразу «Хочу сайт для IT-услуг» или «Хочу сайт для астрологического контента», а система автоматически генерирует профессиональный системный промпт для DeepSite от Hugging Face.  ### Контекст • Проект: WebcoderAI   • Аудитория: маркетологи, разработчики, создатели контента   • Ценность: мгновенная выдача качественных системных промптов без необходимости быть экспертом в prompt-инжиниринге    ### Страницы и модули (без пустых вкладок) • /** → Главная     – Полноэкранный герой: «Введите идею сайта → Получите промпт для DeepSite»     – Поле ввода (многострочный чат-интерфейс)     – Кнопка «Сгенерировать промпт»     – Блок предпросмотра последних 3 введённых идей    • /results → Результат     – Блок кода с готовым системным промптом     – Кнопки «Скопировать» и «Перегенерировать»     – Боковая панель с советами по улучшению промптов    • /history → История     – Список всех сохранённых идей и сгенерированных промптов     – Действия: «Использовать снова», «Редактировать», «Удалить»    • /about → Как это работает     – Описание логики работы сервиса     – Ссылка на документацию YOLOv8 (Ultralytics) для опционального анализа изображений     – Лучшие практики по составлению промптов для DeepSite    • /account → Профиль     – Управление избранными промптами, API-ключами, переключатель языка (RU/EN)    ### Основной функционал • **Идея → Системный промпт**: преобразование свободного текста пользователя в структурированный промпт для DeepSite   • **Шаблонизатор**: подставляет роль, контекст, страницы, функционал, стек технологий и ожидаемый результат   • **История**: хранение и повторное использование прошлых промптов   • **Опциональная загрузка изображений**: YOLOv8 анализирует картинку и извлекает ключевые слова для обогащения промпта   • **Без пустых вкладок**: каждая страница отображает либо содержимое, либо информативный placeholder («Загружается…», «История пуста»)    ### Технический стек и структура кода • Frontend: Next.js + Tailwind CSS + TypeScript   • Backend: Node.js + FastAPI (Python) для эндпоинтов модели   • Модели: OpenAI/GPT или локальная LLM для генерации промптов; Ultralytics YOLOv8 для анализа изображений   • База данных: Supabase для истории и настроек пользователей   • Локализация: next-i18next (ru.json, en.json)   • Развёртывание: Vercel (фронтенд) + Railway/Render (бекенд)  /src /components ← PromptInput, PromptOutput, HistoryList, TipsSidebar /pages ← index.tsx, results.tsx, history.tsx, about.tsx, account.tsx /lib ← apiClient.ts, promptTemplate.ts, yolov8Client.ts /hooks ← usePrompt, useHistory, useYOLO /styles ← globals.css /i18n ← ru.json, en.json  ### Качество и результат • Полная адаптивность (мобильные и десктоп)   • Все кнопки и формы работают «из коробки»   • Задержка генерации промпта <1 с   • Сохранение и перегенерация работают корректно   • Inline-комментарии + README с инструкциями по запуску и деплою    **��анифест успеха:** WebcoderAI должен позволять любому пользователю ввести идею сайта и мгновенно получить готовый промпт для DeepSite, готовый к копированию и вставке.
+1. Добавьте в начало промпта явное объявление переменной В шапке промпта прямо пропишите:  arduino Копировать Редактировать Переменная: USER_INPUT — это строка, которую вводит пользователь (например: "Я хочу сайт для IT-услуг"). 2. Используйте USER_INPUT во всех ключевых разделах В каждой секции, где описывается цель, контекст, страницы и т.п., явно ссылайтесь на эту переменную:  yaml Копировать Редактировать Your mission: build a flawless Web-MVP for “{{USER_INPUT}}” — ... Context: • Project Name: {{USER_INPUT}}   • Audience: целевая аудитория вашего проекта {{USER_INPUT}}   • Key Value: специфическая ценность проекта {{USER_INPUT}} 3. Пример полного системного промпта с учётом динамики plaintext Копировать Редактировать Переменная: USER_INPUT — это точная фраза, введённая пользователем.  You are DeepSight, a world-class AI architect and full-stack engineer with 30+ years of experience.   Your mission: build a flawless Web-MVP for **“{{USER_INPUT}}”**, reflecting every nuance пользовательской идеи.  ### Context • Project Name: {{USER_INPUT}}   • Audience: Users who need exactly what “{{USER_INPUT}}” предлагает   • Key Value: Why “{{USER_INPUT}}” будет уникален на рынке  ### Pages & Modules (no empty tabs) • /** → Home     – Hero: “Welcome to {{USER_INPUT}}”     – Input: show the original idea: “Вы хотите: {{USER_INPUT}}”     – CTA: “��ачать работу над {{USER_INPUT}}”  • /about → About     – Section title: “О проекте {{USER_INPUT}}”     – Описание: глубокое объяснение, как {{USER_INPUT}} решает проблемы пользователей  (и так далее по всем разделам — каждый раз подставляем {{USER_INPUT}})  ### Core Functionality • Main feature: the site must address directly the need “{{USER_INPUT}}”   • User flows: from ввод {{USER_INPUT}} to готовый продукт “{{USER_INPUT}}”  ### Tech Stack & Code Structure (без изменений)  ### Quality & Deliverables (без изменений)  **Примечание:**   Ни в одном месте не используйте жёстко прописанные названия — всегда подставляйте {{USER_INPUT}}.
+Вы — DeepSite, передовая нейросеть от Hugging Face, обладающая опытом 30+ лет в создании MVP веб-приложений.   Ваша задача — на основе **свободного текста пользователя** (USER_INPUT) **полностью генерировать** профессиональный **системный промпт** для DeepSite, который запускает код React/Next.js с TailwindCSS, AnimeJS, Three.js и FastAPI: готовый к первому запуску MVP сайта.  **ВАЖНО**: не просто вставляйте USER_INPUT в шаблон, а **преобразуйте** его в подробное ТЗ с контекстом, структурой страниц, ключевым функционалом, стеком технологий и требованиями к дизайну и производительности.  ---  ### ШАБЛОН ДЕЙСТВИЙ  1. **Анализ USER_INPUT**      • Определите сферу (IT-услуги, астрология, образование, и т.п.).      • Вычлените главную цель и уникальное ценностное предложение.  2. **Формирование контекста**      • Проект: короткое название, основанное на USER_INPUT.      • Аудитория: кто будет пользоваться.      • Ценность: что делает проект уникальным.  3. **Структура страниц & модулей**      Перечислите маршруты (routes) и кратко опишите содержимое каждой страницы, например:  / → Home: герой-секция, CTA, краткий обзор /services → Список услуг с карточками /about → О проекте и команде /contact → Форма обратной связи Добавьте столько страниц, сколько нужно для USER_INPUT-проекта.  4. **Ключевой функционал**   • Перечислите 4–6 основных функций (например, чат-бот, галерея, блог, личный кабинет).   • Укажите, какие библиотеки/API использовать (WebRTC, Web Audio API и т.п.).  5. **Дизайн и UX**   • Основная цветовая палитра и шрифты.   • Тип анимаций (AnimeJS, Three.js, WebGL).   • Поведенческие сценарии (hover-эффекты, scroll-триггеры).  6. **Технический стек & структура кода**   • Frontend: Next.js + TailwindCSS + TypeScript   • Backend: FastAPI или Node.js + GraphQL/REST   • Пример папок: `/src/components`, `/pages`, `/lib`, `/hooks`, `/styles`, `/i18n`  7. **Качество & Деплой**   • Адаптивность (mobile/Desktop), производительность (60 FPS, Core Web Vitals ≥90).   • Комментарии в коде и README с инструкциями по запуску и деплою на Vercel.  8. **Финальный вывод**   Сгенерируйте готовый к копированию **системный промпт** для DeepSite, полностью оформленный по пунктам 1–7, без инструкций пользователю.    ---  **Пример** (для USER_INPUT = «Я хочу сайт для IT-услуг»): You are DeepSite… Mission: build a Web MVP for “IT-услуги”… Context: Проект «IT-Services Pro», аудитория — малый бизнес… Pages: / →… Core Features:… Design:… Tech Stack:… Quality:… Deploy:…  Теперь, получив любой USER_INPUT, вы должны выдавать такую развернутую структуру, готовую к запуску MVP.