Skip to content
BranchesTags

Repository files navigation

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

SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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

FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000

Programmatic API

import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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

About

Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md

dragoon0x.github.io/directionmd/

Topics

accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - Dragoon0x/directionmd: Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md · GitHub
Skip to content
BranchesTags
Repository files navigation
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
SectionWhat it infers
Brand EssenceCore values, personality, positioning, audience, differentiators
Color DirectionColor philosophy (minimal/disciplined/expressive), accent strategy, mood, gradient rules
Typography DirectionType system (single/paired), hierarchy approach, case rules, tracking, line-height philosophy
Spacing DirectionGrid system, whitespace philosophy, density, section rhythm, component spacing rules
Motion DirectionMotion philosophy (static/functional/expressive), intent, duration rules, easing rules
Voice & ContentPersonality, formality, pronoun strategy, CTA patterns, framing, active vs passive voice
Component DirectionShape language, elevation philosophy, border approach, button tiers, card consistency
Layout DirectionHero style, page flow narrative, container rules, alignment, scroll depth
AccessibilityStance (first-class or needs attention), specific gaps, remediation rules
ResponsiveStrategy (mobile-first/desktop-first), breakpoint rules, fluid type, container queries
Creative GuardrailsDo's and don'ts generated from all inferences
Agent PromptCopy-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
FlagDescriptionDefault
-o, --output <path>Output file path./DIRECTION.md
--jsonOutput raw inference data as JSONfalse
--wait <ms>Wait time for dynamic content3000
Programmatic API
import{direction}from"directionmd";constresult=awaitdirection("https://example.com");result.markdown// DIRECTION.md contentresult.inferences.brand// brand essence, values, personalityresult.inferences.color.rules// prescriptive color rulesresult.inferences.voice.philosophy// personality, formality, perspectiveresult.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
About
Infer creative direction from any live URL. 16 extraction passes, 22 inference modules, decision trees, design tokens, competitive positioning, drift monitoring. One crawl → DIRECTION.md
dragoon0x.github.io/directionmd/
Topics
accessibilityai-agentsbrand-voiceclicompetitive-analysiscreative-directiondesign-intelligencedesign-systemdesign-tokensmcp-server
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages