Crawl a whole site and synthesize one unified, de-duplicated design
system across pages (canonical tokens, coverage map, drift grade) plus
a Claude-plugin health fix. Deterministic, free, no API key.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
`designlang verify <url>` closes the extract→prove loop. For each detected
component (button+card in v1) it rebuilds a clone styled ONLY by the extracted
tokens (each visual property snapped to nearest token, colours in CIE-Lab ΔE),
renders it, and pixel-diffs against the live component → 0-100 fidelity score +
per-token-family attribution + a verify.html triptych (original | rebuilt |
loss heatmap) + verify.json. `--min` gates CI.
Honest by construction: missing component → n/a (excluded, no silent 100);
property with no token → unmapped (counted as loss, surfaced in attribution);
size mismatch letterboxed, never stretched.
New isolated modules under src/verify/ (tokens/restyle/render/diff/index) +
formatters/verify.js + verify CLI command. Adds pixelmatch+pngjs. 13 unit tests,
full suite green (438). Live smoke vs github.com: button 89/100.
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Replaces the v9 hardcoded-selector screenshot pass with a cluster-
aware, retina (2×), multi-variant pipeline.
- New src/extractors/component-screenshots.js groups candidates by
kind + variantHint + sizeHint and captures up to three reps per
group. Falls back to the v9 hardcoded list when nothing clusters
(auth / docs pages).
- Dedicated Playwright context at deviceScaleFactor: 2 for crisp crops
- New *-screenshots.json index maps every crop to cluster/bounds
- Markdown gains a Component Screenshots section
- No new CLI flags — --screenshots / --full still opt into capture
- 299/299 tests passing
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Six new extractors (page-intent, section-roles, component-library,
material-language, imagery-style, logo), a multi-page crawl
orchestrator with cross-page consistency, an optional --smart LLM
fallback, and a ready-to-paste prompt pack for v0 / Lovable / Cursor /
Claude Artifacts.
v9 captured *how* a site looks. v10 captures *what it is* — the
semantic signal an LLM needs to rebuild a site faithfully.
- page-intent.js: landing/pricing/docs/blog/product/about/dashboard/auth/legal
- section-roles.js: hero/feature-grid/logo-wall/stats/testimonial/
pricing-table/faq/steps/comparison/bento/cta/footer + slot copy +
reading order
- component-library.js: shadcn/Radix/MUI/Chakra/Mantine/AntD/HeroUI/
Vuetify/Bootstrap/Tailwind detection with evidence + alternates
- material-language.js: glass/neumorph/flat/brutalist/soft-ui/
material-you/skeuo from shadow + geometry + saturation
- imagery-style.js: photo/3d/iso/flat-illustration/mesh/icon-only/
screenshot + dominant aspect + image-radius profile
- logo.js: SVG/PNG extraction + sampled clearspace
- multipage.js: auto-discovers canonical pages from nav, runs full
pipeline per page, emits Jaccard consistency
- classifiers/smart.js: opt-in LLM refinement via OPENAI_API_KEY or
ANTHROPIC_API_KEY, zero-dep fetch
- formatters/prompt-pack.js: v0.txt, lovable.txt, cursor.md,
claude-artifacts.md, per-component recipe cards
New CLI flags: --smart, --pages <n>, --no-prompts.
New output files: *-intent.json, *-visual-dna.json, *-library.json,
*-logo.{svg,png,json}, *-multipage.json, *-prompts/.
Extended markdown: 6 new sections.
297/297 tests passing.
Website: v10 capabilities section, version stamps bumped to v10,
and a fix for the Specimens IntersectionObserver that was hijacking
--accent on page load before the specimens strip was ever in view.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* docs: v7.1 spec — designer toolkit
* feat(v7.1): cookie-file loader + --insecure + --user-agent + Chrome extension
Ships three community-requested features in one release.
## Cookie handling
- `--cookie-file <path>` loads cookies from JSON array, Playwright storageState, or Netscape cookies.txt.
- `src/utils-cookies.js` with 8 unit tests covering all three formats plus merge-with-CLI behavior.
## Network / auth
- `--insecure` sets `ignoreHTTPSErrors: true` on the Playwright context and adds the matching Chromium flags.
- `--user-agent <ua>` overrides the browser UA.
## Chrome extension (chrome-extension/)
- Manifest v3 popup with activeTab permission only.
- Handoff button opens the hosted extractor with the current URL prefilled (via `?url=`).
- Copy-CLI button drops `npx designlang <url>` into the clipboard.
- Four PNG icons rendered from the existing favicon SVG.
- Install-in-dev-mode instructions in chrome-extension/README.md.
## Website
- HeroExtractor now honours `?url=` query param (Chrome extension handoff, deep links). Prefill is mount-only and URL-validated.
## Contributing
- CONTRIBUTING.md adds a 'Good first issues' list and a 'Credits' section. Bumped to v7.1.0.
* docs: v7.0 spec and implementation plan
* chore: add @modelcontextprotocol/sdk for v7 MCP server
* feat(formatters): add DTCG v1 tokens with primitive + semantic + composites
* feat: use DTCG token format by default; legacy via --tokens-legacy
* feat(extractors): add stack-fingerprint for framework + Tailwind detection
Detects framework (next/nuxt/gatsby/remix/react/vue/astro/sveltekit/
shopify/wordpress/webflow/framer), CSS layer (tailwind with top-100
utility frequencies), and analytics providers from crawled page
signals (scripts, meta tags, class-name sample, window globals).
Crawler now emits rawData.light.stack carrying those signals.
design.stack lands on the extraction output.
* feat(extractors): CSS health audit (specificity, !important, unused, keyframes)
Uses Playwright CSS coverage to compute used/unused bytes, counts
!important usage, duplicate prop:value pairs, vendor-prefix hits,
selector specificity distribution, and catalogs @keyframes.
Crawler starts coverage before navigation and stops after the page
settles; gracefully degrades to empty coverage on unsupported targets.
scoring.js gains an additive cssHealth dimension (does not change
existing weighted overall score for back-compat).
* feat(a11y): remediation suggestions — nearest palette color passing WCAG
For every failing contrast pair emitted by the accessibility extractor,
search design.colors.all for a palette entry that clears the matching
WCAG threshold (AA-normal=4.5, AA-large=3, AAA variants).
Exposes design.accessibility.failingPairs (derived) and
design.accessibility.remediation (array of { fg, bg, ratio, rule,
suggestion }). Suggestion is null when no palette color qualifies.
* feat(extractors): semantic-regions classifier (nav/hero/pricing/footer/…)
Classifies page sections using landmark tag/role plus keyword and
layout heuristics into: nav, hero, pricing, testimonials, features,
cta, footer, sidebar, content.
Crawler emits rawData.light.sections carrying tag, role, class/id,
text sample, headings, button/card counts, and bounds for each
landmark/section element.
* feat(extractors): reusable component clustering with variant detection
Groups button/input/link/card candidates by structural hash (tag >
child tags), then splits each group into variants by cosine
similarity on a style vector (padding, bg/fg channels, radius,
border, font metrics). Cosine >= 0.95 collapses into one variant.
Crawler serializes rawData.light.componentCandidates with kind,
structuralHash, styleVector, and human-readable css per element.
Markdown formatter renders a new "Component Clusters" section
(additive — the legacy "Component Patterns" section is preserved).
* chore(repo): add issue templates, funding config, contact links
* feat(formatters): iOS SwiftUI emitter from DTCG tokens
Adds a shared internal `resolveRef(tokens, path)` helper plus
`formatIosSwiftUI(tokens)` that emits a SwiftUI file with:
- semantic Colors (resolved through {primitive.*} references)
- CGFloat extensions for primitive spacing/radius
- a primitive palette for direct use
- typography hint comments (Font generation deferred)
9 new tests (4 iOS + 5 resolveRef).
* feat(formatters): Android Compose emitter
Adds `formatAndroidCompose(tokens)` producing Theme.kt (Kotlin Compose
object with Color/dp values), plus colors.xml and dimens.xml resources.
PascalCase in Kotlin, snake_case in XML, #FF-prefixed hex for alpha.
3 new tests.
* feat(formatters): Flutter Dart emitter
Adds `formatFlutterDart(tokens)` producing a Dart file with a
DesignTokens class (semantic colors, primitive spacing/radius/colors)
and a buildDesignlangTheme() helper wiring primary/surface into a
ColorScheme.
2 new tests.
* feat(formatters): WordPress block theme skeleton with theme.json
Adds `formatWordPressTheme(tokens, design)` returning a full block-theme
file map:
- theme.json (WP schema v3 with color palette, spacing, font sizes/families
derived from DTCG tokens)
- style.css (valid WP theme header + :root custom props)
- functions.php (minimal theme support)
- index.php (template-part fallback)
- templates/index.html (block-markup entry)
Legacy `formatWordPress(design)` export preserved for existing consumers.
4 new tests.
* feat: --platforms dispatcher for web/ios/android/flutter/wordpress
Adds a comma-separated --platforms CLI option that emits additional
platform-native outputs alongside the existing web set:
- ios → ios/DesignTokens.swift
- android → android/Theme.kt + colors.xml + dimens.xml
- flutter → flutter/design_tokens.dart
- wordpress → wordpress-theme/{theme.json, style.css, functions.php,
index.php, templates/index.html}
"all" expands to every known platform. Web is always emitted (additive).
Threads `platforms` through mergeConfig with a parsePlatforms helper that
normalizes CSV/array inputs, ignores unknown values, and guarantees web
is present.
10 new tests (6 parsePlatforms, 3 mergeConfig platforms, 1 CLI help).
Manav Arya Singh