directionmd

Infer creative direction from any live URL into a DIRECTION.md file.

npx directionmd https://example.com

Other tools extract what a product looks like. directionmd infers WHY it looks that way. It reads a live page and generates prescriptive creative rules: design philosophy, brand voice, color intent, spacing principles, motion direction, content rules, accessibility stance, and responsive strategy.

Drop the output into a project and tell an AI agent "build something new that follows this direction." It will make good decisions in ambiguous situations because it understands the intent, not just the pixels.

For educational and experimental purposes only. See Disclaimer.

How it works

1. Extract — Puppeteer loads the page and scans every element for contextual patterns (not flat values)
2. Infer — A pattern-to-principle engine converts observed patterns into prescriptive creative rules
3. Generate — A prose-based DIRECTION.md is produced with 12 sections of creative direction

The key difference: other tools tell you the button radius is 8px. DIRECTION.md tells you "we use soft radius on interactive elements because we want actions to feel approachable. Containers stay sharp because structure should feel architectural."

What it captures

| Section | What it infers | |---------|---------------| | Brand Essence | Core values, personality, positioning, audience, differentiators | | Color Direction | Color philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules | | Typography Direction | Type system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy | | Spacing Direction | Grid system, whitespace philosophy, density, section rhythm, component spacing rules | | Motion Direction | Motion philosophy (static/functional/expressive), intent, duration rules, easing rules | | Voice & Content | Personality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice | | Component Direction | Shape language, elevation philosophy, border approach, button tiers, card consistency | | Layout Direction | Hero style, page flow narrative, container rules, alignment, scroll depth | | Accessibility | Stance (first-class or needs attention), specific gaps, remediation rules | | Responsive | Strategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries | | Creative Guardrails | Do's and don'ts generated from all inferences | | Agent Prompt | Copy-paste prompt with full creative direction for AI agents |

Install

npm install -g directionmd

Usage

directionmd https://example.com
directionmd https://example.com -o ./docs/brand-direction.md
directionmd https://example.com --json --wait 5000

Options

| Flag | Description | Default | |------|-------------|---------| | -o, --output <path> | Output file path | ./DIRECTION.md | | --json | Output raw inference data as JSON | false | | --wait <ms> | Wait time for dynamic content | 3000 |

Programmatic API

import { direction } from "directionmd";

const result = await direction("https://example.com");

result.markdown                     // DIRECTION.md content
result.inferences.brand             // brand essence, values, personality
result.inferences.color.rules       // prescriptive color rules
result.inferences.voice.philosophy  // personality, formality, perspective
result.inferences.motion.rules      // motion direction rules

Disclaimer

This tool is provided strictly for educational and experimental purposes. It reads publicly visible content and computed styles from rendered web pages.

• No proprietary code, assets, or non-public information is accessed
• Extracted data represents publicly visible content and styling
• No ownership of any product identity, brand, or design system is claimed
• Users are responsible for compliance with applicable terms of service
• This tool does not bypass any access controls, authentication, or rate limiting
• Output should not be used to create confusingly similar products or infringe on trademarks

The author provides this tool as-is with no warranty. Use responsibly.

License

MIT