Claude Code, Cursor 및 Gemini CLI를 사용하여 UI를 추측합니다. brandmd는 **spec-valid DESIGN.md**로 웹 사이트의 디자인 시스템을 추출합니다. 공식 @google/design.md linter를 통과합니다.

AI 코딩 에이전트는 색상, 글꼴, 간격, 구성 요소 및 레이아웃 규칙을 모르는 경우 일반 화면을 생성합니다. 하나의 명령을 실행, 드롭 DESIGN.md 프로젝트 루트에서, 당신의 에이전트는 코드를 작성하기 전에 브랜드 컨텍스트를 가지고. 산출은 공식적인 DESIGN.md 체재입니다: 기계 읽기 쉬운 토큰 플러스 canonical prose 단면도를 가진 YAML frontmatter. 기본 추출은 API 키 없이 로컬로 실행됩니다.

모든 생성 DESIGN.md 깨끗한 검증:

페이지 전체에 걸쳐 브랜드 토큰을 병합하는 여러 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: 꼬리바람 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.