Долго думал, как попробовать протестировать Claude Design и на каких задачах. Но идея совместить сгенерированный интерфейс и создание игрового прототипа на основе него оказалась удачной - всё хорошо сложилось.
Закинул скриншот и за пару итераций получил игровой прототип UI, предварительно попросив того же Claude написать нужный промпт.
I'm attaching a UI screenshot as a reference.
Your task is to build a fully functional interactive HTML prototype based on it.
Requirements:
1. Recreate all visible screens/windows from the reference as faithfully as possible —
colors, layout, typography, spacing, icons (use emoji or SVG approximations if needed)
2. Implement navigation and transitions between all screens shown or implied
(buttons, tabs, modals, sidebars — make them all clickable and working)
3. Use a single self-contained HTML file with embedded CSS and JS
4. Add smooth CSS transitions between views (fade, slide — match the tone of the UI)
5. Make it responsive if the reference suggests it
6. Preserve the visual style: if it's dark/light, minimal/dense, flat/glassmorphism —
commit fully to that aesthetic
7. All interactive elements must work: menus open, forms are fillable,
navigation switches views
Output: one complete .html file, no external dependencies except Google Fonts if needed.
Do not explain the code — just produce the artifact.
Только представьте: 10 минут назад была идея и вы уже на её основе делаете прототип.
Да, это всего лишь прототип, и нужно
Кстати, иконки можно так же вытащить с референса, перевести в вектор через ИИ и использовать.
Лично по моему опыту, для создания более-менее вменяемого среднего по сложности интерфейса нужно около месяца. Сейчас, используя всего два инструмента, можно очень сильно сократить этот путь и получить приличный результат.
Скачать можно в ZIP, PDF, HTML, можно Send to Canva или Figma(но тут есть нюансы, так как нет прямого пути для Figma, есть обходные пути, спросите у своей LLM, она расскажет как).
P.S. Обдумывая этот пост, наткнулся ещё на одну мысль. Из-за большого количества инструментов и информационной каши у многих просто нет понимания, как их матчить между собой.
У меня есть крутой скилл ресёрчера с мультиагентной системой. Думаю, как появится время - пройдусь им и соберу стеки инструментов, которые хорошо дополняют друг друга и которые можно применять в работе, ускоряя процессы и помогая себе. Если интересно - поделюсь потом результатами. 🔥
@VAI_ART
#VAI_Practice