Делаем веб-дизайнерские референсы с помощью ИИ

В сегодняшнем эксперименте попробуем сделать условные веб-дизайнерские ассеты для пяти различных тематик: игровую, финтеховскую, стилизованную под 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 в цель не попала, что странно. Данная модель, работающая на принципе согласования потоков, проходила вполне надежное обучение ^[1] и последовательная логика ^[2] в генерации, а также работа с надписями не должны быть для нее чем-то сложными. Но тем не менее она почему-то рисует кнопки с функциями на неустановленном (возможно, клингонском) языке.

Дашборд углеродного следа 

Промт:
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 допускал местами ошибки ^[3], особенно в текстовых надписях. 

В остальном, нейронки показывают неплохую “насмотренность” и выдают приемлемый результат, попадая в эстетику сходу в большинстве случаев. С их помощью можно запросто накидать референсов веб-аутлета в любом формате — включая даже Web 1.0 из баснословных времен — для включения оных в техзадание. Либо, если писать более проработанные промты и выделить бюджет для большой серии генераций, то получится соорудить из них качественное тело для сайта.