⠀
В AI-разработке появился новый рабочий контекст: агенту дают не только задачу «сделай красиво», но и нормальные дизайн-референсы, правила, экраны, потоки и файл с дизайн-системой.
⠀
Два полезных инструмента здесь — DESIGNmd и Refero.
⠀
DESIGNmd — библиотека готовых
DESIGN.md. Это один markdown-файл с цветами, типографикой, spacing, компонентами и правилами интерфейса. Его кладёшь в корень проекта рядом с README, а потом говоришь Cursor, Claude Code или другому агенту: используй этот файл как дизайн-систему.⠀
Там есть сотни бесплатных дизайн-систем. Можно искать на сайте, через CLI или MCP. CLI ставится через
npm install -g designmd. По публичной странице: поиск и просмотр тегов работают без ключа, скачивание/просмотр полного файла/загрузка своих китов требуют бесплатный API key. Отдельных платных тарифов на сайте я не нашёл.⠀
Refero решает другую задачу. Это база реальных интерфейсов: 130k+ экранов из 400+ web/iOS-продуктов, page types, flows, UX patterns, UI elements, поиск по картинке, Figma-плагин, MCP и Refero Skill для агентов.
⠀
Если DESIGNmd отвечает за «в каком стиле агент должен строить», Refero отвечает за «на какие реальные продукты ему смотреть перед тем, как строить». Например: найти pricing page, onboarding, dashboard, paywall, filter/sorting, modal, table — и дать агенту конкретные интерфейсные решения вместо абстрактного вкуса.
⠀
По цене Refero: Free даёт ограниченный доступ, примерно несколько процентов библиотеки. Pro — $10/мес при годовой оплате ($120/год). Team — $12/мес за пользователя при годовой оплате ($140/год), с командными bookmarks. Для студентов есть 40% скидка, enterprise — по запросу.
⠀
Как я бы этим пользовался:
⠀
1. В Refero найти 5–10 экранов под конкретную задачу: pricing, onboarding, dashboard, checkout, settings.
2. Вытащить из них структуру: блоки, порядок, состояния, фильтры, пустые экраны, ошибки.
3. В DESIGNmd взять подходящую дизайн-систему и положить
DESIGN.md в проект.4. Дать агенту оба типа контекста: «вот как должен выглядеть продукт» и «вот какие UX-паттерны работают в похожих продуктах».
⠀
Тогда агент перестаёт собирать очередной стерильный иишный SaaS-экран из воздуха. Он сначала смотрит на реальные интерфейсы, потом работает внутри выбранной дизайн-системы.
⠀
Для вайбкодинга это экономит часы. Для продукта с командой — снижает хаос, когда каждый новый экран выглядит как отдельный эксперимент.
🧱🔧🧬📈💎🟣🟢
⠀
Источники: DESIGNmd, DESIGNmd CLI, DESIGNmd MCP, Refero, Refero Pricing
Инструменты и кейсы: @human20
Внедрение: human20.app