ContextExtract AI: Normalized Design Systems for Coding Agents

I made a Chrome extension that turns webpage styles into DESIGN.md for AI coding

Genuinely useful wedge, I hit this exact pain in AI frontend work. Two upgrades that would take it from neat to indispensable: 1) Tokens alone do not fix generic output, because the agent still does not know the RULES. A color and spacing dump does not tell it that the primary button is this color plus this radius plus this padding, or that cards use shadow-sm with a 16px gap, or what the type hierarchy is. So extract the relationships and usage rules, not just values, and emit DESIGN.md as an opinionated style guide the agent follows, not a variable list. That is the part that actually changes what Claude/Cursor generates. 2) Your hardest problem and real moat is normalization. Computed styles on a live page are noisy, you will pull 200 near-identical colors and 40 font sizes, which is useless to an AI. The work is clustering and snapping them to a clean, sane scale (a real spacing ramp, a deduped palette, a type scale). "Clean opinionated tokens" beats "everything on the page" every time. 3) On distribution and format: you are riding the AI-coding wave, so meet each tool where it reads config, output cursor rules and a CLAUDE.md-native format, not only DESIGN.md, so it drops straight into the agent's context. And those AI-coding communities are both your audience and your channel. If building the rules-extraction or the token-normalization engine faster helps, that is what we do at Moonshift (moonshift.io): describe it and it builds and deploys overnight while you sleep, code in your repo. First run completely free, no cards, no strings attached.

Genuinely useful wedge, I hit this exact pain in AI frontend work. Two upgrades that would take it from neat to indispensable: 1) Tokens alone do not fix generic output, because the agent still does not know the RULES. A color and spacing dump does not tell it that the primary button is this color plus this radius plus this padding, or that cards use shadow-sm with a 16px gap, or what the type hierarchy is. So extract the relationships and usage rules, not just values, and emit DESIGN.md as an opinionated style guide the agent follows, not a variable list. That is the part that actually changes what Claude/Cursor generates. 2) Your hardest problem and real moat is normalization. Computed styles on a live page are noisy, you will pull 200 near-identical colors and 40 font sizes, which is useless to an AI. The work is clustering and snapping them to a clean, sane scale (a real spacing ramp, a deduped palette, a type scale). "Clean opinionated tokens" beats "everything on the page" every time. 3) On distribution and format: you are riding the AI-coding wave, so meet each tool where it reads config, output cursor rules and a CLAUDE.md-native format, not only DESIGN.md, so it drops straight into the agent's context. And those AI-coding communities are both your audience and your channel. If building the rules-extraction or the token-normalization engine faster helps, that is what we do at Moonshift (moonshift.io): describe it and it builds and deploys overnight while you sleep, code in your repo. First run completely free, no cards, no strings attached.

Useful direction. I would make the output explain where tokens were observed, not just list values. For AI coding, the agent needs examples like primary buttons on pricing pages use this treatment, dense tables use this spacing, form errors use this color and copy pattern. For stress tests, try SaaS dashboards, docs sites, and older Bootstrap apps. They will show whether your extractor can ignore noise and recover a small design system. Disclosure since I build adjacent browser tooling: FSB lets Codex or Claude inspect real pages through an owned Chrome tab, which is handy for this kind of live page extraction and verification: https://github.com/LakshmanTurlapati/FSB