В сегодняшнем эксперименте попробуем сделать условные веб-дизайнерские ассеты для пяти различных тематик: игровую, финтеховскую, стилизованную под Web 1.0, экологическую, и для нейро-сервиса.
HUD-панель для киберспортивного шутера
Промт:
Game HUD overlay for competitive FPS, futuristic minimalism, translucent dark panels with neon cyan accents, health/ammo bars, minimap frame in corner, kill-feed ticker on right side, sharp angular corners, 4K clean vector style, transparent background PNG.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Инвентарь RPG в стиле dark fantasy
Промт:
Fantasy RPG inventory UI, 6×4 grid slots with ornate golden frames, weathered parchment texture background, item rarity color coding (gray/green/blue/purple/orange), drag-and-drop hover state, gothic serif typography labels, Diablo-inspired, seamless tileable.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Мобильные кнопки для казуальной головоломки
Промт:
Casual mobile game buttons set, rounded candy-like shapes, glossy gradients (strawberry pink, lemon yellow, mint green), soft drop shadows, pressed/disabled/normal states, chunky sans-serif labels, Dribbble-worthy, isolated on transparent background
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Дашборд криптобиржи
Промт:
Crypto trading dashboard UI, dark mode, real-time candlestick chart widget, portfolio balance card with sparkline, order book panel, monochrome palette with green/red accents, glassmorphism cards, Inter typography, Figma-ready components
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Карточка банковского перевода
Промт:
Mobile banking transfer confirmation screen, neumorphic soft UI, rounded 24px card, amount in large tabular numerals, sender/recipient avatars, animated checkmark success state, pastel blue and white palette, iOS human interface guidelines
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Онбординг для инвестиционного приложения
Промт:
Fintech onboarding illustration set, 3 screens (Welcome / Risk Profile / Goal Setting), flat isometric style, geometric shapes, muted teal and coral palette, subtle grain texture, friendly human figures, Stripe-inspired minimalism. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Гифки-баннеры 468×60 как в 2000-х
Промт:
Retro 2000s web banner set, 468×60 leaderboard format, animated GIF feel, Comic Sans and Impact fonts. Flashing “Under Construction” neon lime and hot pink palette caption, blinking text, Y2K kitsch. Make a sprite sheet for the caption animation to make it appear flashing. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Анимация кнопок
Промт:
“Web 1.0 style website UI asset sprite sheet. Retro 90s internet aesthetic. A grid of animated button states: normal, hover, pressed, disabled. Classic beveled 3D borders, chunky pixel edges, high-contrast colors (navy blue, silver gray, bright red, yellow, teal). Glossy gradient fills, 1px black outlines, drop shadows. Buttons labeled with pixel fonts are: ‘Submit’, ‘Home’, ‘Click Here’, ‘Download’. Include tiny animated GIF-style effects: blinking, marquee shimmer, ‘NEW!’ badges. Sprite sheet layout with evenly spaced frames, transparent background, seamless looping animation frames. Style references: GeoCities, AOL, Windows 95, Netscape Navigator. Pixel art, 8-bit/16-bit, dithered shading, low resolution, aliased edges, vibrant retro palette.”
Nano Banana Pro
Grok Image 2
Flux 2 Pro (несколько попыток)
Не смотря на сочный, душещипательно ностальгический дизайн кнопок, ни с одной из генерации Flux в цель не попала, что странно. Данная модель, работающая на принципе согласования потоков, проходила вполне надежное обучение и последовательная логика в генерации, а также работа с надписями не должны быть для нее чем-то сложными. Но тем не менее она почему-то рисует кнопки с функциями на неустановленном (возможно, клингонском) языке.
Дашборд углеродного следа
Промт:
Carbon footprint tracking dashboard, organic soft UI, earthy palette (sage green, terracotta, sand), circular progress rings, tree/leaf line icons, friendly rounded corners, paper texture subtlety, Patagonia brand aesthetic, light mode. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Карточки эко-товаров для маркетплейса
Промт:
Sustainable product cards, minimalist grid, recycled kraft paper texture, hand-drawn botanical illustrations, ingredient badges, “carbon neutral” tag, neutral beige palette, Etsy-meets-Aesop branding. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Мобильный трекер переработки
Промт:
Recycling habit tracker mobile app, playful flat illustrations, bin icons color-coded (plastic/glass/paper/organic), streak counter widget, confetti micro-interaction preview, Duolingo-style gamification, bright yet natural palette. Make it a usable PNG asset.
Nano Banana P
Grok Image 2
Flux 2 Pro
Чат-интерфейс AI-ассистента
Промт:
AI chat interface, streaming response animation frames, typing indicator (three dots pulse), message bubbles with gradient edge glow, code block styling with syntax highlight, dark violet-to-black background, Anthropic/OpenAI aesthetic, high fidelity. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Панель управления ML-моделью
Промт:
Make a web design asset: ML model monitoring dashboard, loss/accuracy line charts, confusion matrix heatmap, hyperparameter sliders, neuron network node visualization, dark terminal-inspired theme, monospace + Inter mix, lab-tech vibe. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
Онбординг для генератора изображений
Промт:
Make a web design asset: AI image generator onboarding, prompt input hero, style preset thumbnails grid (anime, photoreal, watercolor, 3D render), aspect ratio selector, generation progress ring, sleek dark UI with iridescent accent gradients, Midjourney/DALL-E hybrid. Make it a usable PNG asset.
Nano Banana Pro
Grok Image 2
Flux 2 Pro
По результатам, Grok 2.0 и Nano Banana Pro хорошо справились с задачами, в то время как Flux допускал местами ошибки, особенно в текстовых надписях.
В остальном, нейронки показывают неплохую “насмотренность” и выдают приемлемый результат, попадая в эстетику сходу в большинстве случаев. С их помощью можно запросто накидать референсов веб-аутлета в любом формате — включая даже Web 1.0 из баснословных времен — для включения оных в техзадание. Либо, если писать более проработанные промты и выделить бюджет для большой серии генераций, то получится соорудить из них качественное тело для сайта.
Автор: DimaIam
