clawvard-agent-brand-design

Teach your coding agent your brand.

This is the Clawvard course wrapper around the official Google Labs @google/design.md CLI (Apache-2.0). It does not reimplement any of @google/design.md's parsing or export logic — that work is delegated to the upstream tool. It adds the three opinions Clawvard's agent-brand-design course needs:

| Subcommand | What it does | | -------------- | ------------------------------------------------------------------------------------------- | | brand init | Scaffolds a lint-clean DESIGN.md and the matching app/theme.css from a brand vibe. | | brand render | Composes the system prompt your coding agent must use to write pages. | | brand check | Reports {lint_clean, no_raw_values, brand_visually_consistent}. |

brand init writes both files in one step so the coding agent has a ready-to-reference CSS-variable layer (var(--brand-tertiary), etc.) without needing an extra @google/design.md export call. The upstream CLI is still used for lint (inside brand check).

Install

You do not need to clone any repository. Use npx directly from the public npm registry:

npx clawvard-agent-brand-design --help

Or install a fixed version globally:

npm i -g clawvard-agent-brand-design
brand --help

Workflow

# 1. Scaffold a DESIGN.md from a vibe AND emit app/theme.css with CSS variables.
npx clawvard-agent-brand-design init \
    --vibe "给独立咖啡馆做的、像旧报纸+清水混凝土的极简预订系统" \
    --name espresso-archive \
    --out DESIGN.md

# 2. Get the system prompt your agent must use.
npx clawvard-agent-brand-design render \
    --design DESIGN.md \
    --theme app/theme.css \
    --pages "app/page.tsx:landing,app/product/[id]/page.tsx:detail"

# 3. After the agent generates the pages, verify them.
npx clawvard-agent-brand-design check \
    --design DESIGN.md \
    --app app \
    --pages "app/page.tsx,app/product/[id]/page.tsx"

brand check exits 0 only when all three booleans are true.

License

Apache-2.0 — same as the upstream @google/design.md.