Design is direction,
not decoration.

What are you building?
  → Interactive element
    What does it do?
      → Triggers navigation
        Text link. Accent color, no background.
      → Triggers an action
        Primary action on this page?
          → Yes: Primary button. Filled accent. ONE per viewport.
          → No:  Secondary button. Ghost style. Same radius.
      → Accepts input
        Match input styling. Never rely on placeholder as label.
  → Container
    Needs visual separation?
      → With elevation: Card. Shadow level 1.
      → Subtle:        Background change. No shadow.
      → Structural:    Invisible wrapper. No styling.

# Basic
directionmd https://example.com

# Multi-page crawl
directionmd https://example.com --depth 5

# LLM creative brief
ANTHROPIC_API_KEY=sk-... directionmd https://example.com --llm

# Design tokens
directionmd https://example.com --tokens

# Competitive analysis
directionmd https://example.com --compare https://competitor.com

# Drift monitoring
directionmd https://example.com --save-baseline ./baseline.json
directionmd https://example.com --baseline ./baseline.json

# Everything
ANTHROPIC_API_KEY=sk-... directionmd https://example.com \
  --depth 5 --llm --tokens --json \
  --compare https://competitor.com

import { direction } from "directionmd"

const result = await direction("https://example.com", {
  depth: 5, llm: true, tokens: true
})

result.markdown                // DIRECTION.md
result.inferences.archetype    // brand archetype
result.tokens.css              // CSS custom properties
result.tokens.tailwind         // Tailwind config
result.decisionTrees.component // traversable tree
result.platforms.react         // React/Tailwind direction