@elyracode/design-lookup 0.7.2

package/README.md

@@ -0,0 +1,55 @@
+# @elyracode/design-lookup
+
+Extract design systems from any website. Colors, typography, spacing, components, and layout patterns -- saved as a structured markdown file the agent can reference.
+
+## Install
+
+```
+elyra install npm:@elyracode/design-lookup
+```
+
+## Requirements
+
+Puppeteer must be installed globally:
+
+```
+npm install -g puppeteer
+```
+
+## Usage
+
+### Command
+
+```
+/lookup-design https://stripe.com
+```
+
+Extracts the design system and saves it to `.elyra/LOOKUPDESIGN.md`.
+
+### Tool
+
+The agent can also call `lookup_design` automatically when you ask it to match a website's style:
+
+```
+> Build a landing page that matches the design of stripe.com
+> Make our checkout look like shopify.com
+> Use the same color palette as linear.app
+```
+
+## What it extracts
+
+- **Colors**: Primary, secondary, background, text, accent, and all CSS custom properties
+- **Typography**: Font families, weights, sizes, line heights
+- **Spacing**: Spacing scale derived from actual element measurements
+- **Components**: Button styles, card patterns, input styles, navigation
+- **Layout**: Max widths, grid systems, breakpoints
+
+## Output
+
+Results are saved to `.elyra/LOOKUPDESIGN.md` in a structured format the agent can parse and apply. The file is overwritten on each lookup.
+
+Pin it for persistent reference:
+
+```
+/pin .elyra/LOOKUPDESIGN.md
+```

package/extensions/index.ts

@@ -0,0 +1,436 @@
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import type { ExtensionAPI } from "@elyracode/coding-agent";
+import { Type } from "typebox";
+
+const EXTRACTION_SCRIPT = `
+(function() {
+  const result = { colors: {}, typography: {}, spacing: [], components: {}, layout: {}, cssVars: {} };
+
+  // Extract CSS custom properties from :root
+  try {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const sheets = document.styleSheets;
+    for (const sheet of sheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (rule.selectorText === ':root' || rule.selectorText === ':root, :host') {
+            const style = rule.style;
+            for (let i = 0; i < style.length; i++) {
+              const prop = style[i];
+              if (prop.startsWith('--')) {
+                const value = style.getPropertyValue(prop).trim();
+                if (value) result.cssVars[prop] = value;
+              }
+            }
+          }
+        }
+      } catch(e) { /* cross-origin stylesheet */ }
+    }
+  } catch(e) {}
+
+  // Extract colors from key elements
+  const colorMap = new Map();
+  function addColor(label, el) {
+    const s = getComputedStyle(el);
+    const bg = s.backgroundColor;
+    const fg = s.color;
+    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') colorMap.set(label + '-bg', bg);
+    if (fg) colorMap.set(label + '-text', fg);
+  }
+
+  const body = document.body;
+  if (body) addColor('body', body);
+
+  const nav = document.querySelector('nav, header, [role="navigation"]');
+  if (nav) addColor('nav', nav);
+
+  const main = document.querySelector('main, [role="main"], .main, #main');
+  if (main) addColor('main', main);
+
+  const footer = document.querySelector('footer, [role="contentinfo"]');
+  if (footer) addColor('footer', footer);
+
+  // Primary button
+  const btn = document.querySelector('button, [role="button"], a.btn, a.button, .btn-primary, [class*="btn"]');
+  if (btn) addColor('button', btn);
+
+  // Links
+  const link = document.querySelector('a[href]:not(nav a):not(header a)');
+  if (link) addColor('link', link);
+
+  // Headings
+  const h1 = document.querySelector('h1');
+  if (h1) addColor('heading', h1);
+
+  result.colors = Object.fromEntries(colorMap);
+
+  // Extract typography
+  const fontFamilies = new Set();
+  const fontSizes = new Set();
+  const fontWeights = new Set();
+  const lineHeights = new Set();
+
+  const textEls = document.querySelectorAll('h1, h2, h3, h4, p, span, a, li, td, th, label, button');
+  for (const el of Array.from(textEls).slice(0, 50)) {
+    const s = getComputedStyle(el);
+    fontFamilies.add(s.fontFamily.split(',')[0].trim().replace(/['"]/g, ''));
+    fontSizes.add(s.fontSize);
+    fontWeights.add(s.fontWeight);
+    lineHeights.add(s.lineHeight);
+  }
+
+  result.typography = {
+    families: [...fontFamilies].slice(0, 5),
+    sizes: [...fontSizes].sort((a, b) => parseFloat(a) - parseFloat(b)),
+    weights: [...fontWeights].sort(),
+    lineHeights: [...new Set([...lineHeights].filter(lh => lh !== 'normal'))].sort()
+  };
+
+  // Extract heading styles
+  const headingStyles = {};
+  for (const tag of ['h1', 'h2', 'h3']) {
+    const el = document.querySelector(tag);
+    if (el) {
+      const s = getComputedStyle(el);
+      headingStyles[tag] = {
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        fontFamily: s.fontFamily.split(',')[0].trim().replace(/['"]/g, ''),
+        lineHeight: s.lineHeight,
+        color: s.color
+      };
+    }
+  }
+  result.typography.headings = headingStyles;
+
+  // Body text
+  const bodyText = document.querySelector('p');
+  if (bodyText) {
+    const s = getComputedStyle(bodyText);
+    result.typography.body = {
+      fontSize: s.fontSize,
+      fontWeight: s.fontWeight,
+      fontFamily: s.fontFamily.split(',')[0].trim().replace(/['"]/g, ''),
+      lineHeight: s.lineHeight,
+      color: s.color
+    };
+  }
+
+  // Extract spacing patterns
+  const spacingValues = new Set();
+  const spacingEls = document.querySelectorAll('div, section, article, main, header, footer, p, h1, h2, h3, ul, ol');
+  for (const el of Array.from(spacingEls).slice(0, 40)) {
+    const s = getComputedStyle(el);
+    for (const prop of ['marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'gap']) {
+      const val = parseFloat(s[prop]);
+      if (val > 0 && val < 200) spacingValues.add(Math.round(val));
+    }
+  }
+  result.spacing = [...spacingValues].sort((a, b) => a - b);
+
+  // Extract component styles
+  // Buttons
+  const buttons = document.querySelectorAll('button, [role="button"], a.btn, .btn, [class*="button"]');
+  if (buttons.length > 0) {
+    const s = getComputedStyle(buttons[0]);
+    result.components.button = {
+      backgroundColor: s.backgroundColor,
+      color: s.color,
+      borderRadius: s.borderRadius,
+      padding: s.padding,
+      fontSize: s.fontSize,
+      fontWeight: s.fontWeight,
+      border: s.border
+    };
+  }
+
+  // Cards
+  const card = document.querySelector('[class*="card"], [class*="Card"], .panel, [class*="tile"]');
+  if (card) {
+    const s = getComputedStyle(card);
+    result.components.card = {
+      backgroundColor: s.backgroundColor,
+      borderRadius: s.borderRadius,
+      padding: s.padding,
+      boxShadow: s.boxShadow !== 'none' ? s.boxShadow : undefined,
+      border: s.border !== 'none' ? s.border : undefined
+    };
+  }
+
+  // Inputs
+  const input = document.querySelector('input[type="text"], input[type="email"], input:not([type]), textarea');
+  if (input) {
+    const s = getComputedStyle(input);
+    result.components.input = {
+      backgroundColor: s.backgroundColor,
+      borderRadius: s.borderRadius,
+      padding: s.padding,
+      border: s.border,
+      fontSize: s.fontSize,
+      color: s.color
+    };
+  }
+
+  // Layout
+  const containers = document.querySelectorAll('[class*="container"], [class*="Container"], [class*="wrapper"], main, .max-w');
+  let maxWidth = 'none';
+  for (const el of containers) {
+    const s = getComputedStyle(el);
+    const mw = s.maxWidth;
+    if (mw && mw !== 'none' && mw !== '100%') {
+      maxWidth = mw;
+      break;
+    }
+  }
+  result.layout.maxWidth = maxWidth;
+
+  // Detect grid usage
+  const gridEls = document.querySelectorAll('[style*="grid"], [class*="grid"], [class*="Grid"]');
+  result.layout.usesGrid = gridEls.length > 0;
+
+  const flexEls = document.querySelectorAll('[style*="flex"], [class*="flex"], [class*="Flex"]');
+  result.layout.usesFlex = flexEls.length > 0;
+
+  return JSON.stringify(result);
+})()
+`;
+
+function rgbToHex(rgb: string): string {
+	const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (!match) return rgb;
+	const r = parseInt(match[1]);
+	const g = parseInt(match[2]);
+	const b = parseInt(match[3]);
+	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+}
+
+function formatDesignSystem(url: string, data: any): string {
+	const lines: string[] = [];
+	lines.push(`# Design System: ${url}`);
+	lines.push(``);
+	lines.push(`> Extracted ${new Date().toISOString().split("T")[0]}`);
+	lines.push(``);
+
+	// Colors
+	lines.push(`## Colors`);
+	lines.push(``);
+	if (data.colors && Object.keys(data.colors).length > 0) {
+		for (const [key, value] of Object.entries(data.colors)) {
+			const hex = rgbToHex(value as string);
+			lines.push(`- **${key}**: ${hex}`);
+		}
+	}
+
+	// CSS Custom Properties (color-related)
+	if (data.cssVars && Object.keys(data.cssVars).length > 0) {
+		const colorVars = Object.entries(data.cssVars).filter(
+			([k, v]) => typeof v === "string" && (
+				(v as string).startsWith("#") ||
+				(v as string).startsWith("rgb") ||
+				(v as string).startsWith("hsl") ||
+				k.includes("color") || k.includes("bg") || k.includes("foreground") || k.includes("background")
+			)
+		);
+		if (colorVars.length > 0) {
+			lines.push(``);
+			lines.push(`### CSS Variables`);
+			for (const [key, value] of colorVars.slice(0, 20)) {
+				lines.push(`- \`${key}\`: ${value}`);
+			}
+		}
+	}
+	lines.push(``);
+
+	// Typography
+	lines.push(`## Typography`);
+	lines.push(``);
+	if (data.typography) {
+		if (data.typography.families?.length > 0) {
+			lines.push(`### Font Families`);
+			for (const f of data.typography.families) {
+				lines.push(`- ${f}`);
+			}
+			lines.push(``);
+		}
+		if (data.typography.body) {
+			const b = data.typography.body;
+			lines.push(`### Body Text`);
+			lines.push(`- Font: ${b.fontFamily}`);
+			lines.push(`- Size: ${b.fontSize}`);
+			lines.push(`- Weight: ${b.fontWeight}`);
+			lines.push(`- Line height: ${b.lineHeight}`);
+			lines.push(``);
+		}
+		if (data.typography.headings && Object.keys(data.typography.headings).length > 0) {
+			lines.push(`### Headings`);
+			for (const [tag, style] of Object.entries(data.typography.headings)) {
+				const s = style as any;
+				lines.push(`- **${tag}**: ${s.fontSize}, weight ${s.fontWeight}, ${s.fontFamily}`);
+			}
+			lines.push(``);
+		}
+		if (data.typography.sizes?.length > 0) {
+			lines.push(`### Size Scale`);
+			lines.push(`${data.typography.sizes.join(", ")}`);
+			lines.push(``);
+		}
+	}
+
+	// Spacing
+	lines.push(`## Spacing`);
+	lines.push(``);
+	if (data.spacing?.length > 0) {
+		lines.push(`Scale (px): ${data.spacing.join(", ")}`);
+		const base = data.spacing.length > 1 ? data.spacing[1] - data.spacing[0] : data.spacing[0];
+		if (base === 4 || base === 8) {
+			lines.push(`Base unit: ${base}px`);
+		}
+	}
+	lines.push(``);
+
+	// Components
+	lines.push(`## Components`);
+	lines.push(``);
+	if (data.components) {
+		if (data.components.button) {
+			const b = data.components.button;
+			lines.push(`### Button`);
+			lines.push(`- Background: ${rgbToHex(b.backgroundColor)}`);
+			lines.push(`- Text: ${rgbToHex(b.color)}`);
+			lines.push(`- Border radius: ${b.borderRadius}`);
+			lines.push(`- Padding: ${b.padding}`);
+			lines.push(`- Font: ${b.fontSize}, weight ${b.fontWeight}`);
+			lines.push(``);
+		}
+		if (data.components.card) {
+			const c = data.components.card;
+			lines.push(`### Card`);
+			lines.push(`- Background: ${rgbToHex(c.backgroundColor)}`);
+			lines.push(`- Border radius: ${c.borderRadius}`);
+			lines.push(`- Padding: ${c.padding}`);
+			if (c.boxShadow) lines.push(`- Shadow: ${c.boxShadow}`);
+			if (c.border) lines.push(`- Border: ${c.border}`);
+			lines.push(``);
+		}
+		if (data.components.input) {
+			const i = data.components.input;
+			lines.push(`### Input`);
+			lines.push(`- Background: ${rgbToHex(i.backgroundColor)}`);
+			lines.push(`- Border: ${i.border}`);
+			lines.push(`- Border radius: ${i.borderRadius}`);
+			lines.push(`- Padding: ${i.padding}`);
+			lines.push(`- Font size: ${i.fontSize}`);
+			lines.push(``);
+		}
+	}
+
+	// Layout
+	lines.push(`## Layout`);
+	lines.push(``);
+	if (data.layout) {
+		if (data.layout.maxWidth !== "none") lines.push(`- Max width: ${data.layout.maxWidth}`);
+		if (data.layout.usesGrid) lines.push(`- Uses CSS Grid`);
+		if (data.layout.usesFlex) lines.push(`- Uses Flexbox`);
+	}
+	lines.push(``);
+
+	return lines.join("\n");
+}
+
+export default function (elyra: ExtensionAPI): void {
+	elyra.registerTool({
+		name: "lookup_design",
+		label: "Lookup Design System",
+		description:
+			"Extract the design system from a website URL. Returns colors, typography, spacing, " +
+			"component styles, and layout patterns. Saves results to .elyra/LOOKUPDESIGN.md. " +
+			"Use when asked to match, replicate, or reference another website's design. " +
+			"Requires Puppeteer (npm install -g puppeteer).",
+		parameters: Type.Object({
+			url: Type.String({
+				description: "Website URL to extract design from (e.g., https://stripe.com)",
+			}),
+		}),
+		execute: async (_toolCallId, params) => {
+			const cwd = process.cwd();
+			const elyraDir = join(cwd, ".elyra");
+			const outputPath = join(elyraDir, "LOOKUPDESIGN.md");
+
+			try {
+				if (!existsSync(elyraDir)) {
+					mkdirSync(elyraDir, { recursive: true });
+				}
+
+				// Write extraction script to temp file
+				const tmpDir = join(require("os").tmpdir(), "elyra-design-lookup");
+				if (!existsSync(tmpDir)) mkdirSync(tmpDir, { recursive: true });
+
+				const scriptPath = join(tmpDir, "extract.mjs");
+				const puppeteerScript = `
+import puppeteer from 'puppeteer';
+
+const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] });
+const page = await browser.newPage();
+await page.setViewport({ width: 1280, height: 800 });
+await page.goto('${params.url}', { waitUntil: 'networkidle2', timeout: 20000 });
+await new Promise(r => setTimeout(r, 2000));
+const result = await page.evaluate(() => {
+  ${EXTRACTION_SCRIPT}
+});
+console.log(result);
+await browser.close();
+`;
+
+				writeFileSync(scriptPath, puppeteerScript, "utf-8");
+
+				const rawResult = execSync(`node "${scriptPath}"`, {
+					timeout: 45000,
+					encoding: "utf-8",
+					stdio: ["pipe", "pipe", "pipe"],
+				}).trim();
+
+				const data = JSON.parse(rawResult);
+				const markdown = formatDesignSystem(params.url, data);
+
+				writeFileSync(outputPath, markdown, "utf-8");
+
+				return {
+					content: [
+						{ type: "text", text: markdown },
+						{ type: "text", text: `\n\nSaved to ${outputPath}` },
+					],
+					details: { url: params.url, outputPath },
+				};
+			} catch (error) {
+				const msg = error instanceof Error ? error.message : String(error);
+				if (msg.includes("puppeteer") || msg.includes("Cannot find module")) {
+					return {
+						content: [{
+							type: "text",
+							text: "Puppeteer is required for design extraction.\n\nInstall: npm install -g puppeteer",
+						}],
+						details: { url: params.url, outputPath },
+					};
+				}
+				return {
+					content: [{ type: "text", text: `Design extraction failed: ${msg}` }],
+					details: { url: params.url, outputPath },
+				};
+			}
+		},
+	});
+
+	elyra.registerCommand("lookup-design", {
+		description: "Extract design system from a website: /lookup-design <url>",
+		handler: async (args, ctx) => {
+			const url = args.trim();
+			if (!url) {
+				ctx.ui.notify("Usage: /lookup-design <url>\n\nExample: /lookup-design https://stripe.com", "error");
+				return;
+			}
+			elyra.sendUserMessage(`Extract the design system from ${url} and save it to .elyra/LOOKUPDESIGN.md`);
+		},
+	});
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@elyracode/design-lookup",
+  "version": "0.7.2",
+  "description": "Extract design systems from any website -- colors, typography, spacing, components, and layout patterns",
+  "type": "module",
+  "keywords": [
+    "elyra-package",
+    "design",
+    "design-system",
+    "reverse-engineering",
+    "css",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "author": "Knut W. Horne",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kwhorne/elyra.git",
+    "directory": "packages/design-lookup"
+  },
+  "elyra": {
+    "extensions": [
+      "./extensions/index.ts"
+    ]
+  },
+  "peerDependencies": {
+    "@elyracode/coding-agent": "*",
+    "typebox": "*"
+  },
+  "scripts": {
+    "clean": "echo 'nothing to clean'",
+    "build": "echo 'nothing to build'",
+    "check": "echo 'nothing to check'"
+  }
+}