Опиши свой проект одной фразой — и получи схему с настоящими логотипами

Попроси нейросеть-художника нарисовать схему «сайт на Vercel, база в Supabase, оплата через Stripe». Получишь красивую картинку — и логотипы, похожие на настоящие, как подделка с рынка. Буквы поплыли, иконки выдуманы, стрелка проткнула подпись.

Идея на одну строку: пишешь одну фразу про то, на чём собран твой проект, — и получаешь чистую схему архитектуры с официальными логотипами, в светлой и тёмной теме. Такую не стыдно вставить в README или показать в чате.

Почему это стало просто только сейчас

1 ноября 2026 вышел открытый навык stack-diagram (MIT) для Claude Code, Codex, Cursor и других агентов с поддержкой навыков. За сутки — почти 900 звёзд.

Хитрость в том, что он не рисует логотипы, а скачивает их: сначала из svgl, потом из devicon, потом из gilbarbara/logos или из репозитория самого бренда. Иконки AWS — из официального пакета AWS. Ничего не перекрашивается и не перерисовывается.

А линии агент прокладывает в обход подписей. Потом рендерит схему и сам её проверяет, прежде чем отдать. На выходе — один HTML-файл со шрифтами и логотипами внутри: открывается где угодно, даже без интернета. Ещё есть PNG, React-компонент или артефакт Claude.

Что ты узнаешь

• Из каких частей состоит твоё приложение: фронт, API, база, вход, оплата, деплой.
• Как они разговаривают: по HTTPS, SQL, RPC — и почему это важно подписать на стрелке.
• Как описать систему словами так, чтобы её понял и человек, и агент.
• Как ставить навыки агенту одной командой.

Стартовый промпт

Ставишь навык одной командой (нужны Python 3.9+ и интернет — за логотипами):

npx skills add caru-ini/stack-diagram

Дальше решает точность. «Нарисуй схему» даст угадайку. Перечисли части и связи:

Не уверен, из чего собран твой проект? Сначала спроси агента: «прочитай package.json и опиши мой стек одной фразой» — и отдай ответ навыку.

Что получится

Аккуратная схема: белые плитки с родными логотипами, пользователь слева, деплой снизу, подписанные стрелки ни разу не перечёркивают текст. Две версии — светлая и тёмная. В тёмной плитки остаются белыми, чтобы логотипы сохранили родные цвета.

Это то, что ставят в начало README серьёзных проектов. И то, что удобно показать другу или ментору: «смотри, вот как это устроено» — вместо пересказа на пальцах.

Честно о рамках: схема рисуется по твоему описанию, а не по коду. Описал неправильно — получишь красивую неправду. После рисования навык один раз предложит выложить схему в публичную галерею — показывает, что уйдёт наружу, и публикует только после двух «да». Сам промпт туда не отправляется.

Год назад «схема от ИИ» значила картинку с поддельными логотипами. Теперь агент берёт настоящие — и сам проверяет, что стрелки не врезаются в текст.

Источник: stack-diagram — схема архитектуры с официальными логотипами из одной фразы (GitHub, caru-ini)