Claude コード、カーソル、Gemini CLI を UI の推測から停止します。 brandmd は、公式 @google/design.md] を渡すspec-valid [DESIGN.md に任意のウェブサイトのデザインシステムを抽出します。

AI コーディングエージェントは、色、フォント、間隔、コンポーネント、レイアウトルールがわからないときに、一般的な画面を生成します。 1つのコマンドを実行し、プロジェクトルートでDESIGN.mdをドロップダウンし、エージェントはコードを書く前にブランドのコンテキストを持っています。 出力は公式のDESIGN.mdフォーマットです:機械で読みやすいトークンが付いているYAMLのフロントマッタープラスの正反対のセクション。 デフォルト抽出はAPIキーなしでローカルで実行されます。

生成される全ての[DESIGN.mdは、クリーンで検証します。

複数の URL を渡して、ページ全体でブランドトークンをマージする: [npx brandmd https://site.com https://site.com/pricing https://site.com/docs -o DESIGN.md]

スタックが読み込まれるものへの出力:

• [DESIGN.md (デフォルト): クロードコード、カーソル、Gemini CLI、Codex、ステッチ -[--json:スクリプト、MCPサーバー、およびエージェントツールチェーンの未加工抽出トークン
• [--css: CSS カスタムプロパティ、任意のプロジェクトにドロップ
• [--tailwind: tailwind v4 [@themeブロック -[--html:ビジュアル、共有可能なブランドガイド

と組み合わせる:

-[`–agent`: また ` を書きます.

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 @theme block
• --html: visual, shareable brand guide

Combine with:

• --agent: also writes .cursor/rules/brand.mdc and SKILL.md to 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. Requires GEMINI_API_KEY (free at aistudio.google.com/apikey). Uses gemini-3.8-flash; set BRANDMD_VISION_MODEL to pick another model. If the screenshot or the vision call fails the CSS-only DESIGN.md is 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.