dembrandt 0.12.10 → 0.13.0

package/README.md

@@ -43,6 +43,23 @@ Or add to your project's `.mcp.json`:
 
 7 tools available: `get_design_tokens`, `get_color_palette`, `get_typography`, `get_component_styles`, `get_surfaces`, `get_spacing`, `get_brand_identity`.
 
+Pair with **[dembrandt-skills](https://github.com/dembrandt/dembrandt-skills)** to give your agent UX intelligence on top of extracted tokens — hierarchy, accessibility, interaction states, and a full 6-stage design pipeline orchestrator.
+
+```bash
+npx skills add dembrandt/dembrandt-skills
+```
+
+## Dembrandt App (Beta)
+
+The **[Dembrandt App](https://www.dembrandt.com/app)** is the new home for your design system audits. It replaces the legacy Local UI with a more powerful, web-based management experience.
+
+* **Visual Management:** View typography, color palettes, and spacing scales in a clean, human-readable dashboard.
+* **Privacy-First:** No login required. No analytics. Your data is stored locally in your browser and is never sent to our servers.
+* **CLI Integration:** Simply run your extraction with `--save-output` and open the resulting JSON in the App for deep analysis.
+* **AI-Ready:** Copy tokens directly into your agentic workflows (Cursor, Claude, etc.) with one click.
+* **Public Beta:** More best-in-class features will be added to dembrandt App in upcoming weeks.
+
+
 ## What to expect from extraction?
 
 - Colors (semantic, palette, CSS variables, gradients)

package/lib/extractors/index.js

@@ -170,7 +170,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
 
     spinner.start("Analyzing design system (17 parallel tasks)...");
     const [
-      { logo, instances: logoInstances, favicons },
+      logoResult,
       colors,
       typography,
       spacing,
@@ -184,7 +184,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       breakpoints,
       iconSystem,
       frameworks,
-      siteName,
+      siteNameRaw,
       gradients,
       motion,
     ] = await Promise.all([
@@ -207,7 +207,71 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       extractMotion(page),
     ]);
 
+    const { logo, instances: logoInstances, favicons, manifest } = logoResult;
+    let siteName = siteNameRaw;
+
     spinner.stop();
+
+    // Inject manifest theme_color / background_color as high-confidence palette entries
+    if (manifest) {
+      const manifestColorEntries = [
+        manifest.themeColor && { color: manifest.themeColor, label: 'manifest:theme_color' },
+        manifest.backgroundColor && { color: manifest.backgroundColor, label: 'manifest:background_color' },
+      ].filter(Boolean);
+
+      const rawManifestColors = manifestColorEntries.map(e => e.color);
+      const manifestNormMap = rawManifestColors.length ? await page.evaluate((cols) => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        const out = {};
+        for (const c of cols) {
+          if (/^#[0-9a-f]{6}$/i.test(c)) { out[c] = c.toLowerCase(); continue; }
+          if (/^#[0-9a-f]{3}$/i.test(c)) { out[c] = `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`.toLowerCase(); continue; }
+          if (/^#[0-9a-f]{8}$/i.test(c)) { out[c] = c.toLowerCase().slice(0, 7); continue; }
+          const m = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+          if (m) { out[c] = `#${parseInt(m[1]).toString(16).padStart(2,'0')}${parseInt(m[2]).toString(16).padStart(2,'0')}${parseInt(m[3]).toString(16).padStart(2,'0')}`; continue; }
+          if (ctx) {
+            try {
+              ctx.clearRect(0, 0, 1, 1);
+              ctx.fillStyle = 'rgba(0,0,0,0)';
+              ctx.fillStyle = c;
+              ctx.fillRect(0, 0, 1, 1);
+              const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+              if (a > 0) { out[c] = `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`; continue; }
+            } catch {}
+          }
+          out[c] = c.toLowerCase();
+        }
+        return out;
+      }, rawManifestColors) : {};
+
+      for (const { color: raw, label } of manifestColorEntries) {
+        const normalized = manifestNormMap[raw] ?? raw.toLowerCase();
+        if (!colors.palette.some(c => c.normalized === normalized)) {
+          colors.palette.push({ color: raw, normalized, count: 10, confidence: 'high', sources: [label] });
+        } else {
+          const existing = colors.palette.find(c => c.normalized === normalized);
+          if (existing) {
+            existing.confidence = 'high';
+            if (!existing.sources.includes(label)) existing.sources.push(label);
+          }
+        }
+      }
+
+      if (!siteName && (manifest.name || manifest.shortName)) {
+        siteName = manifest.name || manifest.shortName;
+      }
+    }
+
+    if (manifest) {
+      const parts = [
+        manifest.themeColor && `theme: ${manifest.themeColor}`,
+        manifest.backgroundColor && `bg: ${manifest.backgroundColor}`,
+        manifest.name && `name: "${manifest.name}"`,
+      ].filter(Boolean);
+      console.log(color.success(`  ✓ Manifest: ${parts.join(', ')}`));
+    }
     console.log(colors.palette.length > 0 ? color.success(`  ✓ Colors: ${colors.palette.length} found`) : color.warning(`  ! Colors: 0 found`));
     console.log(typography.styles.length > 0 ? color.success(`  ✓ Typography: ${typography.styles.length} styles`) : color.warning(`  ! Typography: 0 styles`));
     console.log(spacing.commonValues.length > 0 ? color.success(`  ✓ Spacing: ${spacing.commonValues.length} values`) : color.warning(`  ! Spacing: 0 values`));
@@ -546,6 +610,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       logo,
       logoInstances,
       favicons,
+      ...(manifest ? { manifest } : {}),
       colors,
       typography,
       spacing,

package/lib/extractors/logo.js

@@ -44,6 +44,7 @@ export async function extractLogo(page, url) {
   }, url);
 
   let pwaIcons = [];
+  let manifestMeta = {};
   if (manifestIcons.length > 0) {
     try {
       const manifestUrl = manifestIcons[0].manifestUrl;
@@ -63,6 +64,13 @@ export async function extractLogo(page, url) {
           purpose: icon.purpose || 'any',
         }));
       }
+
+      if (response) {
+        if (response.theme_color) manifestMeta.themeColor = response.theme_color;
+        if (response.background_color) manifestMeta.backgroundColor = response.background_color;
+        if (response.name) manifestMeta.name = response.name;
+        if (response.short_name) manifestMeta.shortName = response.short_name;
+      }
     } catch {}
   }
 
@@ -558,6 +566,7 @@ export async function extractLogo(page, url) {
 
   // Merge PWA icons into favicons
   result.favicons = [...result.favicons, ...pwaIcons];
+  result.manifest = Object.keys(manifestMeta).length > 0 ? manifestMeta : null;
 
   return result;
 }

package/lib/formatters/terminal.js

@@ -292,17 +292,18 @@ function displayTypography(typography) {
     const fontFamilies = new Map();
 
     typography.styles.forEach(style => {
-      // Skip styles without a family name
       if (!style.family) return;
 
       if (!fontFamilies.has(style.family)) {
-        fontFamilies.set(style.family, { sizes: new Set(), weights: new Set() });
+        fontFamilies.set(style.family, { sizeContexts: new Map(), weights: new Set() });
       }
 
       const familyData = fontFamilies.get(style.family);
       if (style.size) {
         const px = Math.round(parseFloat(style.size) || 0);
-        if (px) familyData.sizes.add(px);
+        if (px && !familyData.sizeContexts.has(px)) {
+          familyData.sizeContexts.set(px, style.context || null);
+        }
       }
       if (style.weight && style.weight !== 400) {
         familyData.weights.add(style.weight);
@@ -317,11 +318,11 @@ function displayTypography(typography) {
       const isFontLast = fontIndex === totalFonts;
       const fontBranch = isFontLast ? '└─' : '├─';
 
-      const sizes = [...data.sizes]
-        .sort((a, b) => b - a)
-        .map(px => `${px}px`);
-      const sizeList = sizes.length
-        ? ' ' + chalk.dim('[ ') + sizes.join(', ') + chalk.dim(' ]')
+      const sizeTokens = [...data.sizeContexts.entries()]
+        .sort((a, b) => b[0] - a[0])
+        .map(([px, ctx]) => ctx ? `${px}px ${chalk.dim(`(${ctx})`)}` : `${px}px`);
+      const sizeList = sizeTokens.length
+        ? ' ' + chalk.dim('[ ') + sizeTokens.join(', ') + chalk.dim(' ]')
         : '';
 
       console.log(chalk.dim(`│  ${fontBranch}`) + ' ' + chalk.bold(family) + sizeList);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dembrandt",
-  "version": "0.12.10",
+  "version": "0.13.0",
   "description": "Extract design tokens and publicly visible CSS information from any website",
   "mcpName": "io.github.dembrandt/dembrandt",
   "main": "index.js",