design-brain-memory

A persistent design knowledge system that captures inspiration from websites and screenshots, extracts reusable patterns, and builds a grep-friendly markdown knowledge graph.

Built on Agent Browser CLI for headless capture. No external LLM required — bring your own optionally for semantic enrichment.

Features

• Capture — Extract colors, typography, components, motion, layout, and CSS variables from any URL or screenshot
• Knowledge system — Three-space architecture (self / notes / ops) with pattern, decision, and principle notes
• Processing pipeline — Extract → Synthesize → Evolve → Verify with queue tracking
• Tailwind export — Generate tailwind.config.js from captured design tokens with auto-named colors from CSS variables
• Visual catalog — SVG palette, component, typography, and layout visualizations per capture
• Component isolation — Grouped JSON tokens by component kind (button, card, navigation, etc.)
• Version lineage — Fingerprint-based versioning with diffs between captures
• Responsive coverage — Capture at multiple viewports in a single pass
• Interaction states — Hover, focus, and active state extraction from runtime CSS
• Journey capture — Click-through exploration with per-step snapshots
• Ripgrep-friendly — Flat markdown files with YAML frontmatter, wiki links, and CSV relation graph

Install

npm install -g design-brain-memory
agent-browser install

Quick Start

# Initialize the knowledge system
design-brain-memory init --root .

# Capture a website
design-brain-memory ingest \
  --project my-project \
  --url https://stripe.com \
  --name "Stripe Homepage" \
  --tags fintech,payments

# Search with ripgrep
rg "button|card" .design-brain/notes/patterns/
rg "#533AFD" .design-brain/

# Or use the built-in search
design-brain-memory search --query "button hierarchy"

# Export Tailwind config
design-brain-memory export --project my-project --format tailwind

Commands

Command	Description
init	Create .design-brain/ with knowledge system directories
ingest	Capture inspiration from a URL or screenshot
outcome	Record a design outcome linked to inspirations
search	Keyword search across the brain
ask	Semantic search (requires LLM config)
install-skill	Install the Design Brain coding-agent skill
reindex	Regenerate markdown, visuals, and relation graph from database.json
export	Export tokens (tailwind, style-dictionary, or css-in-js)
compare	Compare two captures or version diff
batch	Batch capture from a URL list file
moodboard	Generate HTML + PNG visual moodboard
trends	Detect design trends across captures
scorecard	Audit codebase against captured design tokens
component-graph	Generate component relationship graph for a project
review	Generate design review checklist from captures and optional code scan
name-tokens	Preview human-readable token names
wiki	Generate wiki pages with project and shared context
graph	Generate interactive knowledge graph HTML
context	Generate AI-consumable context file (Claude/Cursor)
writing-style	Analyze writing style patterns from captures
system-diff	Diff design systems across projects or over time
taste	Build a taste profile from multiple URLs/domains

Ingest

design-brain-memory ingest \
  --project checkout-redesign \
  --project-name "Checkout Redesign" \
  --url https://stripe.com \
  --name "Stripe checkout inspiration" \
  --tags payments,checkout,cta \
  --journey-steps 4 \
  --viewport desktop=1440x1200 tablet=1024x1366 mobile=390x844

From a screenshot:

design-brain-memory ingest \
  --project checkout-redesign \
  --screenshot ./screens/inspo-hero.png \
  --name "Hero screenshot" \
  --tags hero,landing

Record Outcome

design-brain-memory outcome \
  --project checkout-redesign \
  --title "v1 shipped" \
  --description "Card-based checkout with clear primary CTA" \
  --inspired-by inspo-stripe-checkout-1234abcd \
  --tags shipped,frontend

Knowledge System

The brain organizes knowledge across five spaces:

.design-brain/
├── self/                          # Agent identity and methodology
│   ├── identity.md
│   └── methodology.md
├── notes/                         # Knowledge graph
│   ├── patterns/*.md              # Reusable design patterns
│   ├── decisions/*.md             # Design decisions with rationale
│   ├── principles/*.md            # Cross-project principles
│   └── mocs/                      # Maps of Content
│       ├── hub.md
│       ├── color-systems.md
│       ├── typography.md
│       ├── components.md
│       ├── layout.md
│       ├── motion.md
│       └── brand.md
├── ops/                           # Operations
│   ├── queue/*.yaml               # Processing pipeline queue
│   ├── sessions/*.md              # Session activity logs
│   └── maintenance.md             # Health signals
├── projects/                      # Raw captures
│   └── <project>/
│       ├── README.md
│       ├── inspirations/*.md
│       ├── outcomes/*.md
│       ├── tokens/                # Aggregated design tokens
│       ├── visuals/*.svg          # SVG visual catalog
│       └── tailwind.config.js     # Generated Tailwind config
└── graph/                         # Relation graph
    ├── entities.csv
    └── relations.csv

Note Schema

All notes use YAML frontmatter:

---
type: pattern | decision | principle
title: "Descriptive title"
sources: ["[[inspo-id]]"]
domains: [web, brand, mobile, design-systems]
tags: [relevant, tags]
confidence: emerging | established | canonical
created: 2026-02-18
updated: 2026-02-18
---

Processing Pipeline

Capture → Extract → Synthesize → Evolve → Verify

1. Capture — Ingest inspiration, create queue entry
2. Extract — Generate pattern and decision notes from capture data
3. Synthesize — Find connections, add wiki links, update MOCs
4. Evolve — Update older notes with new evidence, upgrade confidence
5. Verify — Check schema compliance, link health, MOC coverage

Retrieval

Designed for ripgrep:

# Find patterns by keyword
rg "button|card|navigation" .design-brain/notes/patterns/

# Find canonical patterns
rg "confidence: canonical" .design-brain/notes/

# Search by color hex
rg "#533AFD" .design-brain/

# Query the relation graph
rg "has_inspiration|inspired_by" .design-brain/graph/relations.csv

# Find notes linked to a specific capture
rg "inspo-stripe" .design-brain/notes/

Claude Code Plugin

design-brain ships as a Claude Code plugin with slash commands and hooks: Current plugin command coverage includes:

Command	Description
/db-capture	Capture inspiration from URL or screenshot
/db-extract	Extract patterns and decisions from captures
/db-synthesize	Find connections, update MOCs
/db-evolve	Backward pass — update older notes
/db-verify	Schema and link health check
/db-pipeline	Run all pipeline phases
/db-next	Show next pending queue item
/db-search	Ripgrep search across the brain
/db-ask	Ask semantic design questions with cited sources
/db-stats	Vault metrics and health report
/db-export	Export tokens (Tailwind, Style Dictionary, CSS-in-JS)
/db-compare	Compare two captures or version diff
/db-batch	Batch capture from URL list file
/db-moodboard	Generate visual moodboard
/db-trends	Detect design trends across captures
/db-scorecard	Audit codebase against captured tokens
/db-component-graph	Generate component relationship graph
/db-review	Generate design review checklist
/db-name-tokens	Preview semantic token names
/db-system-diff	Diff systems over time or across projects
/db-context	Generate AI-ready context markdown
/db-wiki	Generate project + shared wiki pages
/db-graph	Generate interactive graph visualization
/db-writing-style	Analyze UI writing style patterns
/db-taste	Build a taste profile from multiple inspirations

Hooks

Event	Action
SessionStart	Load identity context, queue status, maintenance signals
PostToolUse (Write)	Validate note frontmatter schema
Stop	Log session activity summary

Optional: LLM Enrichment

For semantic search and richer capture summaries, configure any OpenAI-compatible endpoint:

export DESIGN_BRAIN_LLM_BASE_URL="https://api.openai.com/v1"
export DESIGN_BRAIN_LLM_API_KEY="<your-key>"
export DESIGN_BRAIN_LLM_MODEL="gpt-4o-mini"

Or pass per command: --llm-base-url <url> --llm-api-key <key> --llm-model <model>

Not required for core functionality.

Packaging & Publish

npm login --auth-type=web
npm run release:check
npm publish --access public

release:check runs a clean build, tests, and npm pack --dry-run to verify publish contents.

Requirements

• Node.js 20+
• Agent Browser CLI (agent-browser install)

License

MIT