Точные цвета, шрифты и иконки брендов для агента, который верстает интерфейс

Как повторить

Neuform: стиль готового лендинга

1. Откройте neuform.ai/templates. Галерея доступна без входа.
2. Откройте карточку шаблона (адрес вида neuform.ai/template/<slug>) и переключитесь с PREVIEW на DESIGN.MD. Там шрифты с ролями, палитра в hex (кодах цветов) по шкале 50–900 для четырёх ролей, шаг сетки и отступы по ширинам экрана, радиусы, готовые строки box-shadow, тайминги и easing (кривые ускорения) анимаций, список «делай/не делай».
3. Перенесите значения в промпт как ограничения: «используй ровно эту палитру: #4268EB, #5C85FF..., радиусы 8px и 16px, тайминги 160/240/480мс» вместо пожеланий вроде «сделай в премиальном стиле».
4. Для отдельного приёма откройте страницу вида neuform.ai/skill/<slug>, например /skill/gsap для анимаций. Там лежит готовая строка для промпта с кнопкой Copy.
5. Кнопки DESIGN.md и HTML в правом верхнем углу карточки выгружают файл и код, для них нужен вход. Чтобы генерировать свои страницы, нужен бесплатный аккаунт и платный триал: 3 дня и 20 промптов на тарифе Pro, Max или Ultra. Помесячно Max стоит $50, Ultra $100.

theSVG: иконки брендов

1. Одна иконка без установки: https://thesvg.org/icons/{slug}/{variant}.svg или зеркало https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/{slug}/{variant}.svg. Здесь slug это короткое имя иконки, variant это вариант оформления, например /icons/github/default.svg. Ключи не нужны.
2. Весь реестр в JSON: curl https://thesvg.org/api/registry.json.
3. Для React, Vue или Svelte: npm install thesvg либо @thesvg/icons вместе с @thesvg/react, @thesvg/vue, @thesvg/svelte. Один файл без npm: npx @thesvg/cli add github.
4. Чтобы агент сам находил иконки в диалоге, подключите MCP-сервер (способ дать агенту внешние инструменты):

• Claude Code: claude mcp add thesvg -- npx -y @thesvg/mcp-server
• Claude Desktop или Cursor: добавьте блок в claude_desktop_config.json или .cursor/mcp.json:

     { "mcpServers": { "thesvg": { "command": "npx", "args": ["-y", "@thesvg/mcp-server"] } } }

Агенту станут доступны инструменты search_icons, get_icon, list_variants, get_icon_url и list_categories.

Как проверить результат

Вкладка DESIGN.MD должна показывать числа: hex, px, ms. Если LOADING висит дольше пары секунд, обновите страницу. Для theSVG попросите агента: «найди иконку slack через thesvg». Рабочая установка за секунды вернёт slug, варианты и категории.

Как это устроено

Реестр на 2,8 МБ зашит в MCP-пакет при сборке. Поиск работает без сети, в интернет обращается только get_icon, когда скачивает сам SVG. Зашитый реестр может отставать от сайта, свежие данные лежат в thesvg.org/api/registry.json.

У Neuform нет API, CLI и MCP, значения переносятся вручную. DESIGN.MD собирается автоматически по готовой странице и местами читается как технический отчёт.

Код theSVG открыт под лицензией MIT, логотипы остаются собственностью брендов. Используйте их по прямому назначению: в интерфейсах и интеграциях.

Ссылки

• Реестр theSVG: полный список иконок в JSON.