TGViewer
Разбогатей или IT Разбогатей или IT @getrichortech · 10.8K subscribers
Post #260 4.53K
Разбогатей или IT Наткнулся тут на занятный буржуйский видос про Vibe Design, и решил попробовать сделать то что рассказывал индус на видео) И у меня возник вопрос, как там у дизайнеров интерфейсов дела? На этом канале мы уже увольняли разработчиков, продактов, маркетологов…
Спасибо за огонечки — набрали 100 вместе со звёздами!
Кидаю примерный промпт + связку.

Вчера я попробовал сделать то же самое, только через Claude Code — это куда быстрее и лучше, чем через Cursor.

Так что рекомендую для промпт-инжиниринга связку Claude 3.7 + Claude Code + Magic MCP
(кстати, сделано нашими ребятами — за что отдельный респект!).

Примерный стартовый промпт:

## Role
You are a senior front-end developer.

## Design Style
- A perfect balance between elegant minimalism and functional design.
- Soft, refreshing gradient colors that seamlessly integrate with the brand palette.
- Well-proportioned white space for a clean layout.
- Light and immersive user experience.
- Clear information hierarchy using subtle shadows and modular card layouts.
- Natural focus on core functionalities.
- Refined rounded corners.
- Delicate micro-interactions.
- Comfortable visual proportions.

## Technical Specifications
1. Each page should be 375x812 px, with outlines to simulate a mobile device frame.
2. Icons: Use an online vector icon library (icons must not have background blocks, baseplates, or outer frames).
3. Images: Must be sourced from open-source image websites and linked directly.
4. Styles: Use Tailwind CSS via CDN for styling.
5. Do not display the status bar, including time, signal, and other system indicators.
6. Do not display non-mobile elements, such as scrollbars.
7. All text should be only black or white.

## Task
Описываем идею и фичи проекта.
- Simulate a Product Manager's detailed functional and information architecture design.
- Follow the design style and technical specifications to generate a complete UI design plan.
- Create a UI.html file that contains all pages displayed in a horizontal layout.

Дальше корректируем результат коррекционными промптами, добавляем анимации и просим уже заверстать во фронт.

Чем хорош Claude Code — так это тем, что с первой итерации делает весьма норм (скрин прилагаю).

Кароч, пользуйтесь!
  • ❤ 32
  • 🔥 17
  • ⚡ 2
  • 😱 1
More from @getrichortech
  1. Sep 23, 2026Так, ну че все затестили Opus 5.5? Я думаю использовать в первую очередь для креативов, с…
  2. Sep 21, 2026Наверное одна из самых охуенных фич за последнее время. Понятно что там фаблы, его китайск…
  3. Jun 19, 2026Здарова, пацаны. Давненько не было. Занят был рабочими делами, но оно и к лучшему - теперь…
  4. May 20, 2026Залетаем на стрим-прожарочку https://youtube.com/live/M9TLNay7P3k?feature=share https://yo…
  5. May 20, 2026Алмас делает контент) Залетаем!!
  6. May 8, 2026photo post
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →