Vibe Coding: Как починить дизайн с DESIGN.md
Боль
Одна из главных проблем вайбкодинга — получить хороший дизайн 🫠. Функционал с [[04_References/Glossary/Claude Code|Claude code]] и агентами получается норм, а UI — всегда уныло. Пробовал платный Windtail ради референсов для Claude, но всё равно было грустно.
Решение: DESIGN.md
Концепцию придумал Google stitch — простой markdown-файл в корне проекта, который агент читает и понимает:
- Цвета
- Типографику
- Отступы
- Компоненты
Никакого Figma, никаких схем — только текст.
Готовые решения
На GitHub есть репозиторий VoltAgent/awesome-design-md с 40+ готовыми DESIGN.md из реальных продуктов:
- Stripe
- Apple
- Spotify
- Airbnb
- Notion
- Figma
- Другие
Как использовать
- Скопируйте нужный DESIGN.md в папку проекта
- Попросите Claude Code переделать UI по этому файлу
- Качество заметно вырастает — не идеально, но уже можно показывать реальным пользователям
Термин: DESIGN_md