YT · YOUTUBE// 4h agoOPENSOURCE RELEASE

Chrome extension turns websites into agent-ready DESIGN.md skills

design-md-chrome is an open-source Chrome extension that reads a website's visual system and turns it into structured DESIGN.md or SKILL.md guidance for AI coding tools like Claude Code and Codex. It extracts typography, colors, spacing, radii, shadows, motion, and accessibility constraints, then packages them as design rules with explicit do/don't guidance.

// ANALYSIS

Hot take: this is less of a scraper and more of a constraint compiler for AI UI generation, which is exactly where these tools usually fail.

–It converts live-site styling into agent-readable design guidance instead of leaving models to infer tokens from screenshots or prose.
–The dual output is practical: `DESIGN.md` for humans and `SKILL.md` for tools that can consume rules directly.
–The accessibility and anti-pattern sections are the strongest part, because they turn a visual reference into enforceable implementation constraints.
–The main risk is fidelity: CSS signals capture surface-level design, but not every product decision or interaction rule lives in the styles.

// TAGS

open-sourcechrome-extensiondevtoolideagent

DISCOVERED

4h ago

2026-05-01

PUBLISHED

4h ago

2026-05-01

RELEVANCE

8/ 10

AUTHOR

Github Awesome