mirror of
https://github.com/Manavarya09/design-extract.git
synced 2026-09-19 02:41:14 +08:00
Manavarya09
48b92c794b
Reliability fixes that restore trust on real sites: - colors.js: brand-color detection rewritten — ranks chromatic clusters by interactiveBg x100 + saturation x2 + log(usage), requires HSL sat >25 or an interactive-bg hit. Linear primary: #d0d6e0 (gray) -> #e4f222 (lime). Stripe: #533afd. Verified on 5 ground-truth sites. - accessibility.js + crawler.js: crawler now emits hasText per element (direct text-node child with visible chars); WCAG extractor filters decorative glyph spans, transparent overlays, non-text containers. Linear: 25% (171 failing pairs) -> 83% (1 failing pair). - scoring.js: rubric recalibrated against Stripe/Linear/Vercel/GitHub/Apple. Loosened color/shadow/radii/type-scale thresholds; softened spacing no-base penalty when tokenization is present; cssHealth now weighted in the overall. Linear 47->76, Stripe 81->88, Apple 83->86. New CLI flags: - --selector <css>: scope extraction to a DOM subtree. Stripe: 2409 -> 112 elements when scoped to footer. Falls back to full doc if invalid. - --system-chrome: channel: 'chrome' in Playwright launch; skips the bundled Chromium download. - --json: full extraction to stdout (already partial in v7, now first-class and documented). New distribution surfaces (each publishes to its own registry): - vscode-extension/: Extract-from-URL + inject-into-workspace commands. - raycast-extension/: Extract, Score, Copy-CLI commands. - figma-plugin/: URL or paste-JSON -> Figma Variables with multi-mode. - github-action/: "Design regression guard" runs designlang on PRs, diffs tokens vs baseline, comments the delta, optional fail-on-change. - smithery.yaml + smithery.dockerfile + docs/MCP-REGISTRY.md: MCP registry submission checklist. - chrome-extension/PRIVACY.md + STORE_LISTING.md: Chrome/Firefox/Edge store listing prep (extension code already existed in v7.1). - docs/LAUNCH.md: PH + Show HN + Twitter copy + day-of checklist. - docs/demo.tape: VHS tape for the animated README hero. README updated: hero references demo.gif with PNG fallback, adds "Install everywhere" table for the new surfaces, documents the three new flags. .npmignore excludes every companion-surface directory so the npm tarball stays 109KB / 73 files. All 275 tests pass.
designlang — Chrome extension
Right-click → Extract design on any page. The extension opens designlang.manavaryasingh.com with the current tab's URL prefilled, so extraction starts with one click instead of switching windows and pasting.
Features
- One-click handoff from any
http(s)://page to the hosted extractor - "Copy CLI" button — drops
npx designlang <url>straight into your clipboard - Zero tracking, zero analytics, zero permissions beyond
activeTab
Install (developer mode, pending Chrome Web Store publish)
- Clone this repo.
- Open
chrome://extensionsin Chromium / Chrome / Edge / Arc / Brave. - Toggle Developer mode (top right).
- Click Load unpacked and pick the
chrome-extension/folder in this repo. - Pin the extension from the puzzle-piece menu.
Permissions
activeTab— to read the URL of the tab you triggered the popup on.host_permissionsscoped tohttps://designlang.manavaryasingh.com/*for the handoff.
No content scripts, no remote code, no background service worker. The whole extension is ~3 KB of static HTML/JS/CSS.
Roadmap
- Chrome Web Store listing.
- Optional right-click context menu on links: "Extract design from this link".
- DevTools panel that shows the extracted tokens for the current tab alongside the real DOM selector that produced them.
- Firefox + Edge listings (the same MV3 manifest works for both).
Contributing
PRs welcome. See the root CONTRIBUTING.md.