
yuvrajangadsingh/brandmd
Developer toolsЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
Не позволяйте Claude Code/Cursor угадывать пользовательский интерфейс. Извлеките систему дизайна любого веб-сайта в DESIGN.md, который передает официальный @google/design.md linter.
Обзор
Остановите Claude Code, Cursor и Gemini CLI от угадывания пользовательского интерфейса. Brandmd извлекает систему дизайна любого веб-сайта в официальный @google/design.md linter. Агенты кодирования ИИ генерируют общие экраны, когда они не знают ваши цвета, шрифты, интервалы, компоненты и правила макета. Запустите одну команду, опустите DESIGN.md в корень вашего проекта, и ваш агент будет иметь контекст бренда, прежде чем он напишет код. Выход является официальным форматом DESIGN.md: фронтматер YAML с машиночитаемыми токенами плюс канонические разделы прозы. Экстракция по умолчанию выполняется локально без ключа API. Каждый сгенерированный DESIGN.md подтверждает чистоту: Передайте несколько URL-адресов для объединения токенов бренда на страницах: npx brandmd https://site.com https://site.com/pricing https://site.com/docs -o DESIGN.
Обзор (машинный перевод)
Остановите Claude Code, Cursor и Gemini CLI от угадывания пользовательского интерфейса. Brandmd извлекает систему дизайна любого веб-сайта в spec-valid DESIGN.md, которая проходит официальный @google/design.md linter.
Агенты кодирования ИИ генерируют общие экраны, когда они не знают ваши цвета, шрифты, интервалы, компоненты и правила макета. Запустите одну команду, сбросьте T2 в корень вашего проекта, и ваш агент будет иметь контекст бренда, прежде чем он напишет код. Выход является официальным форматом DESIGN.md: фронтматер YAML с машиночитаемыми токенами плюс канонические разделы прозы. Экстракция по умолчанию выполняется локально без ключа API.
Каждый из них [3] является чистым.
Передайте несколько URL-адресов для объединения токенов бренда на разных страницах: npx brandmd https://site.com https://site.com/pricing https://site.com/docs -o DESIGN.md
Выводы на то, что ваш стек читает:
DESIGN.md (по умолчанию): для Claude Code, Cursor, Gemini CLI, Codex, Stitch
--json: необработанные токены для скриптов, MCP-серверов и агентов
--css: CSS пользовательские свойства, падение в любой проект--tailwind: Блок Tailwind v4@theme--html: визуальное, совместное руководство по бренду
В сочетании с:
--agent: также пишет '.
Эта страница переведена автоматически. Технические детали смотрите в оригинале.
README
Показан фрагмент оригинального README. Открыть оригинал.
brandmd
Stop Claude Code, Cursor, and Gemini CLI from guessing your UI. brandmd extracts any website’s design system into a spec-valid DESIGN.md that passes the official @google/design.md linter.
AI coding agents generate generic screens when they don’t know your colors, fonts, spacing, components, and layout rules. Run one command, drop DESIGN.md in your project root, and your agent has brand context before it writes code. Output is the official DESIGN.md format: YAML frontmatter with machine-readable tokens plus canonical prose sections. Default extraction runs locally with no API key.
npx brandmd https://stripe.com -o DESIGN.md
Every generated DESIGN.md validates clean:
npx @google/design.md lint DESIGN.md # 0 errors, 0 warnings
Pass multiple URLs to merge brand tokens across pages: npx brandmd https://site.com https://site.com/pricing https://site.com/docs -o DESIGN.md
Outputs to whatever your stack reads:
DESIGN.md(default): for Claude Code, Cursor, Gemini CLI, Codex, Stitch--json: raw extracted tokens for scripts, MCP servers, and agent toolchains--css: CSS custom properties, drop into any project--tailwind: Tailwind v4@themeblock--html: visual, shareable brand guide
Combine with:
--agent: also writes.cursor/rules/brand.mdcandSKILL.mdto both.agents/skills/brand-style/(the universal Agent Skills path used by skills.sh across 50+ agents) and.claude/skills/brand-style/(backward-compat for direct Claude Code users). No manual wiring. Picked up automatically by Claude Code, Cursor, Codex, Gemini CLI, Kiro CLI, and the rest of the skills.sh ecosystem. Schema-compatible with Anthropic Claude Code Skills, google/skills, and vercel-labs/agent-skills.--dark: also extract dark mode tokens--vision: adds illustration style, photography mood, copywriting voice, and microcopy patterns from a screenshot. RequiresGEMINI_API_KEY(free at aistudio.google.com/apikey). Usesgemini-3.8-flash; setBRANDMD_VISION_MODELto pick another model. If the screenshot or the vision call fails the CSS-onlyDESIGN.mdis still written and the run exits 1.
Works as brand context for Claude Code, Cursor rules, Gemini CLI, Codex, Google Stitch, MCP servers, and any coding agent that reads markdown.
Рекомендуемые инструменты
Попробуйте другой запрос или уберите фильтр.
Установка
npx skillfish add yuvrajangadsingh/brandmd